Desarrollo y Diseño

20 Herramientas SVG Gratuitas Para Mejorar tus Gráficos (Actualizado)

SVG está ganando popularidad en el diseño web en estos días y se pueden utilizar herramientas como Illustrator o Inkscape para crear gráficos SVG. Pero cuando se trata de diseño web, siempre debemos optimizar para obtener resultados más ligeros.

Aquí te mostraremos las 20 herramientas que puedes utilizar para trabajar con SVG de forma rápida y eficiente. Tenemos la mayoría de las herramientas en línea, que puede ayudar en la optimización, la conversión, haciendo patrones, y más.

Interactive SVG Coordinate System

Cuando trabajas con SVG no puedes dejar sus coordenadas. Esta es una gran herramienta interactiva por Sara Souiden, para ayudarle a aprender cómo funcionan las coordenadas SVG. Usando el viewBox y preserveAspectRatio en SVG, guiado por líneas naranjas y moradas y una práctica regla, puedes jugar mientras aprendes cómo funcionan las coordenadas SVG.

b64

b64 es una herramienta sencilla para optimizar las imágenes y luego convertirlas en el formato base64. Puede soltar sus imágenes SVG (otros formatos como JPG y PNG también funcionan) y luego tomar el CSS con base64 background-image como resultado.

SVGO

El SVG que se exporta puede contener información innecesaria que puede eliminarse sin que afecte al resultado de la representación. Si desea eliminar los metadatos del editor, los comentarios o los elementos ocultos, puede utilizar SVGO.

Usted puede intall SVGO a través de npm, $ [sudo] npm install -g svgo o utilizar la versión GUI que ofrece arrastrar y soltar para procesar su optimización SVG.

SVG OMG

SVG OMG convierte la línea de comandos de SVGO (la herramienta anterior) en una versión GUI más intuitiva y fácil de usar. Basta con alternar los botones para activar o desactivar cada función. Al final puedes coger el resultado como archivos de imagen y también de código.

SVG Now

Cuando se trabaja en Illustrator, el SVG exportado contiene alguna información que no es necesaria. Con esta herramienta obtendrá la versión optimizada de su SVG exportado directamente desde su espacio de trabajo de Illustrator. Esta herramienta añade un panel con algunas opciones para optimizar el SVG.

SVG to PNG converter

¿Quieres exportar archivos SVG a PNG? ¿Sin abrir aplicaciones como Illustrator para hacerlo? Utilice esta herramienta de conversión de SVG a PNG para obtener salidas de imágenes en formato PNG y también URI de datos PNG Base64 si lo necesita.

SVG Circus

Si crees que las animaciones de cargadores son geniales, ahora puedes crearlas fácilmente utilizando SVG con SVG Circus. Las herramientas le permiten hacer su propio cargador, spinner, o cualquier cosa similar utilizando la animación en bucle. Establezca el ‘Actor’, la posición, el tamaño, el color y otros desde el panel, y luego exporte para obtener los resultados.

SVG Sprite

SVG Sprite es un módulo de Node.js que optimiza un montón de archivos SVG y los convierte en tipos de sprites SVG, incluidos los sprites CSS tradicionales para las imágenes de fondo y/o primer plano, SVG stacks y más.

Quasi

Con quasi puedes generar imágenes de cuasicristales como las que ves a continuación. Este generador es experimental, pero los resultados son definitivamente geniales. Puedes jugar cambiando el valor de las opciones, y luego descargar los resultados con el botón ‘Save SVG’.

Plain Pattern

Crear patrones con SVG nunca ha sido tan fácil ni tan divertido. Cargue su imagen, reduzca la escala o cambie el espaciado, rote y recoloque hasta obtener un hermoso patrón. Puedes previsualizar el resultado antes de descargarlo.

Trianglify Generator

Crea hermosos patrones geométricos SVG con Trianglify generador. Usted puede establecer la aleatoriedad/variante de color, el tamaño de la granularidad, y elegir una paleta de colores para trabajar. Esta herramienta es una versión GUI de Trianglify.

Export PSD to SVG

Si utiliza Photoshop como editor de imágenes para su trabajo, a veces puede necesitar convertir su diseño en el espacio de trabajo de Photoshop en SVG, que es un formato no compatible con Photoshop. Descargue el Script de esta herramienta y cópielo en la carpeta Adobe Photoshop/presets/scripts.

Cambie el nombre de una capa vectorial con la extensión SVG (por ejemplo, la capa1 se convierte en capa1.svg), y ahora puede ejecutar el script desde Archivo > Scripts > PS to SVG.

SVG Filters

¿Sabes que con SVG puedes añadir efectos como con el tono, la saturación, el desenfoque, la superposición lineal de colores y muchos otros a las imágenes? Aquí tienes una herramienta que visualiza estos efectos, y luego te da un fragmento para que sea fácil incrustar el efecto en tu proyecto.

SVG Morpheous

SVG Morpheous es una biblioteca de JavaScript que le permite transformar un icono SVG de una forma a otra. Se puede establecer el efecto de flexibilización, la duración de las animaciones de transición, y también la dirección de rotación.

Clip path generator

SVG le permite hacer clic en el clip de la imagen con la forma. Esto es bastante fácil si la forma es un cuadrado o un círculo. ¿Pero qué pasa si la forma es una con muchos puntos o es una forma poligonal? Ahí es donde necesitas esta herramienta.

Chartist.js

Chartist.js es una librería para crear gráficos responsivos altamente personalizables. Utiliza SVG para mostrar los gráficos, que también pueden ser animados usando SMIL. Con esta librería, puedes crear gráficos de líneas, gráficos circulares, gráficos de barras y otros tipos de gráficos, e incluso añadirles animación.

SVG stroke dash generator

Esta es una herramienta sencilla para generar líneas discontinuas utilizando SVG stroke-dasharray. Primero elija un tipo de guión de la lista, luego personalícelo en términos de anchura, altura, rotación o color. Después puedes coger el código HTML y CSS para aplicar esta línea de guiones en tu proyecto.

Method Draw: A Simple SVG Editor

Method Draw es un editor de SVG basado en la web, con una interfaz intuitiva que incluye herramientas en ambos lados del lienzo. Puedes dibujar líneas, formas, introducir texto o utilizar formas incorporadas, y luego editar las propiedades de los objetos dibujados. Exporta la imagen en formato SVG (también viene en formato SVG base64) o guárdala directamente en PNG.

Export Flash to animated SVG

Aunque ya no es muy popular, es posible que a algunos de ustedes les cueste dejar de usar Flash. Si es así, puedes convertir tu animación flash en SVG para que siga funcionando de forma compatible con las nuevas tecnologías. Esta herramienta constituye una extensión de la aplicación Flash, y puede funcionar en CS5, CS6 y CC.

Puedes exportar a SVG cuando se trata de Shapes, Bitmaps Symbols, Classic Motion Tweens, Shape tweens (para otros, hay éxito discutible).

Síguenos en Facebook