SVG significa Scalable Vector Graphics. Es el estándar abierto del W3C para imágenes descritas como instrucciones en lugar de píxeles: dibuja un círculo aquí, sigue esta curva, rellena esa forma con este color, pon esta palabra en esa tipografía. Como la imagen es un conjunto de instrucciones, se puede dibujar en cualquier tamaño sin volverse borrosa ni pixelada, por lo que logotipos, iconos, mapas y gráficos suelen ser SVG.
Cómo un SVG almacena una imagen
Un archivo SVG es XML: texto legible que puedes abrir en cualquier editor. Un elemento <path> contiene una cadena compacta de comandos de dibujo; <rect>, <circle> y <polygon> hacen lo evidente; <text> contiene texto real seleccionable; y <g> agrupa elementos para poder moverlos o aplicarles estilos juntos. Un atributo viewBox define el sistema de coordenadas, lo que permite que todo el dibujo escale correctamente.
Al ser texto, un SVG se comprime muy bien; un SVG con gzip (a veces con la extensión .svgz) suele ocupar solo una fracción de su tamaño original. Al ser texto también, un SVG se puede estilizar con CSS, animar y usar con scripts. Un navegador lo trata como parte del documento y no como una imagen opaca.
Esta última capacidad tiene una dimensión de seguridad importante: un SVG puede contener un elemento <script>. En cualquier lugar donde se acepte SVG como archivo subido por el usuario, hay que sanearlo o servirlo de forma que no pueda ejecutarse, motivo por el cual algunos sitios rechazan SVG aunque aceptan todos los formatos ráster.
SVG es un contenedor poco adecuado para fotografías. Puedes incrustar una imagen ráster dentro de un SVG, pero entonces tendrás una imagen de píxeles envuelta en XML y sin ninguna ventaja de escalado.
Qué metadatos contiene un SVG
SVG tiene un elemento específico <metadata> y, como el estándar no dicta qué debe incluir, los editores guardan mucho ahí. Lo más habitual es que contenga RDF con términos de Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights y un URI de licencia. Un elemento <title> y <desc> también puede estar en la raíz o en cualquier forma individual, donde sirven además como texto de accesibilidad para lectores de pantalla.
Luego están los propios datos internos del editor, que suelen ser la parte más grande. Inkscape escribe todo un espacio de nombres propio: la geometría de la ventana del documento, el nivel de zoom y la posición del cursor en el último guardado, las guías, la configuración de la cuadrícula, los nombres y visibilidad de las capas y una cadena inkscape:version. Illustrator incrusta un paquete XMP con sus propios identificadores de documento e historial. Nada de eso dibuja nada.
De esto se derivan dos puntos prácticos. Los datos del editor pueden ser fácilmente la mayor parte del archivo, por lo que pasar un SVG por un optimizador antes de publicarlo suele reducir su tamaño a la mitad. Y los nombres de las capas son texto que tú escribiste: <g inkscape:label="client logo v3 REJECTED"> es invisible en la imagen y perfectamente visible en el archivo.
Cuándo usar SVG
Usa SVG para cualquier contenido dibujado y no fotografiado: logotipos, iconos, diagramas, gráficos, ilustraciones, mapas. Es la elección adecuada para la web, donde un solo archivo sirve para todas las densidades de pantalla, y para impresión, donde puede escalarse a cualquier tamaño.
Usa PNG o JPG para fotografías y para cualquier imagen con tono continuo. Exporta también una copia ráster plana cuando necesites una imagen que se abra en software demasiado antiguo o limitado para SVG, y elimina los metadatos del editor antes de publicar, tanto para reducir el tamaño del archivo como porque los nombres de las capas no siempre están pensados para el público.