Un guide pratique des outils SVG et de conception

Une bonne compréhension du SVG est une compétence rare. Étonnamment souvent, SVG est traité comme un autre format d'image. Nous utilisons SVG en raison de son évolutivité et de sa taille de fichier plus petite, mais en réalité, SVG est bien plus que cela !

Dans cet article, je vais mettre en lumière trois des outils de conception les plus populaires : Adobe Illustrator, Sketch et Figma. Il existe également d'autres outils disponibles prenant en charge SVG qui peuvent avoir d'autres fonctionnalités et implémenter d'autres solutions.

Remarque : Sauf indication contraire, le contenu de cet article fait référence à SVG 1.1 2e édition. Certains des points discutés ci-dessous ne s'appliqueraient pas à SVG 2, cependant, il n'a toujours pas atteint le statut de recommandation, laissant SVG 1.1 comme la spécification la plus à jour.

Pourquoi s'embêter avec les outils de conception ?

SVG est un langage de balisage basé sur XML et, comme tout autre langage de programmation, peut être écrit et modifié dans un éditeur de texte. Donc, en théorie, contrairement aux fichiers JPG ou PNG, nous n'avons besoin d'aucun logiciel graphique pour créer du SVG. Cependant, dans la grande majorité des cas, l'utilisation d'applications de conception graphique est inévitable.

Travailler avec des formes et des graphiques complexes dans un format textuel est tout à fait possible, mais serait généralement très délicat et fastidieux. Par conséquent, il est courant d'utiliser des applications telles qu'Adobe Illustrator, Sketch ou Figma pour concevoir visuellement des graphiques, puis de les exporter au format SVG.

Ainsi, peu importe si vous êtes un concepteur qui code ou un développeur soucieux de la conception, une bonne maîtrise du travail avec SVG nécessite un peu de connaissances des deux côtés : les outils de conception et le langage SVG lui-même. Pour mieux comprendre la relation entre les deux, examinons de plus près ce que les applications de conception graphique ont à offrir et comment leurs fonctionnalités se traduisent en SVG.

Formes de base

De nombreux graphiques vectoriels sont construits à partir de quelques formes de base - regroupées, transformées et combinées les unes avec les autres. Le tableau ci-dessous représente les outils de forme disponibles dans Illustrator, Sketch et Figma et les éléments SVG sous lesquels ils sont exportés.

Ellipses et cercles

L'une des formes de base de chaque outil de conception est une ellipse. En SVG, nous trouverons un élément correspondant <ellipse /> , défini par les coordonnées du centre de l'ellipse ( cx et cy ) et deux rayons ( rx et ry ).

Voici à quoi ressemble une ellipse en SVG :

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

Le type très spécial d'ellipse est un cercle. Un cercle est une ellipse dont les rayons rx et ry sont égaux. SVG a son propre élément <circle /> qui prend un attribut en moins car il n'y a qu'un seul rayon à prendre en compte :

 <circle cx="400" cy="300" r="250"/>

Dans le cas d'ellipses et de cercles, tous les outils de conception fonctionnent de la même manière : l' outil Ellipse dans Illustrator, l'outil Ovale dans Sketch et l'outil Ellipse dans Figma généreront tous l'élément <ellipse /> à moins que les rayons ne soient égaux : dans de tels cas, nous nous retrouverons avec un élément <circle /> .

Rectangles et rectangles arrondis

Une autre forme de base commune à tous les outils de conception est un rectangle. Dans le cas de tous les outils de conception, l'utilisation d'un outil rectangle génère un élément <rect /> en SVG. Un <rect /> de base est défini par 4 attributs : ses coordonnées x et y , ainsi que sa largeur et sa hauteur :

 <rect x="150" y="100" width="500" height="400"/>

Notez que tandis que la position de <ellipse /> et <circle /> est définie par leurs centres géométriques, la position d'un <rect /> est définie par les coordonnées de son coin supérieur gauche.

Outre les rectangles de base, nous utilisons souvent des rectangles aux coins arrondis. Dans les trois outils de conception, vous pouvez transformer un rectangle en un rectangle arrondi en lui appliquant un rayon de bordure dans l' inspecteur ou le panneau Propriétés .

De plus, dans Sketch et Illustrator, il existe des outils dédiés à la création de rectangles arrondis ( outil Rectangle arrondi dans Illustrator et outil Arrondi dans Sketch). Cependant, il n'y a aucune différence entre un rectangle régulier avec un rayon appliqué et un rectangle arrondi dessiné avec un outil Rectangle arrondi .

Par conséquent, quelle que soit la manière dont il a été créé, un rectangle arrondi sera exporté en utilisant la syntaxe suivante :

 <rect x="150" y="100" width="500" height="400" rx="30"/>

Dans ce cas, rx est un attribut responsable du rayon des coins arrondis :

Rectangles arrondis avec coins elliptiques

Une différence significative entre les outils de conception et SVG est la façon dont les rayons sont définis. Dans tous les outils de conception que nous considérons, le rayon de bordure est défini par une seule variable. Nous pouvons considérer les rayons de bordure comme de petits cercles utilisés pour masquer les coins de nos rectangles :

Pendant ce temps, dans SVG, les rayons de bordure peuvent être définis par deux attributs : rx (comme dans l'exemple ci-dessus) et ry . Ils nous permettent de créer des rectangles avec des coins elliptiques. Vous pouvez considérer ces coins arrondis comme des ellipses utilisées comme masques au lieu de cercles :

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

Donc, dans ce cas, SVG vous offre plus de possibilités que les outils de conception.

Note : Même si cela n'est pas exactement lié au sujet de cet article, il convient de noter que la différence décrite ci-dessus s'applique à la fois au SVG et au HTML/CSS. La propriété CSS border-radius utilisée pour styliser les nœuds tels que les divs et les spans permet également de créer des coins elliptiques. Vous pouvez voir un exemple ci-dessous.

 border-radius: 10px 5% / 20px 25em 30px 35em;

Les valeurs avant la barre oblique ( / ) sont des rayons horizontaux (équivalents de rx ) et les valeurs après la barre oblique sont des valeurs verticales (équivalentes de ry ).

Rectangles arrondis avec plusieurs rayons

Dans les outils de conception, comme dans CSS, chacun des coins d'un rectangle peut être contrôlé séparément. En d'autres termes, chaque coin peut avoir son propre rayon (ou aucun rayon). Une telle opération n'est pas possible sur un élément <rect /> en SVG. Chaque élément <rect /> n'a qu'un seul attribut rx et un seul ry . Si vous créez un rectangle avec plusieurs rayons appliqués à ses coins, l'outil de conception générera un élément <path /> au lieu d'un élément <rect /> . Nous parlerons davantage d'un élément <path /> dans la section suivante.

Coins lisses

L'une des fonctionnalités intéressantes introduites par Sketch et Figma il n'y a pas si longtemps est les coins lisses. En bref, les coins lisses utilisent un rayon de bordure irrégulier pour obtenir un résultat qui semble plus naturel et, bien, lisse. L'application la plus courante des coins lisses est constituée d'icônes d'application et d'autres éléments arrondis sur iOS. Apple a utilisé des coins arrondis "réguliers" sur sa plate-forme mobile jusqu'à iOS6, puis est passé à ce que nous appelons aujourd'hui des coins "lisses" dans le cadre de la grande refonte introduite en 2013 (iOS7).

Dans Sketch, vous pouvez obtenir un effet de coins lisses en basculant entre coins arrondis et coins lisses dans Inspector . Figma vous donne encore plus de contrôle sur vos coins car vous pouvez manipuler le niveau de lissage dans le menu Corner Smoothing .

Malheureusement, aucun de ceux-ci ne peut être facilement traduit en SVG car SVG ne connaît pas du tout le concept de coins lisses. Il existe également une différence importante entre ce que font Sketch et Figma si vous essayez d'exporter un rectangle avec des coins lisses vers SVG.

Figma ignore les coins lisses et exporte un rectangle en tant qu'élément <rect /> régulier avec des coins arrondis. Sketch, d'autre part, exporte un rectangle avec des coins lisses en tant que <path /> qui tente de reproduire la vraie forme des coins lisses. Ainsi, Figma nous donne une moins bonne précision pour conserver un rectangle dans un rectangle, tandis que Sketch vise une précision maximale possible au détriment de la sémantique et d'une taille de fichier plus importante. Si vous souhaitez mieux comprendre ce que signifie cette différence, nous approfondirons un peu plus tard les avantages et les inconvénients de la préservation des formes de base.

Lignes

Le prochain type d'élément de base est une ligne. Dans ce cas, nous nous référons à une ligne comme une seule ligne droite allant d'un point A à un point B. Illustrator, Sketch et Figma proposent tous leurs propres outils de ligne dédiés au dessin de lignes. En SVG, nous avons un élément <line /> . Quatre de ses attributs sont obligatoires : les coordonnées de son point de départ et les coordonnées de son point d'arrivée :

 <line x1="100" y1="100" x2="200" y2="200"/>

En ce qui concerne l'exportation, Illustrator et Figma exporteront les lignes en tant qu'éléments <line /> dans la mesure du possible, tandis que Sketch calculera toujours les lignes en éléments <path /> .

Polylignes

Intéressons-nous maintenant aux polylignes. La polyligne est une série connectée de lignes droites. Les polylignes n'ont pas d'outils dédiés dans les outils de conception. Ils peuvent être dessinés avec un outil Plume (dans Illustrator et Figma) ou avec un outil Vecteur (dans Sketch).

En SVG, les polylignes sont définies avec un élément <polyline /> . <polyline /> est dessiné à l'aide d'un attribut de points qui est une liste de coordonnées définissant tous les points qui créent une polyligne. Examinons un exemple de polyligne composée de trois segments et de quatre points :

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator et Sketch traduisent les polylignes en éléments <polyline/> , tandis que Figma exporte les polylignes en tant que <path /> s.

Flèches

Dans les trois outils, vous pouvez contrôler les extrémités des lignes pour les transformer en flèches et autres. Et les trois outils exporteront ces lignes en tant que <path /> s, même si sans les majuscules appliquées, les mêmes formes seraient traduites en <line /> s ou <polyline /> s. Est-ce parce que SVG ne prend pas en charge les flèches ? Pas exactement.

En fait, la spécification SVG inclut des fins de ligne personnalisables appelées marqueurs. Cependant, aucun des outils de conception que nous avons mentionnés n'utilise de marqueurs dans le SVG qu'ils génèrent.

<marker> est un élément SVG séparé qui peut être défini dans les <defs> de SVG puis utilisé sur les éléments <line> , <polyline> et <path> avec les attributs de marqueur : marker , marker-start , marker-mid et marker-end . Si vous souhaitez en savoir plus sur ces attributs, je vous recommande de consulter la documentation officielle du W3C.

Polygones et étoiles

La dernière forme de base que nous allons examiner est un polygone. Le polygone est une forme fermée composée de lignes droites, par exemple une étoile ou un hexagone. Vous pouvez également le considérer comme une polyligne fermée. La syntaxe d'un élément <polygon /> en SVG est en fait la même que celle d'un élément <polyline /> . La seule différence entre les deux est que dans le <polygon /> le dernier point de la liste est toujours connecté au premier point pour faire d'un <polygon /> une forme fermée.

Certains polygones sont des polygones réguliers. La particularité des polygones réguliers est que tous leurs côtés et angles sont égaux. Pour dessiner des polygones réguliers, comme un hexagone ou un pentagone, vous pouvez utiliser un outil Polygone , identique dans Illustrator, Sketch et Figma. Les outils de polygone dans Illustrator et Sketch généreront des éléments <polygon /> en SVG. Dans Figma, en revanche, toutes les formes créées avec un outil Polygone se traduisent par des éléments <path /> .

Les trois outils de conception ont également des outils Star dédiés pour dessiner des étoiles. Cependant, en ce qui concerne l'exportation, les formes créées avec les outils Star se comportent exactement de la même manière que celles créées avec les outils Polygon . En SVG, les étoiles ne sont que des polygones, il n'y a PAS d'élément ~~<star />~~ .

Il est important de se rappeler que les outils Étoile et Polygone sont utilisés pour créer des étoiles et des polygones réguliers, tandis que l'élément <polygon /> en SVG peut être utilisé pour n'importe quel polygone, régulier ou irrégulier.

Tous les chemins mènent à <path />

Comme nous l'avons déjà appris, en SVG, il existe trois formes de base dédiées au dessin de formes constituées de lignes droites : <line /> , <polyline /> et <polygon /> . Mais que se passe-t-il si nous souhaitons que nos lignes soient courbes ? Il est grand temps que nous parlions de l'élément <path /> .

L'élément <path />

<path /> est l'élément SVG le plus polyvalent. Il peut être utilisé pour dessiner n'importe quelle ligne et forme possibles, y compris, mais sans s'y limiter, toutes les formes de base énumérées ci-dessus. En fait, chaque forme de base ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) peut être décrite comme un élément <path /> . De plus, de nombreuses formes peuvent être créées avec <path /> mais ne peuvent être créées avec aucun autre élément SVG. Pour en savoir plus sur <path /> et sa syntaxe, je vous recommande de consulter cet excellent article de Chris Coyier.

Maintenant, comment créer des éléments <path /> dans les outils de conception ? Tout d'abord, comme nous l'avons appris ci-dessus, certaines des couches créées avec des outils de forme sont calculées sur des éléments <path /> même s'ils pourraient théoriquement être d'autres éléments (par exemple, Figma exporte tous les polygones en tant que <path /> s même s'ils auraient pu être définis comme <polygon /> s. Ensuite, toutes les autres formes irrégulières que nous dessinons avec un outil Plume ou un outil Vecteur doivent être exportées en tant que <path /> car aucun autre élément SVG ne pourrait les définir. Enfin, dans Sketch et Figma, nous pouvons convertir n'importe quelle forme de base en un calque qui calcule un <path /> .Dans Sketch, nous pouvons accomplir cela en choisissant Calque> Combiner> Aplatir , tandis que Figma nous pouvons trouver cette fonction sous Objet> Aplatir la sélection ( ⌘ + E sur macOS, Ctrl + E sur Windows).

Opérations booléennes

Les opérations booléennes sont des fonctions exécutées sur des formes pour les combiner de différentes manières. Dans Illustrator, Sketch et Figma, il existe 4 opérations booléennes standard :

• Union (s'unir)
  Une somme de formes
• Soustraire (Moins avant)
  Forme inférieure soustraite de la zone commune entre les formes
• Couper
  La zone commune entre les formes
• Différence (exclure)
  Une somme des formes soustraites par la zone commune entre les formes.

Dans Illustrator, toutes ces fonctions génèrent une seule forme (contour). C'est une action qui ne peut pas être annulée - autrement qu'en utilisant Annuler ( ⌘ + Z sur macOS, Ctrl + Z sur Windows). Dans Sketch et Figma, en revanche, les opérations booléennes créent des groupes de calques qui peuvent être dissociés ultérieurement sans endommager les formes à l'intérieur. Cependant, vous pouvez fusionner ces groupes en une seule forme pour obtenir un résultat similaire à celui d'Illustrator en utilisant les fonctions Aplatir mentionnées dans le paragraphe précédent.

La question est, SVG supporte-t-il les opérations booléennes ? Non, ce n'est pas le cas. Ils viennent de fusionner. Par conséquent, chaque forme combinée que vous créez avec des opérations booléennes dans Figma ou Sketch sera exportée en tant qu'élément <path /> unique.

Ça se ressemble, alors pourquoi est-ce important ?

En ce qui concerne la façon dont différentes formes peuvent être définies en SVG, sa syntaxe est extrêmement polyvalente. Considérons un rectangle de base :

Une telle forme peut être définie en SVG de différentes manières. Il peut s'agir d'un élément <rect /> , d'un élément <polygon /> . Il peut certainement s'agir d'un élément <path /> (comme tout peut être un élément <path /> ). Il peut également s'agir d'un élément <line /> (ou d'un élément <polyline /> ) si nous décidons de le créer en utilisant des traits au lieu de remplissages.

Chacun de ces éléments restitue un rectangle qui a exactement la même apparence :

Mais, si le résultat final (le graphique rendu par un agent utilisateur dans un navigateur) est le même, l'approche que nous choisissons importe-t-elle vraiment ? Eh bien, c'est le cas. En règle générale, je recommanderais toujours d'utiliser des formes de base dans la mesure du possible.

Enfin, utilisez les formes les plus évidentes pour le cas donné. Par exemple, ne créez pas de rectangles avec des lignes ou de cercles avec des rectangles si vous n'avez pas de bonne raison. Il y a au moins quelques arguments derrière cela :

1. Sémantique/Lisibilité
   Les outils de compression, tels que SVGO, vous permettent de calculer toutes les formes de base des éléments de chemin. Cela peut vous faire économiser quelques bouchées mais réduira certainement la lisibilité de votre code. La syntaxe <path /> est extrêmement peu intuitive, donc si votre SVG est sur le point d'être modifié dans un éditeur de code plutôt que dans un outil de conception, il sera tellement plus facile de le comprendre si vous conservez les formes de base comme formes de base.
2. Taille du fichier
   Compresser les formes en chemins peut vous aider à réduire les fichiers, mais ce n'est pas toujours le cas ! Par exemple, un rectangle arrondi prend beaucoup plus de place en tant que <path /> qu'en tant que <rect /> .
3. Animations
   Avez-vous déjà essayé d'animer du SVG ? C'est très amusant - tant que vous travaillez sur du SVG propre et sémantique. Avec les formes de base, vous pouvez facilement manipuler des paramètres tels que le rayon, la largeur, la hauteur ou la position du point. Si vous fusionnez vos formes dans des chemins, la plupart de ces opérations seront beaucoup plus difficiles à réaliser ou tout simplement impossibles.
4. Variantes/Réactivité
   Rappelez-vous que SVG n'est pas une image statique comme JPG. Vous pouvez lui donner un style, lui donner un thème, le rendre réactif, etc. Comme pour les animations, garder votre fichier bien structuré et sémantique vous aidera certainement dans l'une de ces tâches.

Comme pour toute règle, vous pouvez trouver quelques exceptions. Mais, de manière générale, il est recommandé de garder votre SVG aussi lisible, flexible et structuré que possible.

Examinons maintenant d'autres attributs et fonctionnalités tels que viewBox, les groupes, les transformations et les effets visuels.

width , height et viewBox

Si vous avez déjà une certaine expérience avec SVG, vous avez probablement remarqué que la balise d'ouverture <svg> a souvent les attributs suivants : width , height et viewBox . Dans les outils de conception, nous avons les dimensions des plans de travail (ou des cadres dans le cas de Figma). Alors, comment exactement ces valeurs sont-elles liées les unes aux autres ?

Commençons par expliquer les attributs <svg> que nous venons de mentionner. Vous pouvez considérer une viewBox comme un canevas virtuel sous la forme d'un système de coordonnées. Le centre de ce système de coordonnées est placé dans le coin supérieur gauche de la zone désignée. Tous les éléments de la <svg viewBox="…"> sont placés selon ce système de coordonnées et également découpés par celui-ci — tout ce qui déborde de la viewBox ne sera pas rendu. viewBox accepte 4 nombres comme valeur :

 <svg viewBox="0 0 12 8"> … </svg>

Comme SVG signifie Scalable Vector Graphics, aucune unité n'est nécessaire sur ces nombres. Imaginez-le simplement comme un système de coordonnées abstrait qui peut être mis à l'échelle de n'importe quelle taille. Ne vous souciez pas trop des deux premiers chiffres, vous n'en aurez probablement pas besoin. Ce sont généralement les deux derniers qui comptent. Ce sont les dimensions réelles de notre toile SVG.

viewBox ne détermine pas la taille de SVG. Il spécifie simplement les coordonnées de la zone dans laquelle notre SVG est dessiné. Par conséquent, lorsqu'il est utilisé sur le Web, <svg> avec une viewBox spécifiée prendra toujours tout l'espace disponible et conservera le ratio défini par la viewBox — à moins que nous n'empêchions cela avec CSS ou que nous ne définissions les attributs width et/ou height .

width et height sont les attributs <svg> qui définissent la largeur et la hauteur réelles de l'élément SVG. Contrairement à viewBox , ils doivent utiliser des unités spécifiées telles que pixels, ems ou rems. Cela signifie que nous pouvons également transformer le SVG avec eux — si le rapport entre la width et la height est différent du rapport entre les valeurs de la viewBox , SVG faussera le graphique spécifié dans la viewBox en fonction des valeurs de width et de height :

Maintenant, que se passe-t-il lorsque nous exportons du SVG à partir d'outils de conception ? Dans Sketch et Figma, tous les actifs (qu'il s'agisse de calques simples, de groupes ou de plans de travail) obtiendront toujours une viewBox égale aux dimensions de l'élément exporté et width et une height définies en pixels, égales aux deux dernières valeurs de la viewBox . Dans Illustrator, tous les éléments ont un viewBox , spécifié de la même manière que dans Sketch et Figma, mais sans width ni height appliquées.

Groupes

Les groupes sont le moyen de base d'organiser les calques dans les outils de conception. Outre la définition de la hiérarchie, les groupes sont utilisés pour appliquer des opérations en bloc, telles que des transformations, à plusieurs éléments. Il n'y a pas de différence significative dans la façon dont les groupes fonctionnent entre Illustrator, Sketch et Figma et, heureusement, la fonctionnalité de base des groupes SVG ( <g>…</g> ) est à peu près la même.

Se transforme

En SVG, il existe cinq transformations de base que nous pouvons appliquer à un élément :

1. translate : déplace l'élément le long de l'axe vertical et/ou horizontal ;
2. scale : met à l'échelle l'élément le long de l'axe vertical et/ou horizontal :
3. rotate : crée une rotation bidimensionnelle d'un angle donné spécifié en degrés autour d'un point donné ;
4. skew ( skewX ou skewY ): incline l'élément d'un angle donné spécifié en degrés le long de l'axe vertical ou horizontal;
5. matrix : la plus complexe et polyvalente des fonctions de transformation disponibles. Comme il faudrait beaucoup de discussions algébriques pour expliquer le fonctionnement des transformations matricielles, cela va bien au-delà de la portée de cet article. Reconnaissons simplement que matrix vous permet d'effectuer de nombreuses transformations compliquées telles que l'étirement, la compression, le cisaillement, etc.

Remarque : Notez que même si certaines des transformations SVG ressemblent beaucoup aux transformations CSS, elles ne sont pas identiques. Par exemple, CSS offre à la fois des fonctions de rotation 2D et 3D tandis que SVG n'a qu'une seule fonction de rotation 2D. De plus, alors que CSS accepte diverses unités d'angle telles que les degrés ou les radians, les rotations SVG sont toujours définies en degrés, donc une unité peut être omise (par exemple rotate(45) , NOT ~~rotate(45deg)~~ ).

Toutes ces transformations peuvent être appliquées à n'importe quel élément SVG, comme des formes ou des groupes, et sont non destructives, c'est-à-dire qu'elles n'affectent pas la géométrie d'origine de l'élément. Nous appliquons des transformations via un attribut transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Jetons un coup d'œil aux outils de conception maintenant ! Ainsi, la plupart des transformations que nous appliquons dans les outils de conception interagissent directement avec la géométrie des objets et leur position sur le canevas. Ils ne sont pas indépendants des formes et ne seront pas exportés en tant que fonctions de transformation SVG.

Les rotations sont ici l'exception, leurs valeurs étant stockées dans l' inspecteur séparément de la géométrie de l'élément et elles s'exportent en tant que fonction transform="rotate(…)" .

Fait intéressant, la même règle s'applique aux retournements (réflexions) dans Sketch et Figma (pas dans Illustrator !). Chacun d'eux a cependant sa propre approche. Sketch utilise une combinaison de mise à l'échelle négative et de traduction pour obtenir un effet de retournement, tandis que Figma effectue un retournement dans une seule fonction matricielle.

Rayon de bordure

Nous avons déjà parlé de rectangles arrondis mais qu'en est-il de l'arrondi d'autres formes ? En fait, dans tous les outils de conception dont nous parlons, vous pouvez arrondir les angles de n'importe quelle forme, pas seulement un rectangle.

Mais qu'en est-il du SVG ? Les éléments <polygon /> et <path /> ont-ils également des attributs rx et ry ? Malheureusement non. Toute forme autre qu'un rectangle, une fois que vous avez arrondi l'un de ses coins, sera toujours exportée en tant qu'élément <path /> traitant les coins arrondis comme faisant partie intégrante de la géométrie de la forme.

Remplissages et contours

Illustrator, Sketch et Figma prennent tous en charge les remplissages et les contours en tant que propriétés de base de toutes les formes, et cela se produit donc en SVG. Par conséquent, les remplissages spécifiés dans les outils de conception sont exportés dans un attribut de fill et les contours sont exportés dans un attribut de stroke . Ne pensez pas que tout est si simple. Le diable est dans les détails.

Remplissage de couleur

Le remplissage de couleur est le plus basique des remplissages disponibles et est spécifié avec une seule couleur unie (par exemple #3fd8e2 ). En SVG, cette valeur est mise directement dans l'attribut fill (par exemple fill="#3fd8e2" ).

Les outils de conception exportent les couleurs de remplissage avec des valeurs hexadécimales (par exemple #0000ff ), bien que, en SVG, vous puissiez également utiliser tous les autres schémas de nommage connus de CSS, tels que les noms de couleur (par exemple blue ), les valeurs RVB (par exemple rgb(0,0,255) ) ou même des valeurs HSL (par exemple hsl(240,100%,50%) ).

Opacité de remplissage

En ce qui concerne l'opacité de remplissage, SVG accepte les couleurs semi-transparentes (par exemple, les valeurs RGBA), bien qu'il fournisse également un attribut fill-opacity . En raison de problèmes de compatibilité, l'utilisation fill-opacity est une approche recommandée et c'est également celle utilisée par Figma et Sketch. (Je ne mentionne pas Illustrator ici, car Illustrator ne vous permet pas de contrôler l'opacité du remplissage.) Ainsi, si vous souhaitez créer un carré SVG rempli de couleur rouge semi-transparente, vous pouvez procéder comme suit :

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

mais une approche plus recommandée (utilisée par Sketch et Figma) serait :

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Remplissage en dégradé

Si vous connaissez CSS, vous savez peut-être qu'en ce qui concerne les arrière-plans, il est relativement simple de basculer entre les arrière-plans de couleur et de dégradé. La même propriété background-color (ou background ) peut être utilisée dans les deux cas. Comme les dégradés en SVG sont beaucoup plus anciens que les dégradés CSS, leur syntaxe est également assez différente.

Pour utiliser un dégradé en SVG, vous devez d'abord le définir dans les <defs>…</defs> puis y faire référence dans un attribut fill , par exemple :

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Ainsi, ce qui se passe lors de l'exportation SVG lorsque vous utilisez un remplissage dégradé, c'est qu'un dégradé est ajouté au <defs> et qu'il est référencé dans le code ci-dessous.

Une chose importante à retenir est que SVG ne prend en charge que les dégradés linéaires et radiaux. Les effets tels que le dégradé angulaire ou le maillage dégradé ne seront pas exportés vers SVG.

Motif/Remplissage d'image

Sketch et Figma proposent également un remplissage d'image où un graphique raster est utilisé soit pour remplir l'élément entier, soit comme motif répétitif.

Lorsqu'il s'agit d'exporter des remplissages d'image vers SVG, c'est en fait assez similaire aux dégradés. Les images sont définies dans <defs> avec un élément <pattern>…</pattern> puis référencées dans un attribut fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Pour que cela fonctionne, l'image #picture référencée doit être définie quelque part . Les outils de conception les intégreront directement dans SVG en tant qu'éléments <image/> , bien que ce ne soit pas une approche recommandée en termes de performances. Si vous avez vraiment besoin d'utiliser des images raster dans votre SVG, je suggérerais de supprimer la balise image du SVG et de l'utiliser plutôt dans un fichier autonome :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Coups

L'attribut stroke en SVG, identique à l'attribut fill , accepte les couleurs dans différents formats, par exemple hexadécimal, RVB ou HSL. Et de même pour fill , vous pouvez contrôler l'opacité du trait avec stroke-opacity . De plus, comme avec fill , les traits peuvent utiliser des dégradés comme valeur. Tous ces effets peuvent être obtenus dans des outils de conception et exportés avec succès vers SVG.

Caps et jointures de trait

Il existe également quelques attributs spécifiques aux traits. Tout d'abord, vous pouvez contrôler la largeur du trait. Les outils de conception le prennent en charge et sont exportés en tant qu'attribut stroke-width . Vous pouvez également contrôler les extrémités et les jointures des traits. SVG vous permet de les définir via stroke-linecap et stroke-linejoin . Il existe trois bouchons possibles : bouchon butt à bout, bouchon round et bouchon square , et trois joints possibles : joint à miter , joint round et joint bevel . Les majuscules et les jointures peuvent être contrôlées dans Illustrator, Figma et Sketch et les majuscules et les jointures disponibles correspondent à celles disponibles en SVG.

Coups pointillés et pointillés

Un autre effet que nous pouvons obtenir avec les traits est celui des traits en pointillés. Dans Illustrator et Figma, vous pouvez définir plusieurs tirets et espaces, tandis que dans Sketch, une seule séquence d'un tiret et d'un espace est possible.

SVG vous permet de créer des lignes pointillées avec un attribut stroke-dasharray . stroke-dasharray permet de transmettre une séquence de plusieurs tirets et espaces comme valeur correspondant aux fonctionnalités de Figma et Illustrator. Cela signifie également que Sketch ne vous permet pas d'utiliser toutes les possibilités de SVG dans ce cas.

Un cas limite intéressant est une ligne pointillée. Nous y parvenons en réglant le stroke-linecap sur round et la longueur d'un tiret sur zéro, par exemple :

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Note : Actuellement, les utilisateurs de Figma rencontrent un bug qui ne leur permet pas de créer des lignes pointillées. Par exemple, utiliser 0, 10 ou 10, 0 comme tirets est interprété de la même manière que 10, 10 et donne une ligne pointillée régulière plutôt qu'une ligne pointillée. Heureusement, il existe un moyen de contourner cela. Plutôt que d'utiliser zéro, utilisez une très petite valeur, par exemple 0.0001, 10 - cela devrait donner une ligne parfaitement pointillée, comme prévu.

Alignement des traits

Il existe une autre différence, beaucoup plus importante, entre les outils de conception et SVG : l'alignement des traits. Illustrator, Sketch et Figma vous permettent tous de contrôler l'alignement du trait et de le régler à l'intérieur, à l'extérieur ou au centre. Mais devinez quoi ? SVG 1.1 ne prend pas en charge l'alignement des traits. En SVG, tous les traits sont centrés. Pas de coups intérieurs ni de coups extérieurs. C'est pourquoi des choses très étranges se produisent lorsque vous exportez vos traits alignés à l'extérieur et à l'intérieur vers SVG.

Illustrator, dans ce cas, exporte la forme et son contour sous la forme de deux formes distinctes. Ainsi, si vous appliquez un trait intérieur ou un trait extérieur à un rectangle dans Illustrator, en SVG, cela se traduira par un rectangle et un élément <path /> séparé représentant le trait du rectangle, par exemple :

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

Ce comportement a des répercussions très importantes. Par exemple, vous ne pouvez plus modifier la largeur du trait ou le rendre en pointillés. Il ne sera pas non plus mis à l'échelle de la même manière que les "vrais" traits. De plus, Illustrator modifie les dimensions de la forme d'origine, par exemple, un carré de 100 × 100 avec un trait intérieur en gras de 20 unités sera en fait exporté sous la forme d'un carré de 120 × 120 pour éviter les problèmes de rendu. Finalement, ce n'est tout simplement pas un accident vasculaire cérébral. C'est juste une autre forme avec un remplissage.

Figma et Sketch ont cependant une approche différente. Ils exportent fidèlement tous les traits en tant que traits mais ils recalculent les dimensions de la forme. Donc si vous avez un cercle avec un rayon égal à 5 ​​et un trait intérieur égal à 2, ce que vous trouverez dans votre SVG sera un cercle avec un rayon égal à 4 (et un trait toujours égal à 2).

Cette approche permet à Figma et Sketch d'éviter la plupart des problèmes mentionnés dans le cas d'Illustrator. Cependant, avec certaines formes plus compliquées, cette technique peut s'avérer peu précise et le résultat final un peu différent de celui attendu. C'est pourquoi l'approche de Sketch et Figma n'est pas nécessairement meilleure - elle est certainement plus sémantique, performante et flexible, mais la solution d'Illustrator est plus précise.

Remarque : le même problème d'alignement des traits s'applique également au CSS. La propriété CSS border ne prend pas non plus en charge l'alignement intérieur ou extérieur. Cependant, si vous le souhaitez, vous pouvez modifier ce comportement avec les propriétés outline et box-shadow .

Remplissages et traits multiples

Dans les outils de conception, vous pouvez ajouter plusieurs remplissages et traits par calque. Cela a beaucoup de sens une fois combiné avec des attributs tels que l'opacité et les modes de fusion. Malheureusement, SVG ne prend pas en charge une telle fonctionnalité. Si vous exportez un calque contenant des remplissages et/ou des contours, il sera multiplié et chacun des contours et des remplissages sera appliqué à son propre calque.

Ombres, filtres et autres effets

Parlons maintenant de certains effets moins populaires. SVG est un langage très puissant, en fait beaucoup plus puissant que la façon dont il est habituellement utilisé sur le Web. L'une des fonctionnalités les plus intéressantes de SVG est une large gamme d'effets visuels avancés, connus sous le nom de filtres SVG.

L'éventail complet des possibilités du filtre SVG est bien trop large pour être décrit dans cet article. Si vous souhaitez en savoir plus à leur sujet, je vous recommande fortement de consulter quelques conférences et articles sur ce sujet par Sarah Soueidan.

Les filtres, comme les motifs ou les dégradés, doivent être définis pour les appliquer ultérieurement à un calque. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. We can. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Modes de fusion

Les modes de fusion (tels que Darken , Multiply ou Overlay ) permettent de fusionner deux ou plusieurs éléments en combinant leurs valeurs de différentes manières. Bien connus des graphistes (et des applications telles qu'Adobe Photoshop), les modes de fusion fonctionnent également dans Sketch, Figma et Illustrator.

En SVG, les modes de fusion existent comme l'un des filtres. Ils ont leur propre primitive de filtre <feBlend /> . Cependant, comme la syntaxe de <feBlend /> est assez compliquée, Sketch, Figma et Illustrator utilisent CSS à la place :

 .rectangle { mix-blend-mode: overlay; }

La prise en charge du navigateur mix-blend-mode étant assez bonne de nos jours, cela ne devrait pas être un gros problème. Cependant, s'il est important pour vous d'assurer une prise en charge des navigateurs à toute épreuve qui inclut Microsoft Edge et IE, vous devrez remplacer manuellement les modes de fusion CSS par des filtres SVG.

Comme pour les remplissages et contours multiples, SVG ne prend pas en charge les modes de fusion appliqués directement sur les attributs de remplissage et de contour (plutôt que sur des calques entiers). Si vous essayez d'exporter le remplissage et les contours avec leurs propres modes de fusion à partir d'un outil de conception vers SVG, le calque sera multiplié et les modes de fusion appliqués aux copies respectives du calque.

Symboles et composants

Dans certains des exemples de code ci-dessus, vous avez peut-être remarqué un élément dont nous n'avons pas encore parlé : un élément <use>…</use> . <use> nous permet de définir et de réutiliser des éléments en SVG, un peu similaires aux symboles dans Illustrator et Sketch ou aux composants dans Figma. N'oubliez pas de définir des motifs, des dégradés et des filtres dans les <defs>…</defs> afin qu'ils puissent être utilisés dans une autre partie de votre code SVG ? En fait, n'importe quel élément SVG peut être défini et réutilisé de cette manière. Une fois que vous avez défini une forme ou un groupe, vous pouvez vous y référer dans le reste du document autant de fois que vous le souhaitez, par exemple :

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

Vous pouvez également réutiliser des structures beaucoup plus complexes en utilisant une <symbol>…</symbol> . Symbol agit comme un corps séparé dans notre SVG et peut avoir son propre attribut viewBox (voir Width, height et viewBox pour référence).

Cela signifie-t-il que les symboles et composants de nos outils de conception seront exportés vers des symboles SVG ? Dans Illustrator - oui, c'est le cas. Dans Sketch et Figma - non, ce n'est pas le cas. Pourquoi? Principalement, parce que les symboles Illustrator sont assez simples et peuvent être facilement traduits en SVG alors que les symboles de Sketch et les composants de Figma ne sont pas si simples du tout et l'exportation de certaines de ses fonctionnalités (telles que les remplacements imbriqués) serait très délicate, voire impossible.

Texte

Ce ne serait pas un guide complet si nous ne mentionnions pas la typographie. Tous les outils de conception offrent une grande variété d'outils liés au texte. SVG, même s'il est généralement utilisé pour les graphiques, prend également en charge les éléments de texte.

Illustrator, Sketch et Figma prennent tous en charge l'exportation de texte vers SVG et calculent les calques de texte en éléments <text>…</text> en SVG. Les éléments de texte SVG sont rendus comme n'importe quel autre élément graphique, forme, etc., à la seule différence qu'il s'agit de texte.

Comme en CSS, nous pouvons contrôler tous les paramètres de base du texte, tels que le poids, la hauteur de ligne ou l'alignement. En fait, si vous savez styliser du texte en CSS, vous savez déjà comment le faire en SVG. Cependant, cela peut sembler un peu démodé. Tout d'abord, tous les paramètres doivent être définis dans des attributs en ligne, de la même manière que les normes d'or de HTML 3.2. Deuxièmement, il n'y a pas de raccourcis. Par exemple, vous ne trouverez rien qui ressemble à une propriété CSS de font . C'est parce que les attributs de texte SVG sont en fait basés sur les spécifications CSS 2 qui nous ramènent aux années 90 et sont bien plus anciens que le CSS que nous connaissons aujourd'hui.

Néanmoins, tous ces attributs sont parfaitement exportés depuis les outils de conception chaque fois que nous voulons qu'une couche de texte devienne du code SVG.

Polices personnalisées

Malheureusement, les choses deviennent un peu délicates en ce qui concerne les polices personnalisées. À l'époque où la norme SVG 1 était en cours de création, les polices de caractères personnalisées n'étaient pas courantes sur le Web. Tout le monde utilisait des polices standard, telles que Tahoma, Verdana ou Courier. Devenir fantaisiste et utiliser des polices que les gens n'avaient pas sur leurs machines par défaut signifiait généralement les pixelliser sans pitié et les utiliser comme images. Cependant, SVG a implémenté son propre format de polices, nommé polices SVG. Aujourd'hui, 18 ans après la publication de SVG 1.0, les polices SVG ne sont plus prises en charge dans la plupart des principaux navigateurs.

Heureusement pour nous, SVG fonctionne très bien avec CSS, ce qui signifie que nous pouvons utiliser des polices Web au lieu de polices SVG, par exemple :

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Permettez-moi de ne pas entrer dans les détails de l'implémentation des polices Web ici, à part une note cruciale : ne l'oubliez pas. En d'autres termes, si vous utilisez des polices personnalisées dans votre SVG, vous devez vous rappeler de fournir ces polices au client, comme en HTML/CSS.

Polices de contour

On peut dire que beaucoup plus facile que de se battre à propos des polices et tout, serait de décrire toutes les couches de texte et de ne plus s'en soucier pour toujours. Néanmoins, il existe au moins quelques bonnes raisons de ne pas transformer votre texte en formes :

1. Vous ne pouvez pas modifier le texte souligné, ni avant ni après l'exportation.
   Lorsque vous travaillez avec du texte souligné, vous devez vous rappeler de conserver une copie modifiable dans votre fichier Illustrator, Sketch ou Figma à tout moment. Sinon, vous ne pourrez pas modifier vos calques de texte une fois qu'ils seront soulignés. Cela ajoute une complexité inutile au processus. Sans parler de la modification du texte souligné après l'exportation du SVG. Le texte en SVG peut être mis à jour à tout moment. Le texte souligné nécessite d'ouvrir le fichier source chaque fois que vous souhaitez effectuer la moindre modification de copie.
2. Le texte souligné n'est pas accessible .
   Le texte en SVG, comme les autres éléments de texte sur le Web, peut être lu par des lecteurs d'écran et d'autres technologies accessibles. En décrivant les calques de texte, vous empêchez les personnes utilisant ces technologies d'accéder à votre contenu.
3. Les gens s'attendent à ce que le texte soit du texte .
   La plupart des utilisateurs du Web ne connaissent absolument rien au SVG, au HTML ou aux outils de conception. S'ils voient du texte, ils s'attendent à ce que ce soit exactement cela. Ils voudront peut-être le sélectionner, le copier ou le mettre dans un moteur de recherche. Tout cela est possible avec du texte en SVG - à moins que vous ne le décriviez.
4. N'oubliez pas le référencement .
   Le texte en SVG est également accessible et utilisé par les moteurs de recherche. En décrivant le texte, vous rendez votre contenu moins consultable et potentiellement moins visible pour le public.

Sommaire

Merci beaucoup de m'avoir accompagné dans ce voyage à travers les tenants et les aboutissants du travail avec SVG et des outils de conception. Cet article ne couvre certainement pas tout le spectre du sujet, même s'il devrait suffire à traiter les cas d'utilisation les plus courants. Si vous avez des questions ou des questions concernant les choses qui n'ont pas été mentionnées ici, n'hésitez pas à les poster dans les commentaires !