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

SVG se está volviendo cada vez más popular 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 necesitamos optimizar para obtener resultados más ligeros.

aquí 20 herramientas para un uso rápido y eficiente de SVGTenemos principalmente herramientas en línea que pueden ayudar a optimizar, convertir, crear plantillas y más.

Sistema de coordenadas SVG interactivo

Cuando usas SVG, no puedes dejar sus coordenadas. Aquí hay una gran herramienta interactiva de Sara Souiden para ayudarte. Aprende cómo funcionan las coordenadas SVGusar viewBox y preserveAspectRatio En SVG, guiado por líneas naranjas y moradas y una regla cómoda, puede aprender el poder de las coordenadas SVG mientras juega.

b64

b64 es una herramienta sencilla Optimice las imágenes, luego conviértalas al formato base64Puede eliminar la imagen SVG (otros formatos como JPG y PNG también son buenos) y obtener CSS con una imagen de fondo base64.

SVGO

El SVG exportado puede contener informacion innecesaria Se puede eliminar sin afectar el resultado de la imagen. Si lo desea 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 usar versión de interfaz gráfica de usuario Proporciona arrastrar y soltar para manejar su optimización SVG.

SVG Dios mío

SVG Dios mío cambiar la línea de comando a SVGO (instrumento anterior) se convierte en un versión de interfaz gráfica de usuario Más intuitivo y fácil de usar botón de activación Habilite o deshabilite cada función. Finalmente, también puede obtener el resultado como un archivo de imagen y código.

SVG ahora

Cuando usa Illustrator, el SVG exportado contiene información innecesaria Obtenga una versión optimizada del SVG exportado Directamente desde su espacio de trabajo de Illustrator. La herramienta agrega un panel con algunas opciones para optimizar SVG.

Conversor de SVG a PNG

yo quiero Exportar archivos SVG en formato PNG¿Puedes hacer esto sin abrir una aplicación como Illustrator? Utilice esta herramienta para convertir SVG a PNG para obtener una imagen PNG y un URI de datos PNG Base64, si lo desea.

SVG circo

Si cree que la animación de arranque es excelente, ahora puede crearla fácilmente con SVG SVG circoEstas herramientas le permiten Haz tu propia bota, spinner o algo similar con animaciones en bucleEstablecer actor, posición, tamaño, color, etc. desde el panel y exportar para obtener el resultado.

duende SVG

SVG Sprite es un nodo.js módulo optimizado un montón de archivos SVG, y hornearlos en sprite tipo SVG Incluye sprites CSS tradicionales, pilas SVG, etc. para imágenes de fondo y/o primer plano.

permite

usted puede Produce cuasicristal imagen como puede ver abajo. Este generador es experimental, pero los resultados son ciertamente excelentes. Puede probarlo cambiando el valor de la opción, luego use el botón "Guardar SVG" para descargar el resultado.

modelo sencillo

Crear plantillas con SVG Nunca ha sido más fácil o más divertido. Cargue su imagen, reduzca o cambie la distancia, gire y vuelva a pintar hasta obtener un patrón agradable. Puede obtener una vista previa del resultado antes de descargarlo.

Generador de triangulación

Crea hermosos patrones geométricos SVG y Generador de triangulaciónPuede configurar la aleatoriedad / variación de color, detalles y elegir qué paleta usar. Esta herramienta es una versión GUI triangulación.

Exportar PSD a SVG

Si usa Photoshop como editor de imágenes para el trabajo, es posible que a veces lo necesite Convierta diseños de espacios de trabajo de Photoshop a SVGque es un formato no admitido en Photoshop. Descargue el script en esta herramienta y cópielo en Adobe Photoshop/presets/scripts carpeta.

Cambie el nombre de la capa vectorial con la extensión SVG (por ejemplo, capa1 se convierte en capa1.svg), ahora puede cambios de Archivo> Script> PS a SVG.

filtro SVG

¿Sabía que con SVG puede agregar tono, saturación, desenfoque, superposiciones de colores lineales y más a sus imágenes? Visualice estos efectos y luego le daré un fragmento. hazlo facil efecto incorporado en tu proyecto

modelos SVG

modelos SVG es una biblioteca de JavaScript que le permite Convierta el icono SVG de una forma a otraPuede establecer el efecto de relieve, la duración de la animación de transición y la dirección de rotación.

generador de trayectoria de corte

SVG le permite hacer clic en imágenes con formas. Esto es fácil si la forma es cuadrada o redonda, pero ¿qué Si la forma es una forma con muchos puntos o un polígono• Aquí necesita esta herramienta para generar trayectorias de corte.

Chartist.js

Chartist.js es una biblioteca Cree gráficos personalizables con un alto grado de personalizaciónUtiliza SVG para mostrar gráficos y también se puede animar con SMIL. Con esta biblioteca, puede crear gráficos de líneas, circulares, de barras y otros tipos e incluso agregar dibujos animados darles.

Generador de trazos SVG

Esta es una herramienta sencilla. Generar líneas de puntos Usar SVG stroke-dasharrayComience seleccionando un tipo de guión de la lista, luego personalícelo según el ancho, la altura, la rotación o el color. Luego puede obtener el código HTML y CSS para aplicar esta línea de puntos a su proyecto.

Método de dibujo: editor SVG simple

Method Draw es un editor SVG basado en web con Interfaz intuitiva con herramientas en ambos lados del lienzoPuede dibujar líneas, formas, ingresar texto o usar formas integradas y luego editar las propiedades de los objetos dibujados. Exporte imágenes en formato SVG (también disponible en formato SVG base64) o guárdelas directamente como PNG.