SVG signifie Scalable Vector Graphics. C'est le standard ouvert du W3C pour des images décrites comme des instructions plutôt que des pixels : dessine un cercle ici, suis cette courbe, remplis cette forme avec cette couleur, affiche ce mot dans cette police. Comme l'image est un ensemble d'instructions, elle peut être affichée à n'importe quelle taille sans jamais devenir floue ou pixelisée, ce qui explique pourquoi les logos, icônes, cartes et graphiques sont si souvent en SVG.
Comment un SVG stocke une image
Un fichier SVG est du XML : du texte lisible que vous pouvez ouvrir dans n'importe quel éditeur. Un élément <path> contient une chaîne compacte de commandes de dessin, <rect>, <circle> et <polygon> font ce que leurs noms suggèrent, <text> contient un texte réel et sélectionnable, et <g> regroupe des éléments pour qu'ils puissent être déplacés ou stylés ensemble. Un attribut viewBox définit le système de coordonnées, ce qui permet à tout le dessin de changer d'échelle proprement.
Comme c'est du texte, un SVG se compresse extrêmement bien ; un SVG gzippé (parfois avec l'extension .svgz) fait souvent une fraction de sa taille d'origine. Le fait d'être du texte signifie aussi qu'un SVG peut être stylé avec du CSS, animé et scripté. Un navigateur le traite comme faisant partie du document plutôt que comme une image opaque.
Cette dernière possibilité a un aspect de sécurité important : un SVG peut contenir un élément <script>. Partout où un SVG est accepté en tant que fichier téléversé par un utilisateur, il doit être nettoyé ou servi d'une manière qui empêche toute exécution, ce qui explique pourquoi certains sites refusent le SVG même s'ils acceptent tous les formats raster.
Le SVG est un mauvais conteneur pour les photographies. Vous pouvez y intégrer une image raster, mais vous obtenez alors une image en pixels encapsulée dans du XML, sans bénéficier de l'avantage du changement d'échelle.
Quelles métadonnées un SVG contient
SVG dispose d'un élément dédié <metadata>, et comme la norme ne précise pas ce qu'il doit contenir, les éditeurs y placent beaucoup d'informations. Le plus souvent, il contient du RDF utilisant les termes Dublin Core : dc:title, dc:creator, dc:date, dc:description, dc:rights et un URI de licence. Des éléments <title> et <desc> peuvent aussi se trouver à la racine ou sur n'importe quelle forme individuelle, où ils servent aussi de texte d'accessibilité pour les lecteurs d'écran.
Il y a ensuite la gestion interne de l'éditeur, qui est généralement la partie la plus volumineuse. Inkscape écrit tout un espace de noms à lui : la géométrie de la fenêtre du document, le niveau de zoom et la position du curseur lors du dernier enregistrement, les lignes directrices, les paramètres de grille, les noms et la visibilité des calques, et une chaîne inkscape:version. Illustrator intègre un paquet XMP avec ses propres identifiants de document et son historique. Rien de tout cela ne dessine quoi que ce soit.
Il en découle deux points pratiques. Les données de l'éditeur peuvent facilement représenter la majeure partie du fichier ; faire passer un SVG dans un optimiseur avant publication permet souvent de le réduire de moitié. Et les noms de calques sont du texte que vous avez écrit : <g inkscape:label="client logo v3 REJECTED"> est invisible dans l'image et parfaitement visible dans le fichier.
Quand utiliser le SVG
Utilisez le SVG pour tout ce qui est dessiné plutôt que photographié : logos, icônes, schémas, graphiques, illustrations, cartes. C'est le bon choix pour le web, où un seul fichier couvre toutes les densités d'écran, et pour l'impression, où il peut être mis à l'échelle à n'importe quelle taille.
Utilisez PNG ou JPG pour les photographies et pour tout ce qui présente des tons continus. Exportez aussi une copie raster aplatie lorsque vous avez besoin d'une image qui s'ouvrira dans un logiciel trop ancien ou trop limité pour le SVG, et supprimez les métadonnées de l'éditeur avant publication, à la fois pour réduire la taille du fichier et parce que les noms de calques ne sont pas toujours destinés au public.