Graficos SVG ó imágenes vectoriales
1- La principal ventaja de las imágenes vectoriales es que siempre mantienen la calidad y nitidez a cualquier resolución.
Las imágenes tradicionales que usan los formatos JPG, PNG, BMP, GIF y otros similares, son imágenes en mapa de bits, matriciales o rasterizadas.
Están formadas por una serie de pixeles o puntos coloreados y al redimensionarlas o aumentar el zoom se pixelizan y pierden calidad.
Las imágenes vectoriales contienen las instrucciones para el navegador o programa de visualización de cómo crear la imagen.
Es por eso que al aumentar el zoom siguen mostrándose nítidamente a cualquier resolución.
Se puede comprobar lo anterior con la siguiente imagen.
Es un logotipo de muestra creado en formato SVG usando InkScape. Mide 800 x 500 pixeles y solo 3 KB.
Da un clic encima de ella para abrirla en una nueva pestaña y entonces aumenta el zoom del navegador usando al mismo tiempo la teclas Control y + o – del teclado numérico.
2- Otra de las ventajas de las imágenes vectoriales es su pequeño tamaño, que permite aumentar la velocidad de carga de las páginas, sin prescindir de elementos gráficos o poder emplear mayor cantidad de ellos.
3- Las imágenes son construidas por el navegador, lo que disminuye la carga y consumo de recursos en el servidor web.
4- Se pueden crear imágenes SVG animadas.
Como crear las imágenes vectoriales SVG
Las imágenes SVG se pueden crear de dos formas:
También es posible convertir otras imágenes vectoriales como las que usan el formato WMF al formato SVG.
Otra opción es convertir imágenes tradicionales de mapa de bits al formato SVG.
2- Cuando se trata de elementos sencillos, podemos crear las imágenes impregnando en la página web el código necesario para representarlas. Algunos ejemplos se muestran más abajo.
Para eso los más entusiastas pueden introducir el código directamente o copiar y pegar el código de una imagen existente creada mediante software.
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/