Mettre du SVG dans vos pages Web : Techniques et bonnes pratiques
(^_^)
Jérémie Patonnier - W3Café 06/2012
Produire du SVG
- Avec des logiciels de dessin
- Avec du Javascript
- A la main \o/
Javascript
Du SVG dans du HTML
La balise object
<object data="mon-image.svg"
width="100" height="100"
type="image/svg+xml">
<!-- Une solution de repli pour les navigateurs qui ne comprennent pas SVG -->
<img src="mon-image.png"
width="100" height="100"
alt="" />
</object>La balise img
<img src="mon-image.svg"
width="100" height="100"
alt="" />SVG "inline"
<body>
<svg width="110" height="110">
<!-- le reste du code SVG ici -->
<foreignObject overflow="hidden"
width="0"
height="0">
<!-- Une solution de repli pour les navigateurs qui ne comprennent pas SVG -->
<img src="mon-image.png"
width="110" height="110"
alt="" />
</foreignObject>
</svg>
</body>Background CSS
div {
background-image: url(mon-image.svg);
background-size: contain;
}Oui, mais...
SVG n'est pas HTML
Il n'y a pas de notion de flux
- Tous les positionnements sont absolus
- Le texte se comporte comme une image