La balise defs et où appliquer les styles

L’élément <defs> sert à définir des propriétés supplémentaires de type XML. Dans le contexte d’un SVG, on l’utilise souvent pour y circoncir des propriétés souvent stylistiques non CSS. Par exemple, un dégradé <linearGradient> devrait être définit à l’intérieur d’une balise <defs>, de même qu’un <mask> et un <filter> .

<defs>
   <linearGradient id="insta-1-20022024">
      <stop offset="0%" stop-color="#f8ED34"/>
      <stop offset="50%" stop-color="#FF3966"/>
      <stop offset="100%" stop-color="#33207f"/>
   </linearGradient>
</defs>

<text fill="url(#insta-1-20022024)" style="font-family:&quot;Roboto&quot;,&quot;Arial&quot;,sans-serif;font-weight:700;font-size:2.6rem;pointer-events:none" transform="translate(91.545 64.47)">PhōsPixel
</text>

Le fill est déinit ici inline mais il pourrait être appliqué dans le style. Il semble toutefois que ce soit plus optimal inline, pour la publication. SVG OMG, l’optimiseur de code, replace la majorité des styles inline, à l’exception des @keyframe, ou si un même style s’adresse à plusieurs éléments.

Ma règle pour les styles

• Utiliser la balise <defs> pour les styles propres aux SVG <linearGradient>, <mask>, etc.
• Favoriser le CSS le plus possible car le code est plus clair et plus facile à modifier lorsqu’on le crée.
• Optimiser avec SVG OMG et le laisser replacer le CSS inline. Mais attention, parfois cela détruit ce que je voulais faire!

transform et transform

Il y a des situations où on doit absolument utiliser le inline. Par exemple, il est impossible d’envoyer le tranform dans le <style> car le CSS ne comprend pas comment appliquer la translation. Par rapport à quoi? On n’est pas en HTML et le SVG lui-même n’est pas positionné dans la page. Or, ce que je comprends ici, c’est que le transform inline est une propriété SVG qui applique la translation par rapport à l’élément lui-même, ce n’est pas un transform de mise-en-page (CSS) lié au conteneur, à un parent ou au viewport.