cacatoès

SVG

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

Bilan :

  • les animations CSS bouffent trop de CPU, Firefox v55 monte à 70% de CPU pour une animation simple
  • les éditeurs SVG (inkscape) produisent un code compliqué pour des motifs simples
  • il y a de la doc de vulgarisation sur les bases de la norme
  • mais pour un niveau intermédiaire, la doc manque ou n’est pas normalisée
  • … pourtant, l’alliance JS/HTML (voire WebGL [1]) sait produire des jeux HTML5 plutôt bons

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é.

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