SVG significa Scalable Vector Graphics. És l'estàndard obert del W3C per a imatges descrites com a instruccions en lloc de píxels: dibuixa un cercle aquí, segueix aquesta corba, omple aquesta forma amb aquest color, posa aquesta paraula en aquest tipus de lletra. Com que la imatge és un conjunt d'indicacions, es pot dibuixar a qualsevol mida sense arribar a veure's mai borrosa o pixelada, i per això els logotips, icones, mapes i gràfics sovint són SVG.
Com un SVG emmagatzema una imatge
Un fitxer SVG és XML: text llegible que pots obrir amb qualsevol editor. Un element <path> conté una cadena compacta d'ordres de dibuix, <rect>, <circle> i <polygon> fan el que és d'esperar, <text> conté text real seleccionable, i <g> agrupa elements perquè es puguin moure o estilitzar plegats. Un atribut viewBox defineix el sistema de coordenades, que és el que fa que tot el dibuix escali de manera neta.
Com que és text, un SVG es comprimeix molt bé; un SVG comprimit amb gzip (de vegades amb l'extensió .svgz) sovint ocupa només una fracció de la mida original. Que sigui text també vol dir que un SVG es pot estilitzar amb CSS, animar i controlar amb scripts. El navegador el tracta com a part del document i no com una imatge opaca.
Aquesta última capacitat té un vessant de seguretat important: un SVG pot contenir un element <script>. A qualsevol lloc on s'accepti SVG com a fitxer que puja un usuari, s'ha de sanejar o servir d'una manera que no es pugui executar, i per això alguns llocs rebutgen SVG tot i acceptar qualsevol format de ràster.
SVG és un contenidor poc adequat per a fotografies. Pots incrustar-hi una imatge de ràster, però tindràs una imatge de píxels embolicada en XML i sense cap dels avantatges d'escalat.
Quines metadades porta un SVG
SVG té un element específic <metadata> i, com que l'estàndard no indica què hi ha d'anar, els editors hi poden posar molta informació. El més habitual és que contingui RDF amb termes Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights i un URI de llicència. Un element <title> i <desc> també poden aparèixer a l'arrel o en qualsevol forma individual, on fan de text d'accessibilitat per als lectors de pantalla.
Després hi ha la informació interna de l'editor, que normalment és la part més gran. Inkscape escriu tot un espai de noms propi: la geometria de la finestra del document, el nivell de zoom i la posició del cursor quan es va desar per última vegada, les guies, la configuració de la graella, els noms i la visibilitat de les capes, i una cadena inkscape:version. Illustrator hi incrusta un paquet XMP amb els seus propis identificadors de document i l'historial. Res de tot això dibuixa res.
En segueixen dos punts pràctics. Les dades de l'editor poden ser fàcilment la major part del fitxer, de manera que passar un SVG per un optimitzador abans de publicar-lo sovint en redueix la mida a la meitat. I els noms de les capes són text que tu has escrit: <g inkscape:label="client logo v3 REJECTED"> és invisible a la imatge i perfectament visible al fitxer.
Quan utilitzar SVG
Fes servir SVG per a qualsevol cosa dibuixada i no fotografiada: logotips, icones, diagrames, gràfics, il·lustracions, mapes. És l'opció adequada per al web, on un sol fitxer serveix per a qualsevol densitat de pantalla, i per a impressió, on es pot escalar a qualsevol mida.
Fes servir PNG o JPG per a fotografies i per a qualsevol element amb to continu. Exporta també una còpia de ràster plana quan necessitis una imatge que s'obri en programari massa antic o limitat per a SVG, i elimina les metadades de l'editor abans de publicar, tant per reduir la mida del fitxer com perquè els noms de les capes no sempre són per fer-los públics.