SVG

Elements et attributs utiles

La liste des éléments et la liste des attributs sont sur le MDN, mais en voici quelques-uns intéressants: a animate* clipPath fe* filter hatch mask marker path pattern use view pour les éléments et color-* d xlink:href pointer-events transform pour les attributs.

CSS dans un SVG

Si le SVG se trouve directement dans un HTML, alors intégrez le CSS au HTML.
Si le SVG dans ce HTML a un namespace XML xmlns="..."), alors ajoutez @namespace "https://www.w3.org/2000/SVG au CSS.
Si le SVG est dans un fichier dédié, utilisez <?xml-stylesheet href="..." ?> .

Javascript dans un SVG

<script xlink:href="…"></script> permet de charger un fichier Javascript dans un SVG. N'oubliez pas de déclarer l'espace de nom via <svg xmlns:xlink="http://www.w3.org/1999/xlink">.

feColorMatrix ne donne pas les "bonnes" couleurs

Les couleurs en informatique se définissent dans un espace d'interpolation. Par défaut, SVG utilise l'espace lRGB (linear RGB), qui se base sur la perception des couleurs par l'oeil humain. Utilisez color-interpolation-filters="sRGB" si feColorMatrix ne rend pas les couleurs que vous attendiez.

Optimisations

Regroupez les éléments qui sont physiquement "proches" les uns des autres pour accélérez (un peu) votre SVG. Si possible, séparez la partie interactive du SVG, que vous mettrez directement dans celui-ci, et sa partie décorative (arrière-plan) que vous pourrez insérer via un image xlink:href="...". Cet arrière-plan pourra être lui-aussi en SVG. Cela évitera que le navigateur ne redessine tout le SVG inutilement à chaque frame.

Mon élément SVG n'apparait pas!

vector-effect

vector-effect: non-scaling-stroke; permet de conserver constante l'épaisseur du trait de contour (stroke) d'un objet SVG, malgré un changement d'échelle (par exemple, via scale).

Liens utiles