Qu’est-ce que le SVG ?

Scalable Vector Graphics (SVG) est un format fondé sur XML pour les graphiques vectoriels en deux dimensions, le texte, la mise en forme, l’animation et l’interactivité. Ses éléments géométriques peuvent être redimensionnés sans perte de résolution matricielle.

Un document SVG est un arbre XML composé de formes, de tracés, de texte, de règles de peinture, de transformations et de références qu’un moteur de rendu résout en une scène en deux dimensions. La géométrie reste modifiable et indépendante de la résolution, même si les images matricielles intégrées et les effets de filtre conservent des coûts d’échantillonnage finis. Le SVG peut être utilisé comme ressource image ou intégré à un document, et ces modes présentent des comportements différents en matière de scripts, de mise en forme et de liens. Il convient à la création, à l’optimisation, à la diffusion et à la génération de dérivés matriciels pour les diagrammes, les icônes et les illustrations.

viewBox reçoit quatre nombres (min-x, min-y, largeur, hauteur) qui définissent quel rectangle du système de coordonnées propre au dessin est projeté sur la zone d’affichage, indépendamment des valeurs affichées de width et height. Avec la valeur par défaut de preserveAspectRatio, soit xMidYMid meet, ce rectangle est mis à l’échelle uniformément, reste entièrement visible et est centré. Une valeur de viewBox qui ne correspond pas à l’étendue du dessin le fait donc apparaître décentré, réduit ou entouré d’espace vide, quelle que soit la taille du rendu.
La manière dont un SVG est chargé détermine ce qu’il peut faire. SVG 2 prévoit qu’un fichier utilisé à la place d’une image matricielle, par exemple au moyen d’un élément HTML img ou d’une propriété d’image CSS, fonctionne dans un mode restreint, sans exécution de scripts, sans références externes et sans interactivité, et MDN répertorie les limites correspondantes appliquées par les navigateurs. Le SVG en ligne et le SVG intégré en tant que document au moyen de iframe, object ou embed ne sont pas soumis à ces restrictions ; la page peut donc leur appliquer des scripts et des styles.
Un SVG téléversé est un document qui peut contenir un script exécutable, pas seulement une image. Les limites du contexte image ne s’appliquent pas lorsque le fichier est ouvert directement ; un SVG fourni par un utilisateur et servi depuis votre propre domaine peut donc y exécuter son script. L’enregistrement du type de média SVG avertit aussi que des entités XML construites de façon malveillante peuvent épuiser la mémoire des processeurs XML. Assainissez ou convertissez en image matricielle les SVG non fiables avant de les servir, et traitez l’analyse côté serveur comme le traitement d’une entrée non fiable.
Le texte en SVG reste constitué de caractères ; il peut donc être recherché, sélectionné et lu par les technologies d’assistance, mais SVG 2 précise qu’un rendu correct peut nécessiter la disponibilité de la police utilisée lors de la création. Une police référencée par URL dans le fichier est une ressource externe, que les contextes image ne chargent pas, sauf si elle est intégrée sous forme d’URL data:. Convertir le texte en tracés fixe son apparence et lui fait perdre ces propriétés textuelles.

Utilisez le SVG pour des icônes, des logos et des diagrammes indépendants de la résolution lorsque la prise en charge du navigateur ou de l’outil correspond aux fonctionnalités requises. Assainissez les fichiers non fiables, car le SVG peut contenir des scripts, des liens et d’autres contenus actifs.

Les données de Transloadit sur les formats d’image pour /image/resize, /image/enhance et /document/thumbs indiquent que SVG et SVGZ sont lisibles et inscriptibles sur les deux piles ImageMagick répertoriées, et /image/resize écrit le format nommé dans son paramètre format, ce qui constitue la méthode documentée pour produire un dérivé matriciel, tel qu’un PNG, à partir d’un SVG téléversé.

Lorsque format n’est pas défini, la documentation indique que le format d’entrée est utilisé pour la sortie. Les données sur les formats ne précisent pas quelles fonctionnalités SVG le moteur de rendu prend en compte, comme les références externes, les polices ou les filtres. Aucune Assembly n’a été exécutée pour cette entrée ; testez avec vos propres fichiers.

Explorer les possibilités de Transloadit en matière de formats de fichiers et de compression

Qu’est-ce que le SVG ?

Fonctionnement du SVG

Points clés

Quand le SVG est utile

Comment Transloadit vous aide à utiliser le SVG

Références

Transformer vos connaissances sur les médias en une chaîne de traitement opérationnelle