Format SVG

Voici ce que vous apprendrez :

• Rôle d’un fichier SVG
• Histoire des fichiers SVG
• Cas d’usage du format SVG
• Avantages et inconvénients des fichiers SVG
• Ouverture d’un fichier SVG
• Création et modification d’un fichier SVG
• Format SVG : foire aux questions (FAQ)

Rôle d’un fichier SVG

SVG (Scalable Vector Graphics) est un format de vectoriel optimisé pour le web. Contrairement aux fichiers pixellisés comme les JPEG, les fichiers vectoriels du type SVG stockent des images via des formules mathématiques basées sur des points et des lignes dans une grille. Ils permettent donc de procéder à des redimensionnements à volonté sans perte de qualité, ce qui en fait le choix idéal pour les logos et les images en ligne complexes.

Ces capacités de redimensionnement n’expliquent toutefois pas à elles seules le succès du format SVG chez les designers web. Les fichiers écrits en code XML enregistrent les données texte en tant que texte littéral et non en tant que formes. Les moteurs de recherche comme Google peuvent donc lire les mots-clés des images SVG, ce qui est susceptible de faire remonter facilement le site web dans les résultats de recherche.

Les fichiers SVG sont reconnaissables à leur extension .svg.

Histoire des fichiers SVG

SVG a été proposé pour la première fois en 1994 par l’ingénieur néerlandais Martijn Koster.

À la fin des années 1990, le World Wide Web Consortium (W3C) avait demandé aux développeurs de soumettre un nouveau type de format d’image vectorielle. Les six propositions reçues ont permis d’élaborer ce qui est par la suite devenu le format SVG de W3C.

Le format SVG n’a pas connu un succès immédiat. Il a été relativement peu utilisé jusqu’en 2017, lorsque les gens ont commencé à cerner les avantages de son utilisation dans les navigateurs internet. Il est maintenant couramment employé pour les images 2D des sites web, car la plupart des applications de dessin vectoriel et des navigateurs les gèrent facilement.

Avantages et inconvénients des fichiers SVG

Avant de faire appel au format SVG, mieux vaut connaître ses avantages et ses inconvénients.

Avantages des fichiers SVG

• Contrairement aux formats pixellisés, les formats vectoriels comme SVG conservent la même résolution, que les images soient agrandies ou réduites. Vous n’avez pas à vous soucier d’une perte de qualité dans certains navigateurs ou lorsque vous redimensionnez les images pour les afficher à différents emplacements.
• Les fichiers SVG basiques sont souvent moins volumineux que les images pixellisées, composées de nombreux pixels de couleur au lieu d’algorithmes mathématiques.
• Les fichiers SVG gèrent le texte comme du texte, et non comme un dessin. Les lecteurs d’écran peuvent donc analyser les mots contenus dans les images SVG. C’est très utile pour les personnes qui ont besoin d’aide pour lire des pages web. Les moteurs de recherche peuvent également lire et indexer le texte des images SVG.
• Ce format utilise des langages de script comme JavaScript pour prendre en charge l’interactivité et rendre les images dynamiques et attrayantes.
• Comme il est en XML, il peut être facilement manipulé et intégré à d’autres technologies web.

Inconvénients des fichiers SVG

• Les fichiers SVG sont parfaits pour les logos, les illustrations et les graphiques. Cependant, ils ne contiennent pas de pixels, ce qui complique l’affichage des photos digitales de qualité. Les fichiers JPEG sont généralement plus appropriés pour des photographies riches en détails.
• Seuls les navigateurs récents prennent en charge les images SVG, que vous aurez peut-être du mal à utiliser avec Internet Explorer 8 et d’autres navigateurs plus anciens.
• Le code contenu dans les images SVG peut être difficile à comprendre si vous n’êtes pas familier de ce nouveau format.

Ouverture d’un fichier SVG

De Chrome à Edge en passant par Safari et Firefox, les navigateurs les plus populaires permettent désormais d’ouvrir des fichiers SVG sous Mac et Windows. Il suffit d’ouvrir votre navigateur et de cliquer sur Fichier >

Ouvrir pour sélectionner l'image à consulter, qui s’affiche alors dans votre navigateur.

Vous pouvez tout aussi facilement ouvrir un fichier SVG avec une application intégrée sur votre ordinateur. Double-cliquez sur le nom du fichier pour obtenir une liste des programmes permettant de l'afficher. Il peut aussi s’ouvrir automatiquement dans une solution logicielle compatible.

Création et modification d’un fichier SVG

Suivez ces étapes si vous utilisez Photoshop :

1. Une fois que vous avez créé une image dans Photoshop, cliquez sur Fichier > Exportation > Exporter en tant que.
2. Dans la boîte de dialogue qui apparaît, cliquez sur le menu déroulant Format et sélectionnez SVG.
3. Sélectionnez Tout exporter et enregistrez le fichier.

Attention, comme Photoshop est un éditeur d’images bitmap, les gens préfèrent souvent créer et modifier les fichiers SVG dans Illustrator, une application de dessin vectoriel.

Création d’un fichier SVG dans Illustrator

Suivez ces étapes si vous utilisez Illustrator :

1. Après avoir créé une illustration dans Illustrator, sélectionnez le texte pour le vectoriser. Vous éviterez ainsi les problèmes de remplacement de polices lorsque votre illustration sera affichée sur d’autres ordinateurs. Cliquez sur Texte > Vectoriser.
2. Choisissez Fichier > Enregistrer sous pour enregistrer votre fichier. Dans la boîte de dialogue qui apparaît, cliquez sur le menu déroulant Format et sélectionnez SVG.
3. Vous pouvez également exporter le fichier SVG modifié en cliquant sur Fichier > Exportation > Exporter en tant que, puis en optant pour le format SVG. Vous pourrez ainsi ajuster des paramètres, comme la précision et la compatibilité.

Modification d’un fichier SVG dans Illustrator

1. Sélectionnez le fichier SVG et ouvrez-le dans Illustrator, ou choisissez Fichier > Importer pour l’importer dans un document Illustrator.
2. Activez l’outil Sélection (ou Sélection directe) pour sélectionner des tracés, des formes ou des groupes. Vous pouvez redimensionner, transformer ou modifier des tracés, mais aussi ajouter des couleurs et des effets.