L’idée est d’éprouver l’intégration de SVG dans HTML, en particulier via CSS (styliser, animer…).

Bilan :

Liens utiles

Inclusion HTML+CSS

Apparemment c’est plus simple de le mettre en inline en tant que balise SVG. La balise IMG affiche le SVG mais je ne l’ai pas vue comme méthode d’inclusion. Et la balise OBJECT m’inspire bof.

Même chez Mozilla, ils semblent faire un gros copier/coller dégueux alors que leur explication prétend qu’il s’agit d’un fichier SVG séparé. Explication lue ailleurs : histoire de DOM pas accessible si stoquée dans un fichier séparé.

Note : Pelican intègre le code SVG sans broncher depuis le corps du fichier en markdown.

Exemple : smiley

Pas de classe CSS dans cet exemple.

:::svg
<svg width="500" height="500">
  <circle cx="250" cy="250" r="200" stroke="black" stroke-width="4" fill="yellow" />
  <ellipse cx="185" cy="175" rx="20" ry="30" fill="black" />
  <ellipse cx="315" cy="175" rx="20" ry="30" fill="black" />
  <path d="m 150 300 q 100 150 200 0" fill="none" stroke-linecap="round" stroke="#000" stroke-width="10" />
</svg>

Résultat