Los gráficos vectoriales escalables (SVG) son un tipo único de formato de imagen. A diferencia de otras variaciones, los archivos SVG no se basan en píxeles únicos para crear las imágenes que ve. En su lugar, utilizan datos «vectoriales».
Cuando usa SVG, obtiene imágenes que se pueden escalar a cualquier resolución, lo cual es útil para el diseño web en muchos otros casos de uso. En este artículo, haremos la pregunta: ¿Qué es un archivo SVG? Luego te enseñaremos a usar el formato.
¡Sigamos adelante!
Suscríbete a nuestro canal de YouTube
¿Qué es un archivo SVG?
SVG es un gráfico basado en vectores. Para los no iniciados, un vector es un elemento de cierto tamaño y dirección. En teoría, puede generar casi cualquier tipo de gráfico utilizando una colección de vectores. Por ejemplo, considere esta imagen de un rectángulo azul con un borde negro y una sombra:
Este es otro tipo de archivo de imagen llamado Gráfico de red portátil (PNG) que se usa para ilustraciones y dibujos. Si quisieras replicar algo similar usando gráficos vectoriales, tendrías que generarlo usando XML (el mismo que se usa en los mapas de sitio). El siguiente código puede 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 a PNG, es decir, siempre que el navegador que esté usando admite archivos SVG. Si bien las dos imágenes se ven iguales, los archivos SVG ofrecen muchos beneficios que otros formatos no ofrecen. Por ejemplo, los archivos SVG pueden conservar la calidad de la imagen al aumentar o reducir la escala.
Si continúa ampliando el rectángulo PNG, notará que en algún momento su calidad comienza a disminuir. Con gráficos basados en píxeles más complejos, la degradación se hace evidente mucho más rápido. Sin embargo, los archivos 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 archivos SVG no son tan versátiles. Si intenta recrear una foto compleja con vectores, normalmente terminará con archivos SVG enormes e inútiles.
Sin embargo, el formato SVG es una opción fantástica para muchos otros escenarios:
- Diseño de logo. Dado que es probable que reutilice el logotipo en sitios web y redes sociales, el uso de SVG resuelve cualquier posible problema de escalabilidad.
- Esquemas. Los archivos SVG son perfectos para diagramas y cualquier otra ilustración que se apoye en líneas rectas.
- Elementos animados. Puede usar CSS para animar SVG, lo que lo convierte en un elemento útil en el diseño web, especialmente para microinteracciones.
- Gráficos y tablas. Puede usar SVG para crear tablas y gráficos escalables que admitan animación.
Dado que los archivos SVG utilizan el formato XML, se pueden buscar e indexar. Los lectores de pantalla pueden interpretar archivos SVG siempre que usar etiquetas de accesibilidad correctas.
Finalmente, los archivos SVG suelen ser mucho más pequeños que sus equivalentes de alta resolución en otros formatos. En papel, esto significa que puede reducir algunos tamaños de página y tiempos de carga. Sin embargo, si no planea convertir la mayoría de sus imágenes a SVG, es probable que la ganancia de rendimiento sea mínima.
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 el archivo SVG manualmente
La creación de un archivo SVG generalmente no requiere que ingrese información vectorial como lo hicimos antes. Era solo un ejemplo para mostrar el concepto. En su lugar, crea un 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 formatos SVG de forma inmediata. Algunas de las mejores opciones incluyen:
Las dos últimas opciones de esta lista son de código abierto. Esto los convierte en una excelente opción para experimentar con la creación de archivos SVG sin pagar por un software premium. De hecho, pueden ser todo lo que necesitas.
Si no tienes experiencia con el diseño gráfico, crear tu propio logo u otros elementos para tu sitio web será un verdadero desafío. En ese caso, es mejor tomar las imágenes existentes y convertirlas a SVG.
2. Convierte imágenes existentes a archivos SVG
Hay muchas herramientas gratuitas que puede usar para convertir imágenes de otros formatos a SVG. La mayoría del software que mencionamos en la última sección le permite abrir 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 son un monton de servicios a los que puede acudir. Un ejemplo es Magia vectorialque puede usar para convertir todo tipo de archivos a SVG:
Nos gusta esta herramienta en particular porque le muestra una vista previa de su archivo SVG antes de descargarlo. También puede usar el editor incorporado para realizar cambios y correcciones menores antes de descargar el archivo:
Por supuesto, esa es solo una opción. Otros servicios de conversión de PNG y JPG a SVG incluyen Conversióny 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 utilizado no es tan importante como las imágenes que elija.
En general, tiene sentido usar SVG solo para imágenes «directas», es decir, imágenes con marcos específicos y líneas limpias. Cuanto más compleja sea la imagen, más probable es que obtenga un archivo SVG enorme que es difícil de editar a mano o animar.
Cómo usar un archivo SVG (dentro y fuera de WordPress)
Los SVG no son difíciles de usar. Agregar un archivo SVG a su sitio web es tan simple como descargar su código y pegarlo en su documento HTML donde quiera colocar la imagen.
Si usted y los visitantes de su sitio usan navegadores compatibles con SVG (y la mayoría de ellos lo hacen en estos días), podrán ver el elemento. Obviamente, animar SVG es más difícil ya que requiere el uso de CSS.
Sin embargo, el proceso cambia si está utilizando WordPress. El sistema de administración de contenido (CMS) no admite archivos SVG listos para usar. Si desea habilitar la compatibilidad con SVG para que pueda cargar archivos directamente en su sitio web, use un complemento como SVG seguro:
También es posible habilitar manualmente SVG en WordPress, pero el proceso es mucho más complicado. En este caso, usar un complemento es la opción más segura.
Solicitud
Personalizar su sitio para usar archivos SVG es mucho más fácil de lo que puede imaginar. El verdadero desafío es diseñar SVG desde cero o elegir las imágenes adecuadas para convertir. Afortunadamente, hay muchas herramientas que puede usar para ambos.
Algunas excelentes opciones incluyen Ilustrador Adobe, InDesigny GIRO. Al usar estas herramientas, puede crear y convertir imágenes existentes en archivos SVG. Si está usando WordPress, puede cargar estos archivos SVG usando SVG seguro plugins, luego diviértete animándolos.
¿Tiene preguntas sobre el uso de archivos SVG? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen en miniatura del artículo de VectorsMarket / shutterstock.com
