El Scalable Vector Graphics o SVG (gráficos vectoriales ampliables) es un formato de archivo vectorial apto para la web. Al contrario de los archivos rasterizados basados en píxeles, como los JPEG, los archivos vectoriales almacenan las imágenes mediante fórmulas matemáticas basadas en puntos y líneas en una cuadrícula. Por tanto, los archivos vectoriales como los SVG pueden redimensionarse considerablemente sin perder nada de calidad, lo que los hace perfectos para logotipos y gráficos en línea complejos.
La gran popularidad de la que gozan los SVG entre quienes diseñan webs no se debe solo a sus capacidades de redimensionamiento, sino también al hecho de que almacenan cualquier información de texto como texto literal, en lugar de formas, ya que se escriben en código XML. Esto permite a los motores de búsqueda como Google leer los gráficos SVG de las palabras claves, que pueden ayudar a un sitio web a mejorar su posición en los resultados de búsqueda.
Los archivos SVG se detectan fácilmente con su extensión .svg.
El formato Scalable Vector Graphics ha avanzado mucho en los últimos años, pero ¿para qué se usa en la práctica?
Logotipos e iconos de sitios web
Los equipos de diseño suelen emplear los SVG para presentar los iconos de los sitios web, como los botones, así como para los logotipos empresariales. La capacidad de este tipo de archivo de ampliarse y reducirse sin perder calidad lo hace idóneo para los gráficos que deben colocarse en varios sitios y en tamaños distintos.
Infografías e ilustraciones
Gracias al uso de XML en los archivos SVG, los motores de búsqueda como Google pueden leer los gráficos y diagramas que incluyen una gran cantidad de texto, lo cual puede ayudar a la optimización de los motores de búsqueda. Como Google puede detectar las palabras clave de los SVG, puede conseguir que un sitio web suba de posición en los resultados de búsqueda. Además, para que los sitios web sean más interesantes, los SVG se pueden animar.
Descubrir más archivos vectoriales
El formato de archivo SVG no funciona solo con imágenes estáticas. Existe una amplia variedad de herramientas en línea con las que puedes añadir movimiento a tus gráficos web. Las animaciones SVG pueden incluir elementos relativamente básicos, como una función de control deslizante para desplazarse por las distintas diapositivas de una infografía. También se puede hacer que se muevan las ilustraciones, como las agujas de un reloj.
La forma más sencilla de identificar un archivo SVG es mirando su código de extensión, que es .svg. También puedes identificar las imágenes vectoriales, como las SVG, aumentándolas a 200 % o más en la pantalla del ordenador: una imagen vectorial mantendrá sus líneas depuradas y sus colores sólidos, en lugar de pixelarse o ponerse borrosa.
Aunque las imágenes SVG se utilicen principalmente en la web, tienen otras muchas aplicaciones fuera del entorno en línea. Por ejemplo, como los archivos SVG no se distorsionan cuando se cambian sus dimensiones originales, se pueden emplear como plantillas para realizar impresiones textiles, por ejemplo, en camisetas. Un archivo JPEG formado por gran cantidad de píxeles no se trasferiría con la misma nitidez.
El tamaño de un archivo SVG depende de la cantidad de datos de imagen que contenga, pero suele ser menor que la mayoría del resto de los tipos de archivos. Los gráficos complejos con muchos trazados y puntos de anclaje ocuparán más espacio de almacenamiento que los diseños más simples y depurados, por lo que trata de minimizar el número de instrucciones complejas que contenga tu archivo.
En pocas palabras, los SVG son archivos vectoriales, mientras que los PNG son archivos rasterizados. Si amplías demasiado un PNG o si lo reduces mucho, se pone borroso y se pixela. En cambio, los SVG no contienen píxeles, por lo que nunca pierden resolución. Además, los archivos PNG no se pueden animar.
