Le format SVG, peu connu du grand public, mais pourtant indispensable sur le web possède de nombreux avantages. Découvrons ses caractéristiques, ses inconvénients et les possibilités qu’il offre pour les graphistes et les développeurs web.
Sommaire
- Qu’est-ce qu’un fichier SVG
- À quoi sert le format SVG ?
- Quels sont les inconvénients du format SVG ?
- Comment intégrer un SVG ?
- Quels logiciels pour créer des images vectorielles (fichier SVG) ?
- Boîte à outils
- Questions fréquentes à propos du format SVG
Qu’est-ce qu’un fichier SVG ?
SVG pour Scalable Vector Graphics, est un format permettant de concevoir et d’enregistrer des fichiers vectoriels sous le langage XML.
Ces fichiers peuvent ensuite être redimensionnés à volonté sans jamais perdre de leur qualité. On parle ainsi d’images vectorielles. Pour cette raison, les logos et les iconographies sont le plus souvent édités en format SVG afin de conserver la qualité du fichier et ce, peu importe les dimensions choisies.
L’image vectorielle s’oppose alors à l’image matricielle, qui quant à elle, aura tendance à perdre en résolution au moment de la redimension.
À quoi sert le format SVG ?
Le format SVG est donc principalement utilisé par les graphistes dans l’objectif de créer des logos, des icônes et autres illustrations ayant vocation à être redimensionnés pour le web.
Plus léger qu’un format PNG ou JPEG, le format SVG permet également de ne pas alourdir votre site internet tout en intégrant des illustrations à la résolution parfaite. Aussi, lorsque vous chargez un élément en SVG sur votre site, celui-ci s’intègre dans la partie HTML, ce qui vous offre la possibilité de modifier directement le style de l’élément en CSS.
Par ailleurs, étant en langage XML, les fichiers SVG permettent d’améliorer votre référencement grâce aux informations de texte qu’il stocke en littéral et non en tant que forme (par opposition aux images matricielles qui sont perçues comme des designs). Vos images et illustrations peuvent ainsi être lues par les moteurs de recherches.
En résumé, voici pourquoi utiliser le format SVG :
- Pour toute création graphique ayant vocation à être redimensionnée
- Pour conserver la résolution d’un élément graphique
- Pour alléger vos fichiers graphiques et vos pages web
- Pour améliorer votre référencement naturel
- Pour pouvoir éditer directement votre élément graphique depuis un éditeur de texte
- Pour être manipulé depuis Javascript et stylisé en CSS
Quels sont les inconvénients du format SVG ?
Comme tout type de fichiers, le format SVG présente quelques petits inconvénients à prendre en considération :
- Il n’est pas forcément compatible avec tous les navigateurs : ce qui peut entraîner une mauvaise lecture du fichier.
- Il peut être une faille pour votre cybersécurité : étant en XML, son contenu pourrait être détourné. Il faut donc s’assurer de disposer d’un système de sécurité correct pour protéger votre site internet.
- Il s’agit d’un format complexe, structuré en XML : le traitement de ces fichiers, notamment en HTML, nécessite des connaissances en développement web.
Comment intégrer un fichier SVG sur mon site internet ?
Voici la démarche à suivre afin d’intégrer un fichier SVG sur votre site internet :
- Ouvrez votre fichier SVG sur un éditeur de texte
- Copier/Coller le code présent
- Assurez-vous que votre fragment de code commence et finit avec la balise <svg>
- Intégrez ensuite les lignes de code à l’endroit désiré
Voici à quoi ressemble un fichier SVG lorsqu’il est ouvert dans un éditeur de texte.
Quels logiciels pour créer des images vectorielles ?
Il existe de nombreux logiciels vous permettant de créer ou de modifier des images vectorielles. Voici les plus performants :
- Adobe Illustrator (payant)
- Inkscape (gratuit)
- Vectr (gratuit)
- Affinity designer (payant)
- Boxy SVG (payant)
- Corel Vector (payant)
- Gimp (gratuit)
Quel est le meilleur logiciel pour créer des images vectorielles ?
Adobe Illustrator reste le logiciel le plus complet et le plus utilisé pour la création d’éléments graphiques vectoriels.
Boîte à outils : optimiser et traiter ses fichiers SVG
Pour vous aider dans le traitement de vos fichiers SVG, voici notre sélection d’outils pratiques et gratuits :
- SVG Optimizer : pour compresser le code d’un fichier SVG.
- Conversio : pour convertir un fichier JPEG ou PNG en SVG. Cette fonctionnalité est également disponible sur Adobe Express.
- Groupdocs : pour visualiser un fichier SVG en ligne.
- SVG Gobbler : pour extraire les fichiers SVG d’un site internet
Autres questions posées à propos du format SVG
Peut-on transformer un fichier PDF en SVG ?
Une grande majorité des fichiers PDF sont déjà en format vectoriel. Toutefois, cela dépend aussi du logiciel utilisé pour encoder le fichier.
Pour savoir si votre fichier PDF est un fichier vectoriel, il vous suffit de zoomer dessus et de constater (ou non) la pixellisation de celui-ci. Si le fichier se pixelise, alors il ne s’agit pas d’un fichier vectoriel. À contrario, si l’image reste nette malgré le zoom, il s’agit bel et bien d’un fichier vectorisé.
Où trouver des icônes en format SVG ?
De nombreux sites internet proposent le téléchargement de fichiers SVG à intégrer à votre site. Parmi eux, Flaticon vous offre la possibilité de télécharger des fichiers SVG en échange d’un abonnement annuel ou mensuel.
Existe-il d’autres formats pour les fichiers vectoriels ?
Le format SVG n’est pas la seule extension indiquant la présence d’un fichier vectoriel. Des formats tels que : EPS (Encapsulated PostScript) ; PS : (Postscript) ; PDF : (Portable Document Format) ; CGM : (Computer Graphics Metafile) ; IA : (Illustrator) ; sont également des fichiers vectorisés.
Comment savoir si mon illustration est au format vectoriel ?
Pour savoir si votre fichier est vectorisé, vous pouvez constater l’extension de votre document. S’il reprend l’une des extensions citées ci-dessus, alors il s’agit d’un fichier vectoriel. Vous pouvez également zoomer à 200% sur votre image et constater les lignes. Si vous observez du flou, ou de la pixellisation, alors votre fichier n’est pas vectorisé.
Peut-on créer des animations en format SVG ?
Oui, il est possible de créer des illustrations animées au format SVG. Des outils comme Illustrator ou encore SVGator peuvent vous aider à paramétrer l’animation.
