Elements et attributs utilesElements 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 SVGCSS 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 SVGJavascript 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.
OptimisationsOptimisations
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!Mon élément SVG n'apparait pas!
-
Est-il dans la
viewBow(attention auxtransformqui peuvent l'en faire sortir)? -
A-t-il une dimension valide (
r, width, height...et pas descale="0")? -
Est-il masqué par un autre élément ou un
clipPathou unmask? -
Une règle CSS interfère-t-elle (avec
fill stroke opacity display) ou utilise-t-elle une couleur transparent/invisible (rouge sur fond rouge)? -
Est-il dans le bon namespace
xmlns="http://www.w3.org/2000/svg"? Manque-t-il un namespace commexmlns:xlink="http://www.w3.org/1999/xlink"? -
A-t-il un filtre cassé qui lui est appliqué (attribut
filterrenvoyant vers un filtre planté ou mal conçu)? -
S'il s'agit d'un
use, a-t-il le bonxlink:href? CORS est-il bien configuré?
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).