SVG Tutoriel
Démarrer avec SVG
Recherche…
Remarques
Scalable Vector Graphics (SVG) est un standard W3C pour dessiner des images vectorielles.
Voici un simple fichier SVG autonome:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG peut également être intégré en HTML, auquel cas l'attribut xmlns n'est pas requis.
Les autres éléments graphiques sont:
-
<line> -
<ellipse> -
<path> -
<polygon>et<polyline> -
<text>incluant des éléments enfants tels que<tspan>et<textPath>
CSS est utilisé pour le style, bien que toutes les propriétés CSS ne s'appliquent pas à SVG et que SVG lui-même définisse des propriétés spécifiques telles que le fill et le stroke qui ne sont pas utilisés ailleurs.
Les formes peuvent être remplies de dégradés ou de motifs et des effets de raster supplémentaires peuvent être obtenus à l'aide de filtres.
Le découpage est disponible en utilisant les éléments graphiques ci-dessus en tant que chemins de clips.
Concernant les versions du standard SVG W3C:
- La version actuelle est SVG 1.1 (Second Edition)
- Le W3C travaille actuellement sur un projet de SVG 2
Versions
| Version | Date de sortie |
|---|---|
| 1.0 | 2001-09-04 |
| 1.1 Première édition | 2003-01-14 |
| 1.2 minuscule | 2008-12-22 |
| 1.1 Deuxième édition | 2011-08-16 |
SVG en ligne
Inline SVG permet au balisage SVG, écrit en HTML, de générer des graphiques dans le navigateur.
Lorsque vous utilisez SVG inline, un DOCTYPE n'est pas strictement requis. Au lieu de cela, les balises d'ouverture et de fermeture <svg> associées aux attributs viewBox ou width et height, suffiront:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
Le fragment <svg> ci-dessus agit à la fois comme un conteneur et un élément structurel. Ce fragment établit son propre système de coordonnées.
Voici un exemple de rendu d'un fragment SVG avec un certain contenu. Il produira un rectangle avec "Hello World!" texte en son sein.
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
Résultat:
SVG en tant que ![]()
Vous pouvez rendre le contenu d'un fichier SVG sous forme d'image dans un document HTML en utilisant une <img> . Par exemple:
<img src="my_svg_file.svg" alt="Image description">
Les dimensions de l'image seront, par défaut, affichées en fonction des propriétés de largeur et de hauteur spécifiées dans le fichier SVG référencé dans l'attribut src .
Il convient de noter les différentes limitations inhérentes à cette approche:
- La prise en charge du navigateur, bien que bonne, n'inclut pas Internet Explorer 8 et les versions antérieures, ni Android 2.3 ni les versions antérieures.
- Vous ne pouvez pas styler les éléments individuels contenus dans le fichier SVG en utilisant CSS qui est externe au fichier SVG. Tout le CSS doit être dans le fichier image lui-même.
- JavaScript ne fonctionnera pas
- L'image doit être complète dans un seul fichier. Par exemple, si le fichier SVG contient des images raster, ces images internes doivent être codées en tant qu’URL de données.
SVG comme image de fond
Vous pouvez afficher un fichier SVG dans un document HTML en le spécifiant en tant qu'image d'arrière-plan dans CSS. Par exemple:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
Si les dimensions spécifiées dans votre fichier SVG sont supérieures aux dimensions de votre élément HTML, il peut être souhaitable de spécifier la propriété de background-size , pour adapter SVG à son élément.
Comme pour l'utilisation de SVG en tant que <img> , cette approche mérite quelques limitations:
- La prise en charge du navigateur n'inclut pas Internet Explorer 8 et les versions antérieures, ni Android 2.3 ni les versions antérieures.
- Vous ne pouvez pas styler les éléments individuels contenus dans le fichier SVG en utilisant CSS qui est externe au fichier SVG. Tout le CSS doit être dans le fichier image lui-même.