Saltar al contenido

20 herramientas SVG gratuitas para mejores gráficos (actualizado)

svg-graphics-tools

SVG está ganando popularidad en el diseño web en estos días y puede usar 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í el 20 herramientas que puede utilizar para trabajar con SVG de forma rápida y eficiente. En su mayoría, tenemos herramientas en línea que pueden ayudar en la optimización, conversión, creación de patrones y más.

Cómo crear una animación SVG usando CSS

Cómo crear una animación SVG usando CSS

La animación de SVG se puede realizar a través de elementos nativos como y . Pero para los que son … Leer más

Sistema de coordenadas SVG interactivo

Cuando trabajas con SVG no puedes dejar sus coordenadas. Esta es una gran herramienta interactiva de Sara Souiden, para ayudarte aprender cómo funcionan las coordenadas SVG. Usando viewBox y preserveAspectRatio en SVG, guiado por líneas naranjas y púrpuras y una práctica regla, puede jugar mientras aprende cómo funcionan las coordenadas SVG.

svg-graphics-tools
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 la imagen de fondo base64 como resultado.

svg-graphics-tools
SVGO

SVG que se exporta puede contener información innecesaria que se puede eliminar sin afectar el resultado de la representación. Si quieres eliminar metadatos, comentarios o elementos ocultos del editor, puede utilizar SVGO.

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

SVG Dios mío

SVG Dios mío convierte la línea de comando de SVGO (la herramienta anterior) en un Versión GUI que más intuitivo y fácil de usar. Solo alternar los botones para activar o desactivar cada función. Al final, también puede obtener el resultado como archivos de imagen y código.

svg-graphics-tools
SVG ahora

Cuando trabaja en Illustrator, el SVG exportado contiene información que no es necesaria. Con esta herramienta podrás obtenga la versión optimizada de su SVG exportado directamente desde su espacio de trabajo de Illustrator. Esta herramienta agrega un panel con algunas opciones para optimizar SVG.

svg-graphics-tools
Convertidor de SVG a PNG

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

svg-graphics-tools
Circo SVG

Si cree que las animaciones del cargador son geniales, ahora puede crearlas fácilmente utilizando SVG con Circo SVG. Las herramientas le permiten haga su propio cargador, ruleta o cualquier cosa similar usando animación en bucle. Configure el ‘Actor’, la posición, el tamaño, el color y otros desde el panel, luego exporte para obtener los resultados.

svg-graphics-tools
Sprite de SVG

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

Cuasi

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

svg-graphics-tools
Patrón llano

Creando patrones con SVG nunca ha sido más fácil ni más divertido. Cargue su imagen, reduzca la escala o cambie el espaciado, gire y cambie el color hasta obtener un patrón hermoso. Puede obtener una vista previa del resultado antes de descargarlo.

svg-graphics-tools
Generador Trianglify

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

svg-graphics-tools
Exportar PSD a SVG

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

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

Filtros SVG

¿Sabe que con SVG puede agregar efectos como tono, saturación, desenfoque, superposición de color lineal y muchos otros a las imágenes? Aquí hay una herramienta que visualiza estos efectos, luego le da un fragmento para que sea fácil incrustar el efecto en su proyecto.

svg-graphics-tools
SVG morfeo

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

morfeo
Generador de ruta de clip

SVG le permite hacer clic en el clip de imagen con Shape. Esto es bastante fácil si la forma tiene la forma de un cuadrado o un círculo. Pero que si la forma es una con muchos puntos o es una forma poligonal? Ahí es donde necesita esta herramienta Generador de ruta de clip.

svg-graphics-tools
Chartist.js

Chartist.js es una biblioteca para crear gráficos receptivos altamente personalizables. Utiliza SVG para mostrar los gráficos, que también se pueden animar con SMIL. Con esta biblioteca, puede crear gráficos de líneas, gráficos circulares, gráficos de barras y otros tipos de gráficos, e incluso agregarles animación.

Generador de tablero de trazos SVG

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 ancho, alto, rotación o color. Luego, puede tomar el código HTML y CSS para aplicar esta línea de trazos en su proyecto.

svg-graphics-tools
Método de dibujo: un editor de SVG simple

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

svg-graphics-tools
Exportar Flash a SVG animado

Aunque ya no es muy popular, existe la posibilidad de que algunos de ustedes tengan dificultades para soltar Flash. Si es así, puedes convierta su animación flash en SVG para que siga funcionando de manera compatible con las tecnologías más nuevas. Esta herramienta forma una extensión de la aplicación Flash y puede funcionar en CS5, CS6 y CC.

Puede exportar a SVG cuando se trata de formas, símbolos de mapas de bits, interpolaciones de movimiento clásico, interpolaciones de formas (para otros, existe un éxito discutible).