¿Qué es un archivo SVG (y cómo se usa)?

Un gráfico vectorial escalable (SVG) es un tipo único de formato de imagen. A diferencia de otras variedades, los SVG no se basan en píxeles únicos para crear las imágenes que ve. En su lugar, utilizan datos "vectoriales".

Al usar SVG, obtiene imágenes que pueden escalar a cualquier resolución, lo que resulta útil para el diseño web, entre muchos otros casos de uso. En este artículo, haremos la pregunta: ¿Qué es un archivo SVG? Luego, le enseñaremos cómo usar el formato.

¡Hagámoslo!

Suscríbete a nuestro canal de Youtube

¿Qué es un archivo SVG?

Los SVG son gráficos creados con vectores. Para los no iniciados, un vector es un elemento con una magnitud y dirección específicas. En teoría, puede generar casi cualquier tipo de gráfico que desee utilizando una colección de vectores. Tome esta imagen de un rectángulo azul con un borde negro y una sombra, por ejemplo:

Este es otro tipo de archivo de imagen llamado Gráfico de red portátil (PNG), que se utiliza para ilustraciones y dibujos. Si quisiera replicar algo similar usando gráficos vectoriales, necesitaría generarlo con código XML (el mismo que se encuentra en uso para mapas de sitio). El siguiente código podría lograr el mismo resultado:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

En teoría, si toma este código y lo coloca en un archivo HTML, verá un conjunto de rectángulos similar al PNG, es decir, siempre que el navegador que use admita archivos SVG. Aunque ambas imágenes tienen el mismo aspecto, los archivos SVG ofrecen una gran cantidad de beneficios que otros formatos no ofrecen. Por ejemplo, los SVG son capaces de conservar la calidad de la imagen a medida que aumentan o disminuyen la escala.

Si sigue haciendo zoom en el rectángulo PNG, notará que su calidad comienza a disminuir en algún momento. Con gráficos basados ​​en píxeles más complejos, la degradación se hace evidente mucho más rápido. Sin embargo, los SVG se ven bien en prácticamente cualquier resolución.

¿Por qué utilizar un archivo SVG?

Muchos sitios web utilizan formatos como PNG y JPEG casi indistintamente. Sin embargo, los SVG no son tan versátiles. Si intenta recrear una fotografía compleja utilizando vectores, generalmente terminará con archivos SVG masivos e inutilizables.

Sin embargo, el formato SVG es una opción fantástica para un conjunto completo de otros escenarios:

• Diseño de logo. Dado que probablemente reutilizará logotipos en sitios web y redes sociales, el uso de SVG resuelve cualquier problema potencial de escalabilidad.
• Diagramas. Los SVG son una combinación perfecta para diagramas y cualquier otro tipo de ilustración que se base en líneas simples.
• Elementos animados. Puede utilizar CSS para animar SVG, lo que los convierte en un componente útil en el diseño de sitios web, especialmente para las microinteracciones.
• Cuadros y gráficos. Puede utilizar SVG para crear gráficos escalables y tablas que admitan animaciones.

Dado que los SVG utilizan el formato XML, esto también hace que se puedan buscar e indexar. Los lectores de pantalla pueden interpretar archivos SVG siempre que utilice las etiquetas de accesibilidad correctas.

Finalmente, los archivos SVG tienden a ser mucho más pequeños que los equivalentes de alta resolución en otros formatos. En papel, esto significa que puede reducir algunos de los tamaños de página y reducir los tiempos de carga. Sin embargo, a menos que planee convertir la mayoría de sus imágenes a SVG, el aumento de rendimiento probablemente será mínimo.

Cómo crear un archivo SVG (2 formas)

Hay dos enfoques que puede tomar cuando se trata de archivos SVG. Puede crearlos desde cero o tomar una imagen existente y convertirla. Comencemos con el método manual.

1. Cree un archivo SVG manualmente

La creación de un archivo SVG generalmente no implica que escriba información vectorial como lo hicimos anteriormente. Eso fue solo un ejemplo para mostrar el concepto. En su lugar, crea SVG como cualquier otro gráfico, utilizando un programa de diseño y guardando el archivo como SVG. Muchas herramientas modernas de diseño gráfico admiten SVG listas para usar. Algunas opciones principales incluyen:

• Adobe Illustrator, Photoshop, Animate e InDesign
• Microsoft Visio
• Inkscape
• CAÑUTILLO

Las dos últimas opciones de esta lista son soluciones de código abierto. Esto los convierte en una excelente opción para experimentar con la creación de SVG sin pagar por software premium. De hecho, pueden ser todo lo que necesita.

Si no tiene ninguna experiencia con el diseño gráfico, crear sus propios logotipos u otros elementos para su sitio web será un desafío. En este caso, su mejor opción será tomar imágenes existentes y convertirlas en SVG.

2. Convertir imágenes existentes en SVG

Hay muchas herramientas gratuitas que puede utilizar para convertir imágenes de otros formatos a SVG. La mayor parte del software que mencionamos en la última sección le permite abrir sus imágenes y guardarlas como archivos SVG.

Si no desea descargar ningún software, también puede usar herramientas de conversión en línea, y hay muchos servicios a los que puede recurrir. Un ejemplo es Vector Magic, que puede utilizar para convertir todo tipo de tipos de archivo en SVG:

Nos gusta esta herramienta en particular porque le muestra una vista previa de su archivo SVG antes de descargarlo. También puede utilizar un editor integrado para realizar pequeños cambios y correcciones antes de descargar el archivo:

Por supuesto, esta es solo una opción. Otros servicios de conversión de PNG y JPG a SVG incluyen Convertio e Img2Go. Querrá investigar un poco para encontrar la solución más adecuada para sus necesidades.

En nuestra experiencia, la mayoría de los convertidores SVG ofrecen resultados de calidad similar. Para obtener los mejores resultados posibles, el convertidor que utilice no importa tanto como las imágenes que seleccione.

Como regla general, solo tiene sentido usar el formato SVG para imágenes 'simples', es decir, imágenes con bordes definidos y líneas limpias. Cuanto más compleja sea la imagen, más probable será que termine con un archivo SVG masivo que es una tarea difícil de editar manualmente o animar.

Cómo usar un archivo SVG (dentro y fuera de WordPress)

Los SVG no son tan difíciles de usar. Agregar un archivo SVG a su sitio web es tan fácil como tomar su código y pegarlo dentro de un documento HTML donde quiera que vaya la imagen.

Si usted y los visitantes de su sitio utilizan navegadores que admiten archivos SVG (y la mayoría lo hace en estos días), podrán ver el elemento. La animación de SVG es, por supuesto, más complicada, ya que requiere el uso de CSS.

Sin embargo, el proceso cambia si estás usando WordPress. El sistema de gestión de contenido (CMS) no admite SVG de fábrica. Si desea habilitar la compatibilidad con SVG para poder cargar archivos directamente en su sitio web, querrá usar un complemento como Safe SVG:

También es posible habilitar el soporte SVG en WordPress manualmente, pero el proceso es mucho más complicado. En este caso, usar un complemento es la opción más segura.

Conclusión

Adaptar su sitio web para usar archivos SVG es mucho más fácil de lo que imagina. El verdadero desafío radica en diseñar archivos SVG desde cero o elegir las imágenes adecuadas para convertirlas al formato. Afortunadamente, hay muchas herramientas que puede utilizar para hacer ambas cosas.

Algunas excelentes opciones incluyen Adobe Illustrator, InDesign y GIMP. Con esas herramientas, puede crear y convertir imágenes existentes en SVG. Si está utilizando WordPress, puede cargar esos SVG con el complemento Safe SVG y luego divertirse animándolos.

¿Tiene alguna pregunta sobre cómo utilizar archivos SVG? ¡Hablemos de ellos en la sección de comentarios a continuación!

Miniatura de la imagen del artículo de vectorsMarket / shutterstock.com