Qu'est-ce qu'un fichier SVG? – Guide Aspose.SVG

Parlons des SVG

Scalable Vector Graphics (SVG) est un langage XML permettant de créer des graphiques vectoriels bidimensionnels et mixtes vectoriels/raster. Le document SVG est un fichier texte qui décrit les images comme des primitives géométriques: lignes, courbes, formes, texte, etc. Les objets vectoriels sont construits et stockés sous la forme d’un ensemble de commandes, de nombres, de formules, et non dans une grille de pixels comme dans les bitmaps. Cela signifie que les SVG vectoriels peuvent être considérablement redimensionnés sans perte de qualité, ce qui les rend idéaux pour les icônes, les logos, les sprites SVG, etc. Étant donné que les SVG sont écrits en code XML, ils stockent les informations sous forme de texte brut plutôt que sous forme de formes. Cela permet aux moteurs de recherche comme Google de lire les graphiques SVG pour leurs mots-clés, ce qui peut aider un site Web à progresser dans les classements de recherche.

Vous pouvez créer un fichier SVG à l’aide d’éditeurs graphiques comme Inkscape, Adobe Illustrator, CorelDRAW et Figma, qui offrent des interfaces conviviales pour créer et modifier des fichiers SVG visuellement, ce qui les rend très populaires. Cependant, dans cet article, nous nous concentrerons sur la façon de créer un fichier SVG en écrivant du code XML ou en convertissant des images raster en SVG.

Fichier SVG – Code XML

Un fichier SVG est écrit dans le langage de balisage XML. Le code XML du document SVG définit toutes les formes, chemins, couleurs et textes qui composent l’image. Le code SVG peut être intégré directement dans HTML ou enregistré dans un fichier SVG et inséré comme n’importe quelle autre image. Comme tout le contenu d’un fichier SVG est du texte, vous pouvez en ouvrir un dans un éditeur de texte, lire et modifier le code SVG. Vous pouvez utiliser un navigateur Web moderne tel que Chrome, Firefox ou Edge pour ouvrir et afficher des images SVG en ligne sans les télécharger. Vous pouvez facilement identifier un fichier SVG par son extension .svg. Cependant, connaître les bases du SVG pour comprendre comment il doit être affiché sera utile.

Éléments et attributs

Chaque document SVG est basé sur les principaux éléments structurels XML : une structure arborescente, des balises, des éléments et des attributs. Les éléments sont appliqués pour le dessin, la transformation, le style et le placement des images. Ils peuvent contenir des attributs qui définissent ses propriétés, c’est-à-dire des détails sur la façon dont l’élément doit être géré ou rendu. L’élément écrit à l’aide d’une balise de début et d’une balise de fin entre crochets. Le fichier SVG doit être écrit selon la syntaxe XML et la spécification W3C SVG 2.0.

Regardons un exemple simple. Nous générons une image SVG de quatre cercles de tailles et de couleurs différentes avec un seul centre:

1<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
3    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
4    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
5    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
6</svg>

L’élément principal du code SVG est l’élément <svg>, qui définit un fragment de document SVG.

Les attributs width et height définissent la zone d’affichage SVG, c’est-à-dire la zone visible où le contenu SVG est rendu.
L’attribut viewBox définit une fenêtre à travers laquelle les éléments de votre SVG sont visibles. Dans ce cas, la zone de visualisation s’étend de (0,0) à (300 300). Pour plus d’informations, veuillez consulter l’article Systèmes et unités de coordonnées SVG.
L’attribut xmlns en SVG signifie espace de noms XML, représentant les éléments et attributs standard qui peuvent être utilisés dans un document SVG selon la spécification Scalable Vector Graphics. Sans l’attribut xmlns, le code SVG peut ne pas être rendu correctement, voire pas du tout.
L’élément SVG <circle> est utilisé pour dessiner un cercle sur l’écran. Vous devez définir la position du centre et du rayon du cercle SVG. Dans l’exemple, nous avons peint les cercles avec différentes couleurs en utilisant l’attribut fill. Pour plus d’informations, consultez l’article Formes SVG.

Voici l’image résultante ( circles.svg) :

Texte “Quatre cercles de tailles et de couleurs différentes avec un centre”

Cliquez sur l'image!

Dans la galerie d’images, nous avons présenté certains des SVG qui peuvent être facilement créés manuellement en écrivant du code XML. Cliquez sur l’image et vous ouvrirez l’image dans le navigateur. Vous pouvez également l’enregistrer et afficher le code source. Vous constaterez qu’une fois que vous maîtriserez les éléments de base tels que les formes, les chemins, les transformations et le travail avec la couleur, vous serez en mesure de créer vos propres images vectorielles.


Snowflake	Aspose Logo	Owl (Picasso style)	Tulips pattern


Flower	Winter forest	Colorful Mosaic	Gradient shapes

Le chapitre Dessin SVG – Tutoriel de base est un didacticiel qui explique comment dessiner des images SVG et comprend des articles sur les systèmes et unités de coordonnées SVG, les formes de base SVG, les données de chemin SVG, le texte SVG, les transformations SVG de base, la couleur SVG, les remplissages. & Traits en SVG, contenu intégré SVG et filtres et dégradés SVG. Notre didacticiel de dessin SVG explique les règles courantes et les étapes standard pour créer du SVG à partir de zéro, sur la base d’exemples simples. Nous espérons que cela vous aidera dans votre travail ou vos études.

Avantages et inconvénients du format SVG

Avantages	Inconvénients
Mise à l’échelle infinie – Aucune perte de qualité quelle que soit la taille.	La taille du fichier augmente avec le niveau de détail – Les illustrations complexes peuvent devenir volumineuses.
Faible pour les graphismes simples – Le balisage textuel se compresse bien.	Non adapté au photoréalisme – Dégradés de couleurs naturelles limités.
Modifiable avec n’importe quel éditeur de texte – Programmabilité complète.	Courbe d’apprentissage plus abrupte – Le code SVG peut être intimidant pour les débutants.
Compression intégrée (SVGZ) – 50 à 80 % plus petit que le SVG standard.	Navigateurs anciens – Non pris en charge par IE8 et versions antérieures.
Accessibilité – Les lecteurs d’écran et les moteurs de recherche peuvent lire le balisage.	Pas de prise en charge native de la 3D – Le format SVG est axé sur les graphismes 2D.
Performances – Intégration directe possible dans le HTML pour réduire les requêtes HTTP.	Performances impactées par des milliers d’éléments – Impact important sur le DOM.
Animation et interactivité – Contrôle total via JavaScript et CSS.
Style avec CSS – Séparation du design et du balisage.
Intégration DOM – Manipulable via les mêmes API que le HTML.
Norme ouverte – Gratuit, maintenu par le W3C ( SVG 2.0).
Fond transparent par défaut – Idéal pour les superpositions.

Malgré ces inconvénients, les développeurs de navigateurs modernes ainsi que l’équipe Aspose.SVG reconnaissent que le SVG est l’avenir du graphisme de conception Web.

Convertir des images raster en SVG – Prêt à essayer?

L’une des façons de créer un document SVG consiste à convertir une image raster en graphique vectoriel. Aspose.SVG propose un outil en ligne gratuit que vous pouvez utiliser pour cela. L’application Vectoriseur d’image est destinée à convertir des images bitmap JPG, PNG, BMP, TIFF, ICO et GIF en graphiques vectoriels basés sur des figures géométriques composées de courbes et de lignes de Bézier. Après la conversion, tous les éléments graphiques vectoriels sont enregistrés dans des fichiers SVG.

Histoire SVG

SVG a été développé par le World Wide Web Consortium (W3C) et possède une riche histoire qui remonte à la fin des années 1990. Aux débuts du Web, divers formats et extensions HTML ont été développés rapidement. De toute évidence, un format graphique vectoriel pour le Web serait utile. Le groupe de travail SVG a été créé en 1998 pour fournir un moyen standard de représenter les graphiques vectoriels sur le Web et offrir une alternative aux formats d’images raster tels que JPEG et GIF. En 1998, il y avait six applications concurrentes dans le domaine des graphiques vectoriels Web au W3C: Web Schematics, PGML, VML, Hyper Graphics Markup Language, WebCGM et DrawML qui ont contribué à façonner ce qui est finalement devenu le format SVG du W3C. En conséquence, le groupe de travail SVG a étudié les exigences générales d’un nouveau format vectoriel et a décidé de ne développer aucune des applications existantes mais de développer un nouveau langage, en tenant compte des leçons tirées de tous les travaux précédents. Il y avait un accord général parmi les développeurs sur le type d’outils graphiques vectoriels nécessaires – courbes de Bézier, masques, composition – et le groupe de travail SVG s’est concentré sur ces points communs plutôt que sur les conflits de syntaxe. Fondamentalement, SVG a été conçu à partir de zéro, en tenant compte de toutes les influences précédentes.

La première version de SVG, connue sous le nom de SVG 1.0, a été publiée en tant que recommandation du W3C le 4 septembre 2001. Cette version a jeté les bases des graphiques vectoriels sur le Web et a introduit les formes, le texte, les chemins et les transformations de base. Le développement de SVG 2.0 a commencé dans le but d’affiner et d’étendre la spécification SVG. SVG 2.0 vise à offrir de nouvelles fonctionnalités et une meilleure intégration avec d’autres standards du Web. La dernière version SVG 2.0 a été publiée le 8 mars 2023.

SVG a mis du temps à gagner en popularité. La prise en charge de SVG était relativement limitée jusqu’en 2017, lorsque les gens ont commencé à voir les avantages de l’utilisation de SVG dans les navigateurs Web modernes.

Cas d’utilisation typiques

Icônes et logos redimensionnables
Illustrations, diagrammes, infographies, cartes
Composants d’interface utilisateur et widgets interactifs
Jeux web simples et visualisations de données
Illustrations vectorielles prêtes à l’impression (polygraphie)

Erreurs courantes et solutions

Problème	Cause	Solution
Le SVG apparaît vide dans le navigateur	Attribut `xmlns` manquant ou incorrect	Assurez-vous que la balise racine `<svg>` inclut `xmlns="http://www.w3.org/2000/svg"`
Le texte n’est pas sélectionnable ou consultable	Texte converti en tracés ou en contours	Conservez les éléments `<text>` dans le balisage ; évitez de convertir le texte en formes lors de l’exportation
La taille du fichier est anormalement élevée	Tracés trop détaillés ou groupes inutiles	Simplifiez les tracés avec des outils comme SVGO, supprimez les calques cachés et minifiez le SVG
Les couleurs s’affichent différemment selon les navigateurs	Utilisation de formats de couleur non standard	Privilégiez les noms de couleurs hexadécimaux (`#RRGGBB`) ou CSS ; évitez `rgb()` avec des pourcentages
L’animation ne fonctionne pas	Absence de balises `<script>` ou `<style>` dans un SVG intégré	Lors de l’intégration, placez `<style>` et `<script>` à l’intérieur de l’élément `<svg>` ou référencez des fichiers externes
Le SVG n’est pas adaptatif	Attributs `width`/`height` fixes sans `viewBox`	Supprimez les dimensions explicites et utilisez `viewBox` avec CSS `width: 100%`
Les outils d’accessibilité ne peuvent pas lire le graphique	Absence d’éléments `<title>` ou `<desc>`	Ajoutez `<title>` pour une brève description et `<desc>` pour des informations détaillées

Conclusion

Le format SVG est un format essentiel dans le développement Web moderne, offrant évolutivité, flexibilité, petites tailles de fichier et programmabilité. Contrairement aux images raster, les fichiers SVG sont des fichiers XML basés sur du texte, ce qui les rend modifiables, accessibles et consultables par SEO. La possibilité de styliser et d’animer les SVG avec CSS et JavaScript améliore encore leur facilité d’utilisation.

Malgré certains inconvénients, tels que le manque de rendu photoréaliste et la prise en charge 3D limitée, le SVG reste une norme largement prise en charge pour les graphiques vectoriels. Bien que les SVG présentent certaines limitations, telles que la complexité des images très détaillées et la prise en charge limitée du navigateur pour les versions plus anciennes, leurs avantages l’emportent largement sur ces inconvénients. Des icônes et logos aux éléments Web interactifs et à la polygraphie, les fichiers SVG offrent un moyen professionnel et efficace de travailler avec des graphiques vectoriels.

La maîtrise du SVG ouvre un monde de possibilités créatives, vous permettant de créer des graphiques légers, évolutifs et hautement réactifs pour des expériences numériques modernes.

Le but de l’équipe Aspose.SVG est de vous aider à en savoir suffisamment sur la technologie SVG, qui vous permet de produire ce dont vous avez besoin.

Étapes suivantes et ressources associées

Dessin SVG – Tutoriel de base – Apprenez les systèmes de coordonnées, les formes SVG, les chemins et les transformations.
Filtres et dégradés SVG – Code SVG, exemples – Approfondissez vos connaissances sur les filtres de flou, d’ombre et de matrice de couleurs.
Comment utiliser l’API Aspose.SVG pour .NET – C# – Guide pour la manipulation programmatique de SVG avec la bibliothèque Aspose.SVG for .NET.

Aspose.SVG for .NET Mise en route

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.