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

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...

Interactive SVG Coordinate System

Cuando trabajas con SVG no puedes olvidar las coordenadas. Esta es una gran herramienta interactiva creada por Sara Souiden, para ayudarte a aprender cómo SVG coordina el trabajo. Utilizando el viewBox y el preserveAspectRatio en SVG, guiados por líneas de color naranja y morado y una regla muy apañada, se puede jugar mientras aprendes cómo funcionan las coordenadas SVG.

b64

b64 es una sencilla herramienta para optimizar imágenes y, a continuación, convertirlas en formato base64. Puedes subir tus imágenes SVG (otros formatos como JPG y PNG funcionan también) para luego poder copiar el CSS resultante para establecer la imagen subida en base64 como background-image.

SVGO

Los SVG pueden contener información innecesaria que puede ser eliminada sin afectar el resultado de renderizado. Si deseas eliminar los metadatos del editor, comentarios o elementos ocultos, puede utilizar SVGO. Puedes instalar SVGO vía npm, $ [sudo] npm install -g svgo o utilizar la versión de interfaz gráfica de usuario que te proporciona la función de drag&drop para procesar la optimización del 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 utilizar. Sólo alterna los botones para activar o desactivar cada función. Al final se puedes descargarte el resultado como un archivo de imagen y si lo prefieres, en código también.

SVG Now

Cuando trabajas en Illustrator, el SVG exportado contiene información que no es necesaria. Con esta herramienta podrás obtener la versión optimizada de los SVG exportados directamente desde tu área de trabajo en Illustrator. Esta herramienta añade un panel con algunas opciones para optimizar SVG. Puedes obtener SVG Now desde la página de complementos Creative Cloud.

SVG to PNG Converter

¿Quieres exportar archivos SVG a archivos PNG sin abrir aplicaciones como Illustrator para hacerlo? Utiliza esta herramienta llamada SVG to PNG Converter para obtener salidas de imagen en formato PNG y también PNG data URI Base64 si así lo necesitas.

SVG Circus

Si crees que las animaciones de carga son divertidas, ahora las puedes crear fácilmente mediante la utilización de SVG con SVG Circus. Las herramientas te permiten crear tu propio cargador, loader, spinner, o algo similar utilizando un bucle de animación. Ajusta el 'actor', la posición, el tamaño, el color y otras propiedades desde el panel y, a continuación, expórtalo para obtener los resultados deseados.

SVG Sprite

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

Quasi

Con Quasi puedes generar imágenes de cuasicristales parecidas a lo que aparece a continuación. Este generador es experimental, pero los resultados son definitivamente molones. Puedes jugar cambiando el valor de las opciones. Una vez hecho los experimentos de rigor, puedes descargar los resultados con el botón "Save SVG".

Plain Pattern

Crear patrones con SVG nunca había sido tan fácil y divertido. Sube tu imagen, recórtala o cambia el espaciado, rótala y cámbiale el color hasta que obtengas un patrón increíblemente hermoso. Puedes previsualizar el resultado antes de descargarlo.

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
ARTÍCULO ANTERIOR