20 herramientas SVG super útiles para mejores gráficos - Parte 2

Los SVG están ganando popularidad en el diseño web en estos días. Por si te quieres sumar al carro de esta nueva moda, puedes utilizar herramientas como Illustrator o Inkscape para crear gráficos SVG. Pero cuando se trata de diseño de páginas web, siempre debemos optimizar para mejores resultados. En este artículo te mostramos 20 herramientas que puedes utilizar para trabajar con gráficos SVG de forma rápida y eficiente. En esta lista hay herramientas sobre todo online, que pueden ayudar en la optimización, la conversión, creación de patrones y mucho más... Puedes ver la primera parte aquí.

Tringlify Generator

Crea hermosos patrones geométricos en SVG con Trianglify Generator. Puedes establecer parámetros como la aleatoriedad del color/variante, el tamaño del grano e incluso escoger una paleta de colores con la que trabajar. Esta herramienta es una versión GUI de Trianglify.

SVG Gradient

Como bien sabes, puedes hacer gradientes con CSS, pero ¿sabías que puedes hacer lo mismo con archivos SVG? La forma más fácil de generar gradientes con SVG es mediante el uso de esta herramienta. Solo tienes que introducir el color inicial y el color final y recibirás un código con el resultado generado. Se incluye también un fallback en CSS.

Export PSD to SVG

Si utilizas Photoshop como editor de imágenes para trabajar, es posible que tengas que convertir tus diseños en Photoshop a SVG, que es un formato no soportado en Photoshop. Descarga el script para esta herramienta y, a continuación, cópialo en la carpeta Adobe Photoshop/presets/scripts.

Cambia el nombre de la capa vectorial con la extensión SVG (por ejemplo Layer1 a layer1.svg), y a partir de ahí puedes ejecutar el script desde Archivo>>Scripts>>PSD to SVG

SVG Filters

¿Sabías que con SVG puedes ser capaz de añadir efectos como la tonalidad, saturación, falta de definición, superposición de color lineal, y muchos otros a imágenes? Aquí tienes una herramienta que permite visualizar estos efectos, y luego te proporciona un fragmento de código para que el efecto sea fácil de insertar en tu proyecto.

SVG Morpheous

SVG Morpheous es una biblioteca JavaScript que te permite hacer morphing a un icono SVG de un shape a otro. Puedes establecer el efecto de suavizado, la duración de las animaciones de transición, así como la dirección de rotación.

Clip path generator

SVG permite hacer clic en el clip de la imagen con Shape. Esto es sencillo si el shape tiene la forma de un cuadrado o de un círculo. Pero, ¿y si el shape cuenta con una gran cantidad de puntos o es un shape poligonal? Ahí es donde necesitas este Clip path generator.

Chartist.js

Chartist.js es una librería para crear gráficos altamente personalizables. Utiliza SVG para visualizar los gráficos, que también pueden ser animados usando SMIL. Con esta librería, puedes ser capaz de crear gráficos online, gráficos circulares, gráficos de barras y otros tipos de gráficos, e incluso animarlos.

SVG stroke dash generator

Esta es una herramienta sencilla para generar líneas de puntos utilizando SVG stroke-dasharray. Primero elige el tipo de línea discontinua, a continuación, personalízala en términos de anchura, altura, rotación o color. Posteriormente se puede copiar el código HTML y CSS para aplicar esta línea discontinua en tu proyecto.

Method Draw: A Simple SVG Editor

Method Draw es un editor de SVG online, con una interfaz intuitiva que cuenta con herramientas a ambos lados del canvas. Puedes dibujar líneas, shapes, input text o built-in shapes, a continuación, puedes editar las propiedades de los objetos dibujados. Exporta la imagen en formato SVG (también puedes hacerlo en formato base64 SVG) o guardarlo directamente en PNG.

Export Flash to animated SVG

Aunque no es muy popular ya, existe la posibilidad de que algunos todavía recordéis Flash con anhelo. Si es así, puedes convertir tu animación flash en SVG para que siga funcionando y que sea compatible con las nuevas tecnologías. Esta herramienta constituye una extensión de las aplicación Flash, y funciona en CS5, CS6 y CC.

Puedes exportar a SVG cuando se trate de shapes, símbolos bitmaps, Classic Motion Tweens, Shape Tweens (para otros objetos, no suele funcionar siempre).

Y este ha sido el artículo en el que trataba de mostraros 20 herramientas SVG super útiles para mejores gráficos, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP