Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.
Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.
Information : SVG
SVG (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.
Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.
Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.
De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété background.
| Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée.
Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par Adobe. Pour plus d'informations à propos de SVG dans Mozilla, consultez la page SVG de ce wiki. |
Action : une démonstration de SVG
Créez un nouveau document SVG en tant que fichier texte simple, doc8.svg. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style8.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600px" height="600px" viewBox="-300 -300 600 600"
xmlns="https://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="https://www.w3.org/1999/xlink">
<title>SVG demonstration</title>
<desc>Premiers pas en CSS avec Mozilla - Démonstration de SVG</desc>
<defs>
<g id="segment" class="segment">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
</g>
<g id="quadrant">
<use xlink:href="#segment"/>
<use xlink:href="#segment" transform="rotate(18)"/>
<use xlink:href="#segment" transform="rotate(36)"/>
<use xlink:href="#segment" transform="rotate(54)"/>
<use xlink:href="#segment" transform="rotate(72)"/>
</g>
<g id="petals">
<use xlink:href="#quadrant"/>
<use xlink:href="#quadrant" transform="rotate(90)"/>
<use xlink:href="#quadrant" transform="rotate(180)"/>
<use xlink:href="#quadrant" transform="rotate(270)"/>
</g>
<radialGradient id="fade" cx="0" cy="0" r="200"
gradientUnits="userSpaceOnUse">
<stop id="fade-stop-1" offset="33%"/>
<stop id="fade-stop-2" offset="95%"/>
</radialGradient>
</defs>
<text id="heading" x="-280" y="-270">
SVG demonstration</text>
<text id="caption" x="-280" y="-250">
Placez le pointeur de la souris au dessus de la fleur.</text>
<g id="flower">
<circle id="overlay" cx="0" cy="0" r="200"
stroke="none" fill="url(#fade)"/>
<use id="outer-petals" xlink:href="#petals"/>
<use id="inner-petals" xlink:href="#petals"
transform="rotate(9) scale(0.33)"/>
</g>
</svg>
Créez un nouveau fichier CSS, style8.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :
/*** Démonstration de SVG ***/
/* page */
svg {
background-color: beige;
}
#heading {
font-size: 24px;
font-weight: bold;
}
#caption {
font-size: 12px;
}
/* flower */
#flower:hover {
cursor: crosshair;
}
/* gradient */
#fade-stop-1 {
stop-color: blue;
}
#fade-stop-2 {
stop-color: white;
}
/* outer petals */
#outer-petals {
opacity: .75;
}
#outer-petals .segment-fill {
fill: azure;
stroke: lightsteelblue;
stroke-width: 1;
}
#outer-petals .segment-edge {
fill: none;
stroke: deepskyblue;
stroke-width: 3;
}
#outer-petals .segment:hover > .segment-fill {
fill: plum;
stroke: none;
}
#outer-petals .segment:hover > .segment-edge {
stroke: slateblue;
}
/* inner petals */
#inner-petals .segment-fill {
fill: yellow;
stroke: yellowgreen;
stroke-width: 1;
}
#inner-petals .segment-edge {
fill: none;
stroke: yellowgreen;
stroke-width: 9;
}
#inner-petals .segment:hover > .segment-fill {
fill: darkseagreen;
stroke: none;
}
#inner-petals .segment:hover > .segment-edge {
stroke: green;
}
Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.
Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :
Remarques à propos de cette démonstration :
- Le document SVG est lié à la feuille de style de la manière habituelle.
- SVG possède ses propres propriétés CSS et valeurs. Certaines d'entre-elles sont similaires au propriétés CSS pour HTML.
| Modifiez la feuille de style pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent. |
Pour continuer
Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.
Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : Données XML.