20 útiles herramientas SVG para mejores gráficos
SVG está ganando popularidad en el diseño web en estos días y puedes 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 claros..
Aquí el 20 herramientas que puede utilizar para trabajar con SVG de forma rápida y eficiente. Tenemos en su mayoría herramientas en línea, que pueden ayudar en la optimización, conversión, creación de patrones y más.
Sistema de coordenadas SVG interactivo
Cuando trabajas con SVG no puedes dejar su coordenada. Esta es una gran herramienta interactiva de Sara Souiden, para ayudarte aprender cómo funcionan las coordenadas SVG. Utilizando la viewBox y preservar la relación de aspecto en SVG, guiado por líneas naranjas y púrpuras y una regla práctica, puedes jugar mientras aprendes cómo funcionan las coordenadas SVG.
b64
b64 es una herramienta simple para Optimiza las imágenes y luego las convierte en el formato base64.. Puedes soltar tus imágenes SVG (también funcionan otros formatos como JPG y PNG) y luego tomar el CSS con la imagen de fondo base64 como resultado.
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 del editor, comentarios o elementos ocultos., puedes usar SVGO.
Puede instalar SVGO a través de npm, $ [sudo] npm install -g svgo o use la versión de GUI que ofrece arrastrar y soltar para procesar su optimización SVG.
SVG OMG
SVG OMG convierte la línea de comando de SVGO (la herramienta anterior) en una Versión GUI Que más intuitivo y fácil de usar. Sólo alternar los botones para activar o desactivar cada función. Al final, puede tomar el resultado como archivos de imagen y código también.
SVG ahora
Cuando trabajas en Illustrator, el SVG exportado contiene cierta información que no es necesaria. Con esta herramienta podrás Obtén la versión optimizada de tu SVG exportado directamente desde su espacio de trabajo de Illustrator. Esta herramienta agrega un panel con algunas opciones para optimizar SVG. Puede obtener SVG ahora desde la página de complementos de Creative Cloud.
Convertidor SVG a PNG
Querer exportar archivos SVG a PNG? ¿Sin abrir aplicaciones como Illustrator para hacerlo? Use 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 Circus
Si crees que las animaciones del cargador son geniales, ahora puedes crearlas fácilmente utilizando SVG con SVG Circus. Las herramientas le permiten Haz tu propio cargador, spinner o algo similar usando animación en bucle. Configure el 'Actor', la posición, el tamaño, el color y otros en el panel, luego exporte para obtener los resultados.
SVG Sprite
SVG Sprite es un módulo Node.js, que optimiza un montón de archivos SVG, y los hornea en tipos de sprites SVG Incluye sprites CSS tradicionales para imágenes de fondo y / o primer plano, pilas SVG y más.
Cuasi
Con cuasi puedes generar imágenes de cuasicristal como lo que ves abajo. Este generador es experimental, pero los resultados son definitivamente geniales. Puede jugar cambiando el valor de las opciones, luego descargue los resultados con el botón 'Guardar SVG'.
Patrón liso
Creando patrones con SVG Nunca ha sido más fácil ni más divertido. Suba su imagen, reduzca la escala o cambie el espaciado, gire y vuelva a colorear hasta obtener un patrón hermoso. Puedes previsualizar el resultado antes de descargarlo..
Trianglify Generator
Crea hermosos diseños geométricos SVG con Trianglify Generator. Puede establecer la aleatoriedad / variante de color, el tamaño de la granularidad y elegir una paleta de colores con la que trabajar. Esta herramienta es una versión GUI de Trianglify.
Gradiente de SVG
Sabes que puedes hacer gradientes con CSS pero ¿sabías que puedes hacer lo mismo con SVG? La forma más fácil de generar gradiente en SVG es mediante el uso de esta herramienta. Simplemente ingrese el color de inicio y final, luego obtendrá el código para el resultado generado. También se incluye un respaldo en CSS.
Exportar PSD a SVG
Si utiliza Photoshop como editor de imágenes para su trabajo, a veces es posible que necesite Convierte tu diseño en el espacio de trabajo de Photoshop en SVG, que es un formato no compatible en Photoshop. Descargue el script a esta herramienta, luego cópielo a la Adobe Photoshop / presets / scripts carpeta.
Cambie el nombre de una 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 matiz, saturación, desenfoque, superposición de color lineal y muchos otros a las imágenes? Aquí hay una herramienta que visualiza estos efectos, 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 te permite transformar un icono SVG de una forma a otra. Puede configurar el efecto de suavizado, la duración de las animaciones de transición y también la dirección de rotación.
Clip de generador de ruta
SVG te 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 necesitas esta herramienta de Clip Path Generator.
Chartist.js
Chartist.js es una biblioteca para crear gráficos de respuesta altamente personalizables. Utiliza SVG para mostrar los gráficos, que también se pueden animar utilizando 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 animaciones..
Generador de trazo SVG
Esta es una herramienta simple para generar líneas discontinuas utilizando SVG trazo de trazo. Primero elija un tipo de guión de la lista, luego personalícelo en términos de ancho, altura, rotación o color. Luego, puede tomar el código HTML y CSS para aplicar esta línea de guión en su proyecto.
Método de dibujo: un simple editor SVG
El método Draw es un editor SVG basado en la web, con un Interfaz intuitiva que viene con herramientas en ambos lados del lienzo.. Puede dibujar líneas, formas, ingresar texto o usar formas integradas, y luego editar las propiedades de los objetos dibujados. Exportar la imagen en formato SVG (también viene en formato SVG base64) o guardar directamente en PNG.
Exportar Flash a SVG animado
Aunque ya no es muy popular, existe la posibilidad de que algunos de ustedes tengan dificultades para abandonar Flash. Si es así, puedes convierte tu animación flash en SVG para que funcione 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ásicas, interpolaciones de formas (para otros, existe un éxito discutible).
