Guía
¿Qué es un archivo SVG?
SVG son las siglas de Scalable Vector Graphics, gráficos vectoriales escalables. Un archivo SVG describe una imagen con formas y coordenadas en lugar de píxeles, así que se ve nítido a cualquier tamaño.
Qué es SVG y cómo funciona un archivo SVG
Un SVG es un archivo de texto escrito en XML. En lugar de guardar el color de cada píxel, guarda instrucciones: dibuja un círculo aquí, un trazado que pasa por estos puntos, rellénalo con este color. Tu navegador o tu editor lee esas instrucciones y dibuja la imagen al tamaño en que se muestre.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Ese fragmento es un SVG completo: un círculo verde lima en un área de 100 por 100 unidades. Como es texto, un SVG se puede abrir en un editor de código, buscar dentro de él, comprimirlo y cambiarlo a mano.
SVG es un estándar abierto del World Wide Web Consortium, publicado por primera vez en 2001 (W3C). Todos los navegadores actuales lo muestran sin plugins.
La extensión .svg del archivo SVG
Los archivos SVG usan la extensión .svg y el tipo de medio image/svg+xml. Existe una variante comprimida, .svgz, que es el mismo archivo empaquetado con gzip. Algunos programas de plotters de corte y herramientas de fuentes también usan SVG, pero el formato es el mismo.
Para qué sirve el formato SVG
- Logos e iconos en webs y aplicaciones, porque un solo archivo se ve nítido en cualquier densidad de pantalla.
- Ilustraciones, gráficos y mapas que hay que ampliar o imprimir en grande.
- Animaciones y gráficos interactivos, ya que cada forma se puede estilizar con CSS o cambiar con JavaScript.
- Plotters de corte y cortadoras láser, que siguen los contornos de las formas.
- Favicons en los navegadores modernos.
El SVG no es buena opción para fotos. Una foto tiene tonos continuos que necesitarían millones de formas diminutas; JPG y WebP la guardan de forma mucho más eficiente.
Cómo abrir un archivo SVG
Cualquier navegador abre un SVG: arrastra el archivo a una ventana de Chrome, Firefox, Safari o Edge. Para ver el código junto a la imagen, usa nuestro visor SVG. Para editar el dibujo, usa un editor vectorial como Inkscape (gratuito), Figma o Adobe Illustrator. En Windows, el Explorador de archivos puede mostrar miniaturas de SVG con una extensión; en Mac, la Vista rápida los previsualiza con la barra espaciadora.
Archivo SVG o PNG: diferencias
| SVG | PNG | |
|---|---|---|
| Hecho de | Formas y coordenadas | Píxeles |
| Al escalar | Nítido a cualquier tamaño | Borroso al ampliarlo |
| Transparencia | Sí | Sí |
| Editable como texto | Sí | No |
| Ideal para | Logos, iconos, diagramas | Capturas de pantalla, imágenes detalladas, sitios que no aceptan SVG |
Puedes ir en los dos sentidos: el convertidor de PNG a SVG traza los píxeles en formas, y el convertidor de SVG a PNG dibuja las formas en píxeles al tamaño que elijas.