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

¿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 usa para los mapas de sitio). El siguiente código podría lograr el mismo resultado:

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 se ven iguales, 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 se amplían o reducen.

Si continúa haciendo zoom en el rectángulo PNG, notará que su calidad comienza a degradarse 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é usar un archivo SVG?

Muchos sitios web usan formatos como PNG y JPEG casi indistintamente. Sin embargo, los SVG no son tan versátiles. Si intenta recrear una fotografía compleja usando vectores, por lo general 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 posible problema 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 usar CSS para animar SVG , lo que los convierte en un componente útil en el diseño de sitios web, particularmente para microinteracciones.
• Tablas y gráficos.  Puede usar SVG para crear gráficos y tablas escalables que admitan animaciones.

Dado que los SVG utilizan el formato XML, esto también permite que se puedan buscar e indexar. Los lectores de pantalla pueden interpretar los 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. Sobre el papel, esto significa que es posible que pueda reducir algunos de los tamaños de página y disminuir 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. Crear 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 son compatibles con los archivos SVG listos para usar. Algunas de las mejores opciones incluyen:

• Adobe Illustrator , Photoshop , Animate e InDesign
• Visio de Microsoft
• paisaje de tinta
• 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 un software premium. De hecho, pueden ser todo lo que necesita.

Si no tiene 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 apuesta será tomar imágenes existentes y convertirlas en SVG.

2. Convierta imágenes existentes en SVG

Hay muchas herramientas gratuitas que puede usar 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 usar para convertir todo tipo de archivos 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 . Deberá investigar un poco para encontrar la solución más adecuada para sus necesidades.

Según 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 es que termine con un archivo SVG masivo que es una tarea ardua para 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 usan navegadores que admiten archivos SVG (y la mayoría lo hace en estos días ), podrán ver el elemento. Animar SVG es, por supuesto, más complicado 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 es compatible con archivos SVG listos para usar. 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 manualmente la compatibilidad con SVG en WordPress , 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 SVG desde cero o elegir las imágenes adecuadas para convertir al formato. Afortunadamente, hay muchas herramientas que puede usar 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 usa WordPress, puede cargar esos SVG con el complemento Safe SVG y luego divertirse animándolos .

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

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