Archivos SVG

Contenido

• ¿Qué es un archivo SVG?
  
• Historia del archivo SVG
  
• Uso de los archivos SVG
  
• Pros y contras de los archivos SVG
  
• Abrir un archivo SVG
  
• Creación y edición de un archivo SVG
  
• Archivos SVG: preguntas frecuentes

¿Qué es un archivo SVG?

El Scalable Vector Graphics o SVG (gráficos vectoriales ampliables) es un formato de archivo vectorial apto para el sitio web. Al contrario de los archivos rasterizados basados en pixeles, 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 online complejos.

La gran popularidad de la que gozan los SVG entre los diseñadores sitio web 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.

Historia del archivo SVG

La historia del archivo SVG se remonta a finales de los años noventa, cuando World Wide Sitio web Consortium (W3C) invitó a los desarrolladores a presentar propuestas para un nuevo tipo de formato gráfico vectorial. Recibió seis propuestas y ayudó a dar forma a lo que más tarde se convirtió en el formato SVG de W3C.  

La popularidad del SVG tardó un tiempo en llegar. No recibió gran apoyo hasta 2017, cuando el público comenzó a descubrir los beneficios que ofrecía el uso de los archivos SVG en los navegadores sitio web modernos. En la actualidad, el archivo SVG es uno de los más empleados para las imágenes en 2D de los sitios web, ya que se puede manipular fácilmente en la mayoría de los navegadores y las aplicaciones de dibujo.

Uso de los archivos SVG

El formato Scalable Vector Graphics avanzó mucho en los últimos años, pero ¿para qué se usa en la práctica?

Logotipos e iconos de sitios web

Los diseñadores 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 ampliar y reducir sin perder calidad lo hace idóneo para los gráficos que deben colocar 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 otros archivos vectoriales

Pros y contras de los archivos SVG

Conviene saber cuáles son los beneficios y desventajas de los SVG antes de almacenar las imágenes en este formato de archivo.

Beneficios de los archivos SVG

• A diferencia de los archivos rasterizados, que están compuestos por pixeles, los vectoriales, como los SVG, siempre mantienen su resolución, independientemente de lo grandes o pequeños que se hagan. No tendrás que preocuparte de si las imágenes SVG perderán calidad en determinados navegadores o cuando las redimensiones para colocarlas en distintos sitios.
  
• Los archivos SVG básicos suelen ser más pequeños que las imágenes rasterizadas, que se componen de una gran cantidad de pixeles de color, en lugar de emplear algoritmos matemáticos.
  
• Como los archivos SVG tratan el texto como texto (y no como diseño), los lectores de pantalla pueden escanear cualquier palabra incluida en las imágenes SVG, lo que resulta especialmente útil para las personas que necesiten ayuda con la lectura de los sitios web. Los motores de búsqueda también pueden leer e indexar el texto de las imágenes SVG.

Desventajas de los archivos SVG

• Los archivos SVG funcionan muy bien con los gráficos sitio web, como logotipos, ilustraciones y diagramas. Sin embargo, dada su falta de pixeles, resulta complicado mostrar fotografías digitales de gran calidad con ellos. Los archivos JPEG suelen ser mejores para las fotografías con más detalle.
  
• Solo los navegadores modernos admiten imágenes SVG, por lo que puedes tener problemas a la hora de usar los archivos SVG en el Internet Explorer 8 y otros navegadores más antiguos.
  
• El código que incluyen las imágenes SVG puede ser difícil de entender si no se está familiarizado con este formato de archivo.

Abrir un archivo SVG

En la actualidad, puedes abrir un archivo SVG con todos los navegadores principales, desde Chrome y Edge, hasta Safari y Firefox, tanto si usas un equipo con Windows como un Mac. Tan solo tienes que iniciar el navegador, hacer clic en Archivo > Abrir y elegir el archivo que quieres ver, que se mostrará a continuación.

Abrir una imagen SVG con un programa integrado en tu computadora es igual de sencillo: haz doble clic en el nombre del archivo y se mostrará una lista de los programas con los que lo puedes abrir o se abrirá automáticamente en un programa compatible.

Creación y edición de un archivo SVG

Sigue estos pasos en Adobe Photoshop:

1. Cuando tengas tu imagen lista en Photoshop, haz clic en Archivo > Exportar > Exportar como.
   
2. En el cuadro de diálogo que aparece, haz clic en el menú desplegable Formato y selecciona SVG.
   
3. Selecciona Exportar todo y almacena el archivo.

Consejo: como Photoshop es un editor de gráficos rasterizados, muchas personas prefieren crear y editar archivos SVG en Adobe Illustrator, que es un editor de gráficos vectoriales.

Archivos SVG: preguntas frecuentes

¿Los archivos SVG se pueden animar?

El formato de archivo SVG no funciona solo con imágenes estáticas. Existe una amplia variedad de herramientas online con las que puedes agregar movimiento a tus gráficos sitio web. Las animaciones SVG pueden incluir elementos relativamente básicos, como una función de control deslizante para desplazar por las distintas diapositivas de una infografía. También se puede hacer que se muevan las ilustraciones, como las agujas de un reloj.

¿Cómo se identifica un archivo SVG?

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 de la computadora: una imagen vectorial mantendrá sus líneas depuradas y sus colores estables, en lugar de pixelar o poner borrosa.

¿Los archivos SVG solo pueden usar en el Internet?

Aunque las imágenes SVG se empleen principalmente en el sitio web, tienen otras muchas aplicaciones fuera del entorno online. Por ejemplo, como los archivos SVG no se distorsionan cuando se cambian sus dimensiones originales, se pueden emplear como plantillas para realizar impresiones textiles, como, por ejemplo, en camisetas. Un archivo JPEG, construido a partir de un montón de pixeles, no se trasferiría como la misma nitidez.

¿Qué tamaño tienen los archivos SVG?

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.

¿Cuál es la diferencia entre los archivos SVG y los archivos PNG?

En pocas palabras, los SVG son archivos vectoriales, mientras que los PNG son archivos rasterizados. Si amplias demasiado un PNG o si lo reduces mucho, se pone borroso y se pixela. En cambio, los SVG no contienen pixeles, por lo que nunca pierden resolución. Además, los archivos PNG no se pueden animar.