Archivos SVG
El formato de archivo SVG es una herramienta que se utiliza habitualmente para mostrar gráficos, diagramas e ilustraciones bidimensionales en los sitios web. Además, al ser un archivo vectorial, se puede ampliar y reducir sin perder resolución. Obtén más información sobre las principales características de las imágenes SVG, sus pros y contras, y la forma en que este formato ha evolucionado.
¿Qué es un archivo SVG?
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 online 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 clave, 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 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 las ventajas que ofrecía el uso de los archivos SVG en los navegadores web modernos. En la actualidad, el archivo SVG es uno de los más utilizados 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.
Pros y contras de los archivos SVG
Conviene saber cuáles son las ventajas y desventajas de los SVG antes de guardar las imágenes en este formato de archivo.
Ventajas de los archivos SVG
- A diferencia de los archivos rasterizados, que están compuestos por píxeles, 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 píxeles de color, en lugar de utilizar 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 las páginas 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 web, como logotipos, ilustraciones y diagramas. Sin embargo, dada su falta de píxeles, 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 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 conoce bien 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 abrir tu navegador y hacer clic en Archivo
Abrir para elegir el archivo que quieras ver, que se mostrará a continuación.
Abrir una imagen SVG con un programa integrado en tu ordenador 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:
- Cuando tengas tu imagen lista en Photoshop, haz clic en Archivo > Exportar > Exportar como.
- En el cuadro de diálogo que aparece, haz clic en el menú desplegable Formato y selecciona SVG.
- Selecciona Exportar todo y guarda 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
¿Qué es un archivo SVG?
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 online 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.
Uso de los archivos 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 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 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.
¿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 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.
¿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 del ordenador: una imagen vectorial mantendrá sus líneas depuradas y sus colores sólidos, en lugar de pixelarse o ponerse borrosa.
¿Los archivos SVG solo pueden usarse en Internet?
Aunque las imágenes SVG se utilicen principalmente en la 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 píxeles, 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 píxeles, por lo que nunca pierden resolución. Además, los archivos PNG no se pueden animar.
Descubre por qué los archivos JPEG se diseñan con las fotografías digitales complejas en mente.
Archivos HEIC
Conoce este nuevo tipo de archivo rasterizado que se utiliza en Apple.
Descubre este formato vectorial ampliamente utilizado desarrollado por Adobe Illustrator.
Comparación de los SVG con otros tipos de archivos
título
Archivos SVG
cardImageAltText
Imagen OG de SVG
cardImage
primaryTag
caas:content-type/article
Tags
caas:content-type/article,caas:products/indesign,caas:products/illustrator,caas:product-categories/photo