Programas y servicios para crear, editar y convertir imágenes SVG

Después de comprobar los beneficios de usar imágenes SVG en las páginas del sitio, cuando se trata de iconos, logos y pequeños gráficos, nos hemos dado a la tarea de crear y convertir varias imágenes a ese formato.
Compartimos en este artículo como lo hacemos, los programas y servicios que hemos probado y empleado y cuales aconsejamos.

Ventajas de usar imágenes SVG en los sitios web

Como explicamos detalladamente en otro artículo, las imágenes SVG son la mejor opción para mostrar en las páginas web imágenes y figuras sencillas, como son los iconos, logotipos o figuras de poca complejidad.
Son objetos gráficos vectoriales que el navegador escribe y representa a partir de un código, por lo que no es necesario hacer referencia a archivos externos.
El código para representar estas imágenes no recarga la página cuando se trata de objetos sencillos, como se puede comprobar en la imagen de portada de este artículo.
Esta imagen en formato SVG mide 6 KB y la correspondiente en formato PNG 32 KB, la diferencia es de casi 6 veces.
Todos los navegadores modernos son compatibles con el formato SVG, por lo que podemos emplear estas imágenes y de esa forma aprovechar sus ventajas.
Las principales son dos: mantienen siempre la calidad y aceleran el tiempo de carga de las páginas web al no depender de archivos externos.
En este punto solo nos resta saber cómo crearlas y editarlas, que es el objetivo de este modesto artículo.

Los mejores programas para editar imágenes SVG

Para crear, editar y convertir otros formatos de imágenes a SVG, podemos usar programas, aplicaciones o servicios en la red.
Existen para la computadora programas muy completos y otros sencillos, dependiendo del propósito de cada persona.
Los más populares son los siguientes:

Adobe Ilustrator

Adobe Ilustrator, es un completo y complejo editor gráfico de imágenes vectoriales, en el que se pueden crear imágenes en formato SVG.
Ha alcanzado una gran fama, debido a las composiciones creadas por artistas gráficos digitales usando esta herramienta, que es muy profesional.
Lamentablemente es un programa de pago.
Puede resultar un programa muy complejo para los que buscan crear gráficos sencillos.

InkScape

InkScape es una herramienta de código abierto y gratis.
Se puede emplear para dibujar y crear imágenes vectoriales en la computadora.
Con esta aplicación podemos crear conjuntos impresionantes de forma fácil, más fácil aun si poseemos una Laptop con pantalla táctil.

Incluye diversas herramientas que facilitan la creación de imágenes vectoriales.
Muy útil es un tutorial básico (en español) incluido en el programa, al que se puede acceder desde el menú Ayuda, que nos introduce en el mundo vectorial.
Inkscape se puede descargar gratis en español desde http://www.inkscape.org/, también existen versiones portables que funcionan desde el USB.

SVG-Edit

SVG-Edit es un editor de imágenes SVG que se puede probar online y de quedar satisfecho descargar los archivos de la aplicación, para usarlo en la computadora.
Es una aplicación web de código abierto que funciona usando el navegador ya sea desde internet o en el equipo de forma local.
Está disponible para descargar en Github.
Después de descargar el paquete de la aplicación descomprímelo y abre con el navegador el archivo "svg-editor.html" que se encuentra dentro de la carpeta "editor".

El uso del programa es bastante sencillo.
De forma similar a Inkscape incluye herramientas para dibujar, crear formas básicas, rellenar, insertar texto y otras acciones.
Los objetos se van adicionando en capas diferentes.
Incluye una librería con varias formas, para temas y objetivos diferentes .
La imagen resultante se guarda en formato SVG o se puede exportar en otros formatos gráficos.
La aplicación está disponible en español.
Con SVG-Edit creamos la imagen de portada de este articulo y también el logo de nuestro sitio web.

Otros editores de imágenes vectoriales

Otros programas famosos para la creación y edición de imágenes vectoriales son: Sketch (solo disponible para el sistema operativo MacOS), Freehand, CorelDraw y Xara X.

Minimizar y comprimir y optimizar las imágenes SVG

Las imágenes SVG al consistir en archivos de texto plano con código, se pueden minimizar y comprimir, de la misma forma que los archivos CSS o JavaScript.
Los editores de imágenes SVG siempre agregan código adicional y etiquetas, que son usadas para identificar elementos y editar estas imágenes.
Si vamos a usar las imágenes "inline", es decir impregnando su código en el HTML de las páginas y no referenciándolas del modo tradicional, necesitamos eliminar el código innecesario, porque además de ocupar espacio de forma innecesaria, puede hacer que las paginas no validen correctamente.
Para eso solo es necesario eliminar las etiquetas innecesarias y los saltos de líneas.
Esto anterior es lo que se conoce como optimizar las imágenes SVG.
Podemos hacerlo manualmente usando un editor o con uno de los servicios disponibles en internet.
Algunas de las etiquetas que se pueden eliminar son las siguientes:
En el siguiente enlace se puede descargar un archivo que contiene dos imágenes SVG de ejemplo.
La primera de ellas fue creada y guardada con el programa InkScape, la segunda la misma imagen después de optimizarla y eliminar el código innecesario, también se le adicionó un visor (viewBox).

Se puede comprobar que el navegador representa las dos de forma idéntica, pero la diferencia en el código es evidente.
Se pueden descargar y guardar las imágenes anteriores y comparar la gran diferencia en el código de ambas.

Servicios de internet para comprimir y minimizar SVG

Existen varios servicios para esta tarea.
He usado los dos siguientes que recomiendo:
https://vecta.io/nano
https://www.svgminify.com/es.html

Convertir imágenes al formato SVG

Convertir imágenes en formato de mapa de bits a SVG es posible, pero generalmente no es factible.
Solo da resultado con imágenes PNG con transparencia y que sean bien sencillas.
De lo contrario la calidad es pésima y el tamaño excesivo.
Se debe tener en cuenta que la imagen correspondiente en formato SVG a una PNG, siempre debe ser menor de un 10% de su tamaño original.

Programas o servicios para convertir imágenes PNG a SVG

Al hacer una búsqueda en Google de servicios para convertir imágenes a SVG, nos encontramos con varios de ellos, que solo convierten las imágenes al formato base 64.
Base 64 no es una imagen SVG.
Podemos identificarla abriéndola con un editor o con el Blog de notas y comprobando que el código comienza con el siguiente formato:

data:;base64,RXN0YSBlcyBs

Lee más información: Como usar e insertar imágenes codificadas en base 64
Solo algunos de estos servicios realizan la conversión correctamente, con la mayoría el resultado es pésimo.
Desgraciadamente la gran mayoría exige procesos de registro que todos tratamos de evitar, para prevenir el acoso a nuestra dirección de correo electrónico.
Hemos probado los siguientes servicios de internet que son gratuitos y no requieren de registro alguno.

Potrace

Potrace es una excelente herramienta gratis para convertir imágenes de mapa de bits a vectoriales, que funciona mediante la línea de comandos offline.
Lamentablemente el resultado es solo en blanco y negro y solo admite imágenes de entrada en formatos PBM, PGM, PPM o BMP.
Incluye la utilidad mkbitmap que se puede emplear para filtrar las imágenes antes de convertirlas finalmente.
Es muy práctico para vectorizar imágenes escaneadas de dibujos o ilustraciones.
http://potrace.sourceforge.net/

Image2svg

Servicio para convertir imágenes al formato SVG, subiéndolas desde nuestro equipo.
Se puede copiar el código resultante o descargar la imagen creada.
Image2svg

PickSVG

PickSVG es otro convertidor gratis online sin registro, con buenos resultados.
https://picsvg.com/

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales