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 los sitios 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 su 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 sitios 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

En 1994, Martijn Koster, ingeniero de software holandés, propuso por primera vez el formato de 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 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.

Pros y contras de los archivos SVG

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

Ventajas 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.
• Los archivos SVG son compatibles con interactividad mediante lenguajes de programación como JavaScript, lo que permite gráficos dinámicos y atractivos.
• Además, los archivos SVG emplean un lenguaje XML, por lo que pueden manipularse e integrarse fácilmente con otras tecnologías web.

Desventajas de los archivos SVG

• Los archivos SVG funcionan muy bien con los gráficos de los sitios 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 detalles.
• Solo los navegadores modernos admiten imágenes SVG, lo que puede suponer 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 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. Solo abre tu navegador y haz clic en Archivo.

Elige el archivo que quieras ver y, a continuación, se mostrará en tu navegador.

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 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.

Creación de un archivo SVG en Illustrator

Sigue estos pasos en Adobe Illustrator:

1. Cuando tengas tu ilustración lista en Illustrator, selecciona el texto para crear contornos. Esto ayudará a evitar problemas de sustitución de la fuente al visualizar la ilustración en otras computadoras. Selecciona Texto > Crear contornos.
2. Guarda el archivo. Selecciona Archivo > Guardar como. En el cuadro de diálogo que aparece, haz clic en el menú desplegable Formato y selecciona SVG.
3. También puedes exportar el SVG editado desde Archivo > Exportar > Exportar como y seleccionar el formato SVG. Esto te permite establecer los ajustes de exportación, como la precisión y la compatibilidad.

Edición de un archivo SVG en Illustrator

1. Selecciona el archivo SVG y ábrelo en Illustrator. También puedes importar el archivo SVG a un documento que ya tengas en Illustrator desde Archivo > Colocar.
2. Usa la herramienta Selección (o Selección directa) para seleccionar formas y trazados individuales, o grupales, de los archivos SVG. Puedes redimensionar, modelar, transformar o editar trazados, además de añadir color y efectos.