Les bases de SVG : Propriétés de style

Suite des bases de SVG par Dudley Storey : les styles de SVG sont souvent similaires à ceux de CSS, parfois identiques mais souvent juste assez différents pour créer la confusion.

Par

Les styles de SVG sont souvent très similaires à ceux de CSS — parfois identiques, mais souvent juste assez différents pour créer une certaine confusion.

Il est important de noter que nous parlons ici des règles utilisées dans le code SVG lui-même, et non des règles que l’on peut appliquer à SVG une fois celui-ci intégré à votre page. Cependant, si vous venez à SVG avec une bonne connaissance de CSS, il est utile de comparer et mettre en contraste les propriétés des deux :

SVGÉquivalent CSS
fill

background-color ou color, (selon le contexte)

fill-opacity

background-color ou color avec rgba/hsla, (selon le contexte)

opacity

opacity

strokeborder-color
stroke-widthborder-thickness
stroke-opacity

border-color avec rgba

rx, ry

border-radius

Les propriétés qui suivent restent identiques, qu’elles soient mises en oeuvre en SVG ou en CSS, mais la syntaxe peut être légèrement différente pour les transformations et les dimensions en SVG :

  • font-family, font-size, font-style, font-variant et font-weight
  • width et height
  • scale, rotate, skew

La plupart de ces propriétés peuvent être appliquées comme un style SVG et si vous avez l’expérience de CSS c’est probablement la manière la plus facile d’approcher le code. J’ai utilisé celles qui doivent apparaître sous forme d’attributs dans le code ci-dessous :

<svg width="300" height="170" style="float: left">  
    <rect x="10" y="5" rx="15" width="280" height="160" style="fill: #a73838; fill-opacity: 0.65; stroke: #000; stroke-width: 10; stroke-dasharray: 22, 2, 2; ry: 15;"/>
    <text x="130" y="115" fill="yellow" font-size="80" style="font-family: Blue Highway, Arial Black, sans-serif; stroke: black; stroke-width: 2;">SVG</text>
</svg><p>Test paragraph</p>  

Ce qui nous donne à peu près ceci :

SVG

Les dégradés quant à eux sont assez différents entre CSS et SVG, suffisamment pour justifier un article séparé.

Remarquez bien que nous n’avons pas besoin de spécifier les unités en SVG, du moins dans le code que j’ai montré ici : les pixels sont toujours sous-entendus.

Vous ne devriez pas conclure de cet article que les styles en SVG sont “simplement du CSS écrit différemment”. SVG nous offre de nombreuses possibilités de contrôle — comme vous le voyez, les traits (stokes) SVG peuvent inclure de nombreuses formes personnalisées, sans les complications de border-image de CSS — mais cela devrait être suffisant pour vous permettre de commencer à appliquer des styles à votre contenu SVG.

Dans la même série :

Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Les bases de SVG : Polygones
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Groupes
Les bases de SVG : Propriétés de style


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Les bases de SVG : Propriétés de style
Les bases de SVG : Groupes
Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.