Recherche…
Introduction
SVG signifie Scalable Vector Graphics. SVG est utilisé pour définir des graphiques pour le Web
L'élément HTML <svg> est un conteneur pour les graphiques SVG.
SVG dispose de plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte et des images graphiques.
Remarques
SVG est un langage basé sur XML pour créer des images vectorielles évolutives. Il peut être écrit directement dans un document HTML ou intégré à partir de fichiers SVG externes. SVG en ligne peut être restylé et modifié en utilisant CSS et JavaScript respectivement.
Le support du navigateur pour SVG varie, mais peut être vérifié ici .
Pour plus d'informations, consultez la documentation SVG .
Incorporation de fichiers SVG externes en HTML
Vous pouvez utiliser les éléments <img> ou <object> pour incorporer des éléments SVG externes. Le réglage de la hauteur et de la largeur est facultatif mais fortement recommandé.
Utiliser l'élément image
<img src="attention.svg" width="50" height="50">
L'utilisation de <img> ne vous permet pas de styliser le SVG en utilisant CSS ou de le manipuler en utilisant JavaScript.
Utiliser l'élément object
<object type="image/svg+xml" data="attention.svg" width="50" height="50">
Contrairement à <img> , <object> importe directement le SVG dans le document et peut donc être manipulé avec Javascript et CSS.
SVG en ligne
SVG peut être écrit directement dans un document HTML. SVG en ligne peut être stylé et manipulé en utilisant CSS et JavaScript.
<body>
<svg class="attention" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
<path id="attention" d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-5,13l0,106q0,8,5,13t12,6l108,0q7,0,12,-6t5,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-122,0q-7,0,-14,6q-5,4,-5,12l9,255q0,5,6,9t13,3l103,0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-1,70q-10,17,-26,26t-35,10l-858,0q-18,0,-35,-10t-26,-26q-21,-35,-1,-70l429,-786q9,-17,26,-27t36,-10t36,10t27,27Z" />
</svg>
</body>
Le SVG ci-dessus peut alors être stylé en utilisant la classe CSS correspondante:
.attention {
fill: red;
width: 50px;
height: 50px;
}
Le résultat ressemble à ceci:
Intégration de SVG en CSS
Vous pouvez ajouter des fichiers SVG externes en utilisant la propriété background-image , comme vous le feriez avec toute autre image.
HTML:
<div class="attention"></div>
CSS:
.attention {
background-image: url(attention.svg);
background-size: 100% 100%;
width: 50px;
height: 50px;
}
Vous pouvez également intégrer l'image directement dans un fichier CSS à l'aide d'une URL de données:
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201000%201000%22%20%3E%0D%0A%3Cpath%20id%3D%22attention%22%20d%3D%22m571%2C767l0%2C-106q0%2C-8%2C-5%2C-13t-12%2C-5l-108%2C0q-7%2C0%2C-12%2C5t-5%2C13l0%2C106q0%2C8%2C5%2C13t12%2C6l108%2C0q7%2C0%2C12%2C-6t5%2C-13Zm-1%2C-208l10%2C-257q0%2C-6%2C-5%2C-10q-7%2C-6%2C-14%2C-6l-122%2C0q-7%2C0%2C-14%2C6q-5%2C4%2C-5%2C12l9%2C255q0%2C5%2C6%2C9t13%2C3l103%2C0q8%2C0%2C13%2C-3t6%2C-9Zm-7%2C-522l428%2C786q20%2C35%2C-1%2C70q-10%2C17%2C-26%2C26t-35%2C10l-858%2C0q-18%2C0%2C-35%2C-10t-26%2C-26q-21%2C-35%2C-1%2C-70l429%2C-786q9%2C-17%2C26%2C-27t36%2C-10t36%2C10t27%2C27Z%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);