¿Qué es y qué ventajas tiene el formato SVG?
Actualizado 02/09/2021
SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su uso online por su flexibilidad y por la capacidad de ofrecer gráficos con calidad.
El formato SVG es para muchos un total desconocido. Cuando queremos colocar algún gráfico en la web, en la mayoría de ocasiones optamos por JPG. En caso de necesitar transparencia o animación optamos por un PNG o GIF. Lo que muchos no saben es que se pueden usar archivos vectoriales para su uso en navegadores.
Vectorial
El SVG es vectorial, lo que supone tener todas las ventajas de cualquier formato vectorial. Es escalable, pesa poco y permite una definición mayor a tamaños reducidos, mucho mayor que los archivos bitmap. El formato es igual al que se utiliza con cualquier programa vectorial como Corel Draw o Adobe Illustrator.
El formato SVG es un formato vectorial abierto, estándar y basado en XML por lo que todo funciona en todos los navegadores y está aceptado por todos.
Standard abierto y compatible
Así como el formato Flash, que también era vectorial, propiedad de Macromedia, es decir de Adobe, el formato SVG es un formato abierto, estándar y basado en XML. Aunque las primeras versiones no se podían ver en los diferentes navegadores, hoy ya es un estándar que funciona sin problemas en todos los navegadores. SVG se convirtió en una recomendación del W3C en septiembre de 2001 con lo que en estos momentos ya es admitido por todos. A ser un formato basado en XML necesitamos cierto control de código para hacer que un archivo SVG funcione adecuadamente.
Tipografías
El formato SVG nos permite por un lado utilizar las tipografías con trazados pero también nos permite incluirlas dentro del propio archivo en formato TrueType y Tipo 1, lo que nos da una capacidad extraordinaria en cuanto a que los motores de búsqueda son capaces de indexarlo. Hay que tener en cuenta que para el texto puro colocado como tipografía tiene que ser o bien de las fuentes instaladas en el sistema o bien incluidas como estilo CSS.
Proyectos como Iconic también usan el formato SVG para hacer que una tipografía con iconos nos sirva para los diferentes usos y necesidades de tamaño y variación en función de las acciones que deseemos. Puedes ver ejemplos en su web con los que se entenderás realmente y en profundidad el verdadero uso del formato SVG.
INTERACTIVO
Los archivos SVG pesan poco, igual que lo haría un archivo vectorial. Soportan estilos CSS, con lo que si cambiamos el estilo en nuestra web también cambiará dentro del archivo. Este tipo de archivos puede incluir scripts que permiten caminos dinámicos. Puede admitir acciones como los rollovers o cambios al hacer click. Puedes ver un ejemplo en este enlace: http://codepen.io/chriscoyier/pen/evcBu
ICONOS RESPONSIVE
En la actualidad todas las webs están migrando al formato responsive, así que nos encontramos multitud de iconos que se redimensionan en función del ancho de la pantalla. Normalmente el funcionamiento suele ser sustituir un icono bitmap por otro más pequeño. Con SVG podemos utilizar el mismo y que se vaya reduciendo poco a poco, o bien que utilizar varios tamaños pero que todos ellos sean SVG con la ventaja de la mejor visualización al ser vectorial.
+ Artículos
Comentarios 24
Deja una respuesta
Función y emoción en la tipografía aplicada al diseño de packaging
Una aplicación fascinante de la tipografía es la que tiene lugar en el diseño de packagings. Dada la naturaleza preferentemente...
Leer
¡Muy buen post! Si uso Procreate para mis ilustraciones, ¿cómo puedo guardarlas en formato SVG?
Efectivamente, la gran ventaja de los formatos vectoriales es su escalabilidad, conocer el formato SVG y saber optimizar los archivos SVG generados desde software de diseño vectorial es imprescindible para realizar proyectos de diseño gráfico para entornos digitales y sitios web responsive. Así lo explicamos también en el libro Diseño Gráfico Digital .
Muy buen post. Es un formato un poco olvidado, pero funciona muy bien para iconos por ejemplo. Todos los que hacen diseño gráfico seguramente conocen las ventajas del svg. Para usuarios que no tienen tanta experiencia con el diseño gráfico y uso de vectores les sonará más formato png, que es lo primero que se suele usar para conseguir imágenes con fondo transparente.
Muy interesante. Sabía que era un formato de salida para guardar diagramas de flujo online pero no sabía todas las cualidades que había detrás del formato. Jugaré con él a ver si hago mis webs un poco mas responsive.
Explicado de manera muy concisa, me ayudaste para aprender algo nuevo :)
Muchas gracias.
Siempre se aprende algo nuevo, gracias por explicarlo tan simple!
Muy bien expuesto y resumido, mil gracias!
…De gran ayuda,gracias.
Justo lo que buscaba antes de comenzar a trabajar con una Web responsiva, me librara de preparar varios .PGN sin perder calidad y ahorrando mucho tiempo. ¡Saludos!
Gran post. Pena que no diga nada que .SVG es el formato nativo del software vectorial libre Inkscape, que cada vez usamos más gente.
Mil gracias, esa información es la que yo estaba buscando
Le veia muchas limitaciones al formato *.ico pero el svg al tener tantas opciones, lo hace complicado… Ahora mismo tengo una URL que supuestamente debe mostrar un SVG y no lo muestra… porque no se muestra este SVG ? F5 no sirve…
mmm, no me convence tu publicación.
Yo creo que esta muy claro. Trata de entenderlo mono pedro.
Buena data, mastersss
Que interesante!
Ah, pues no, y tiene muy buena pinta… gracias!
Pues hasta ahora no conocía el formato, casi casi que me habéis salvado la vida.
Y también (y para mí es lo mejor) pueden modificarse mediante javascript y hacer cosas maravillosas. D3js es un buen ejemplo de ello
Si, yo también diría que es una de sus grandísimas ventajas. No sé si conoces http://snapsvg.io/ pero si no, échale un ojo que creo que te gustará ;)
Que diferencia hay en usar icon fonts y los svg.