mai 3, 2019

Un guide pratique sur SVG et les outils de conception

À propos de l'auteur

Mikołaj est un concepteur et développeur front-end dirigeant une équipe de concepteurs chez ucreate société britannique spécialisée dans la construction d'entreprises en démarrage. Il est passionné par…
Pour en savoir plus sur Mikołaj …

Pour tirer le meilleur de SVG, il est utile non seulement d’apprendre sa syntaxe, mais également de comprendre comment SVG est généré par un logiciel de conception graphique. Voyons de plus près le processus de génération de SVG avec des applications de conception populaires et comment nous pouvons les utiliser à notre avantage.

Une bonne compréhension de 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 réduite, mais en réalité, SVG est bien plus que cela!

Dans cet article, je vais vous éclairer sur 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.

Note : Sauf indication contraire, le contenu de cet article se réfère à SVG 1.1. 2e édition . Certains des points discutés ci-dessous ne s'appliqueraient pas à SVG 2 cependant, ils n'ont toujours pas atteint le statut de recommandation, laissant SVG 1.1 comme spécification la plus récente.

Why Bother About 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 théoriquement, contrairement aux fichiers JPG ou PNG, nous n’avons besoin d’aucun logiciel d’interface graphique pour créer des fichiers 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 texte 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 que Adobe Illustrator, Sketch ou Figma pour concevoir des graphiques de manière visuelle, puis de les exporter au format SVG.

Peu importe si vous êtes un concepteur qui code ou un développeur soucieux de la conception , une bonne maîtrise de SVG requiert un peu de connaissance des deux côtés: outils de conception et 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 peuvent offrir et comment leurs fonctionnalités se traduisent en SVG.

Basic Shapes

De nombreux graphiques vectoriels sont construits à partir de quelques formes de base – groupés, transformés et combinés les uns avec les autres. Le tableau ci-dessous indique les outils de forme disponibles dans Illustrator, Sketch et Figma, ainsi que les éléments SVG sous lesquels ils sont exportés.

–

Illustrator Sketch Figma Généré en SVG

Ellipse Tool . Ovale Ellipse ou

Outil Rectangle Rectangle Rectangle

Outil Rectangle arrondi Arrondi – – ]

Outil Segment de ligne Ligne Ligne (illustrateur et Figma) (Esquisse)

– Flèche Flèche

Outil Polygon Polygon Polygone (illustrateur et croquis) (Figma)

Star Tool Star Tool Star Star . 19659018] (illustrateur et croquis) (Figma)

– Triangle –

–

Et Circ les

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

Voici à quoi ressemble une ellipse en SVG:

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

En cas de Les ellipses et les cercles, tous les outils de conception fonctionnent de la même manière: Outil Ellipse dans Illustrator, Oval dans Sketch et Ellipse dans Figma générera tous un élément . à moins que les rayons ne soient égaux: dans ce cas, nous aurons un élément .

Rectangles et arrondis Rectangles

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 en SVG. Un élément de base est défini par 4 attributs: ses coordonnées x et y ainsi que sa largeur et sa hauteur:

Notez que, bien que la position de et de soit définie par leurs centres géométriques, la position d'un est définie par les coordonnées de son coin supérieur gauche. 19659005] Outre les rectangles de base, nous utilisons souvent des rectangles aux angles arrondis. Dans les trois outils de conception, vous pouvez transformer un rectangle en un rectangle arrondi en lui appliquant un rayon dans les inspecteurs ou le panneau Propriétés .

En outre, dans Esquisse 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 pas de différence entre un rectangle régulier avec un rayon appliqué et un rectangle arrondi dessiné avec un outil Rounded Rectangle .

Par conséquent, quelle que soit la manière dont il a été créé, un rectangle arrondi sera exporté à l'aide de la syntaxe suivante :

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

Rectangle arrondi SVG ( Grand aperçu ) 19659077] Rectangles arrondis avec angles elliptiques
Une différence importante entre les outils de conception et le format SVG concerne la définition des rayons. Dans tous les outils de conception considérés, le rayon de la bordure est défini par une seule variable. Nous pouvons considérer les rayons des frontières comme de petits cercles servant à masquer les angles de nos rectangles:
Angle arrondi en SVG ( Grand aperçu )
Pendant ce temps, en bordure SVG Les rayons 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 angles elliptiques. Vous pouvez imaginer de tels angles arrondis comme des ellipses utilisées comme masques au lieu de cercles:
Angle elliptique en SVG ( Grand aperçu )
Donc, dans ce cas, SVG vous offre plus de possibilités que les outils de conception.
**Note** : *Bien que le sujet de cet article ne soit pas tout à fait lié, il convient de noter que la différence décrite ci-dessus s'applique à la fois à SVG et à HTML / CSS. La propriété CSS* `border-radius` *utilisée pour styliser les nœuds tels que div et span permet également de créer des angles elliptiques. Vous pouvez voir un exemple ci-dessous.*
`border-radius: 10px 5% / 20px 25em 30px 35em;`
*Les valeurs avant barre oblique ( `/` ) sont des rayons horizontaux (équivalent de `rx` ) et les valeurs après la barre oblique sont des valeurs verticales (équivalent de `ry` ).*
Rectangles arrondis à rayons multiples
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 de SVG. Chaque élément a seulement un attribut `rx` et un `ry` . Si vous créez un rectangle avec plusieurs rayons appliqués à ses angles, l'outil de conception générera un élément au lieu d'un élément . Nous parlerons plus d'un élément dans la section suivante
Smooth Corners
Une des caractéristiques intéressantes introduites par Sketch et Figma il n'y a pas si longtemps est les angles lisses. En bref, les coins lisses utilisent un rayon de bordure irrégulier pour obtenir un résultat plus naturel et plus lisse. Les icônes d'application et autres éléments arrondis sur iOS sont les applications les plus courantes des coins lisses. Apple a utilisé des angles arrondis «normaux» sur sa plate-forme mobile jusqu'à iOS6, puis a basculé vers ce que nous appelons aujourd'hui les angles «lisses» dans le cadre de la nouvelle conception introduite en 2013 (iOS7).
] Différence entre les coins arrondis et les coins lisses ( Grand aperçu )
Dans Sketch, vous pouvez obtenir un effet de lissage des angles en basculant entre *Round Corners* et *Smooth Corners* de *Inspecteur* . Figma vous donne encore plus de contrôle sur vos coins car vous pouvez manipuler le niveau de douceur dans le menu *Corner Smoothing* .
Malheureusement, aucun de ceux-ci ne peut être facilement traduit en SVG, contrairement à SVG. connaître le concept des coins lisses du tout. Il existe également une différence importante entre ce que font Sketch et Figma si vous essayez d’exporter un rectangle avec des angles lisses au format SVG.
Figma ignore les angles lisses et exporte un rectangle en tant qu’élément régulier aux angles arrondis. Sketch, en revanche, exporte un rectangle avec des coins lisses sous la forme qui tente de reproduire la forme réelle des coins lisses. Ainsi, Figma nous donne une précision inférieure pour conserver un rectangle rectangle, alors que Sketch vise une précision maximale au détriment de la sémantique et d'une taille de fichier supérieure. Si vous souhaitez mieux comprendre la signification de cette différence, nous approfondirons les avantages et les inconvénients de la préservation des formes de base un peu plus tard.
Lines
Le prochain type d’élément de base est une ligne. Dans ce cas, nous appelons une ligne une ligne droite unique allant du point A au 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 . Quatre de ses attributs sont requis: les coordonnées de son point de départ et les coordonnées de son point final:
Ligne SVG ( Grand aperçu )
Quand il s'agit d'exporter, Illustrator et Figma exporteront les lignes sous forme d'éléments si possible, tandis que Sketch calculera toujours les lignes en éléments .
Polylines
Examinons maintenant les 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 *Pen* (dans Illustrator et Figma) ou avec un outil *Vector* (dans Sketch).
Dans, SVG, les polylignes sont définies avec un . ]élément. est dessiné à l'aide d'un attribut `points` qui est une liste de coordonnées définissant tous les points créant une polyligne. Prenons un exemple de polyligne composée de trois segments et de quatre points:
( Grand aperçu )
Illustrator et Sket traduisent les polylignes en éléments. tandis que Figma exporte les polylignes sous la forme S.
Flèches
Dans les trois outils, vous pouvez contrôler les extrémités des lignes pour les transformer en flèches, etc. Et les trois outils exporteront des lignes telles que même si sans les bouchons appliqués, les mêmes formes seraient traduites en ou en . Est-ce parce que SVG ne supporte pas 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.
est un élément SVG distinct qui peut être défini dans les éléments de SVG, puis utilisé dans les éléments et avec attributs de marqueur: `marqueur` `] marqueur-milieu et marqueur-fin . Si vous souhaitez en savoir plus sur ces attributs, je vous recommanderais de consulter la documentation officielle du W3C .`
Polygons And Stars
La dernière forme de base que nous allons examiner c'est un polygone. Le polygone est une forme fermée constituée de lignes droites, par ex. étoile ou un hexagone. Vous pouvez aussi y penser comme une polyligne fermée. La syntaxe d'un élément dans SVG est en fait la même que celle d'un élément . La seule différence entre les deux est que dans le dernier point de la liste est toujours relié au premier point pour faire une forme fermée.
SVG polygone ( Grand aperçu )
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, tels qu'un hexagone ou un pentagone, vous pouvez utiliser un outil *Polygon* identique à Illustrator, Sketch et Figma. *Les outils Polygon* dans Illustrator et Sketch généreront des éléments en SVG. En revanche, dans Figma, toutes les formes réalisées avec un outil *Polygon* génèrent des éléments .
Les trois outils de conception ont également dédié des outils *Star* pour dessiner des étoiles. Toutefois, lorsqu’il s’agit d’exporter, les formes créées avec les outils *Star* se comportent exactement comme celles créées avec les outils *Polygon* . En SVG, les étoiles ne sont que des polygones, il n’ya AUCUN élément `~~ ~~` .
Il est important de se rappeler que *Star* et *Polygon* outils sont utilisés pour créer des étoiles et des polygones réguliers, tandis que l'élément de SVG peut être utilisé pour tout polygone, régulier ou irrégulier.
Tous les chemins mènent à
Comme nous l'avons déjà appris, dans SVG, il sont trois formes de base dédiées au dessin de formes à partir de lignes droites: et . Mais que faire si nous voulons que nos lignes soient courbes? C’est un temps fort que nous avons parlé de l’élément .
L’élément
est l’élément SVG le plus polyvalent. Il peut être utilisé pour dessiner toutes les lignes et formes possibles, y compris, sans toutefois s'y limiter, toutes les formes de base énumérées ci-dessus. En fait, chaque forme de base () peut être décrite comme un élément . De plus, de nombreuses formes peuvent être créées avec mais ne peuvent pas être créées avec un autre élément SVG. Pour en savoir plus sur et sa syntaxe, je vous recommanderais de consulter cet excellent article de Chris Coyier .
Comment créer des éléments dans des outils de conception? Tout d’abord, comme nous l’avons appris plus haut, certaines des couches créées à l’aide des outils de forme calculent des éléments alors qu’elles pourraient théoriquement être d’autres éléments (par exemple, Figma exporte tous les polygones sous la forme même s’ils auraient pu être définis comme suit: Ensuite, chaque forme irrégulière que nous dessinons avec un outil *Pen* ou *un outil Vector* doit être exportée comme car aucun autre élément SVG ne pourrait les définir. Enfin, dans Sketch et Figma, nous pouvons convertir toute forme de base en un calque qui se calcule en un . Dans Sketch, nous pouvons y parvenir en choisissant *Couche> Combiner> Aplatir* tandis que Figma nous peut trouver cette fonction sous *Objet> Sélection des aplatis* ( + `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 en quelques différentes façons. Dans Illustrator, Sketch et Figma, il existe 4 opérations booléennes standard:
**Union (Unite)**
Somme des formes
**Soustraire (face minus)**
La forme inférieure est soustraite par la zone commune entre les formes
**Intersection**
Zone commune aux formes
**Différence (exclusion)**
Somme des formes soustraites de 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 que d'utiliser *Annuler* ( + `Z` sur macOS, `Ctrl` + `Z` sous Windows). En revanche, dans Sketch et Figma, les opérations booléennes créent des groupes de couches pouvant être dissociés ultérieurement sans que les formes à l'intérieur ne soient endommagées. Cependant, vous pouvez fusionner ces groupes en une seule forme pour obtenir un résultat similaire à celui d'Illustrator utilisant les fonctions *Flatten* mentionnées dans le paragraphe précédent.
La question est de savoir si SVG prend en charge les opérations booléennes? Non, ce n’est pas le cas. Ils viennent juste d'être fusionnés. Par conséquent, chaque forme combinée créée avec les opérations booléennes dans Figma ou Sketch sera exportée sous la forme d'un élément unique .
Elle est identique, alors pourquoi importe-t-elle?
défini en SVG, sa syntaxe est extrêmement polyvalente. Considérons un rectangle de base:
Rien de plus qu’un rectangle ( Grand aperçu )
Une telle forme peut être définie en SVG de différentes manières. Ce peut être un élément un élément . Ce peut certainement être un élément (car tout peut être un élément ). Il peut également s'agir d'un élément (ou d'un élément ) si nous décidons de le créer à l'aide de traits au lieu de remplissages.
Chacun de ces éléments représente un rectangle identique:
rectangle [19659018]
polygone
ligne
chemin d'accès par exemple ou
Mais si le résultat final (le graphique rendu par un agent utilisateur dans un navigateur) est identique, quelle approche choisissez-vous? Eh bien oui. 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 des cercles avec des rectangles si vous n’avez pas de bonne raison. Il y a au moins quelques arguments derrière cela:
**Sémantique / Lisibilité**
Des 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 bites, mais va certainement réduire la lisibilité de votre code. La syntaxe est extrêmement peu intuitive, donc si votre SVG doit être modifié dans un éditeur de code plutôt que dans un outil de conception, il sera beaucoup plus facile à comprendre si vous conservez les formes de base comme des formes de base.
**Taille du fichier**
Compresser des 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 qu'en tant que .
**Animations**
Avez-vous déjà essayé d'animer SVG? C’est très amusant, tant que vous utilisez un 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 en chemins, la plupart de ces opérations seront beaucoup plus difficiles à réaliser ou tout simplement impossibles.
**Variantes / Réactivité**
N'oubliez pas que SVG n'est pas une image statique telle que JPG. Vous pouvez le styler, le thématiser, 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. Cependant, de manière générale, il est recommandé de garder votre SVG aussi lisible, souple et structuré que possible.
Voyons maintenant d'autres attributs et fonctionnalités tels que viewBox, les groupes, les transformations et les effets visuels. ] width `height` and `viewBox`
Si vous avez déjà de l'expérience en SVG, vous avez probablement remarqué que la balise d'ouverture a souvent les attributs suivants: `width` `height` et `viewBox` . Dans les outils de conception, nous avons des dimensions de plan de travail (ou de 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 que nous venons de mentionner. Vous pouvez imaginer un `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 balise sont placés selon ce système de coordonnées et sont également coupés par ce dernier – tout ce qui dépasse du `viewBox` ne sera pas rendu. `Le viewBox` accepte 4 nombres:
`le modèle viewBox` en SVG ( de grand aperçu )
. ] Comme SVG signifie **Scalable** Graphiques vectoriels, aucune unité n’est nécessaire sur ces nombres. Imaginez-le simplement comme un système de coordonnées abstrait pouvant être agrandi et agrandi à n’importe quelle taille. Ne vous inquiétez pas trop des deux premiers chiffres, vous n’allez probablement pas en avoir besoin. Les deux derniers sont ce qui compte habituellement. Ce sont les dimensions réelles de notre canevas SVG.
`viewBox` ne détermine pas la taille du 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, avec un `viewBox` spécifié prendra toujours tout l'espace disponible et préservera le rapport défini par le `viewBox` – sauf si cela est empêché avec CSS ou définissez les attributs `de largeur` et / ou `de hauteur` .
`width` et `height` sont les attributs qui définissent la largeur réelle et hauteur 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 largeur et la hauteur est différent du rapport entre les valeurs de la vue `viewBox` SVG incline le graphique spécifié dans le `viewBox` en fonction du `width` et `height` de valeurs:
`Le rapport d’aspect de viewBox` est de 3: 2 mais ses attributs de largeur et de hauteur l’affiche sous forme de carré. ( Grand aperçu )
Que se passe-t-il maintenant 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 planches d'art) auront toujours un `viewBox` égal aux dimensions de l'élément exporté et `width` et `height` définie en pixels, égale aux deux dernières valeurs de la `viewBox` . Dans Illustrator, tous les actifs ont une `viewBox` spécifiée de la même manière que dans Sketch et Figma, mais aucun `largeur` et `hauteur` n'a été appliquée.
Groupes
] Les groupes sont le moyen fondamental pour organiser les couches 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 le fonctionnement des groupes entre Illustrator, Sketch et Figma et, heureusement, les fonctionnalités de base des groupes SVG (`…` ) sont à peu près les mêmes.
Transforms
Dans SVG, il y a Vous pouvez appliquer cinq transformations de base à un élément:
`translate` : déplace l'élément sur l'axe vertical et / ou horizontal;
`échelle` : met l'élément à l'échelle sur l'échelle verticale et / ou horizontale axe:
`pivoter` : crée une rotation bidimensionnelle d'un angle donné, spécifiée en degrés autour d'un point donné;
`skew` ( `skewX` ou `skewY` ]): incline l'élément d'un angle donné spécifié en degrés le long des axes vertical ou horizontal; matrice
: la plus complexe et la plus polyvalente des fonctions de transformation disponibles. Comme il faudrait beaucoup de discussions sur l’algèbre pour expliquer le fonctionnement des transformations matricielles, cela dépasse de loin le cadre de cet article. Admettons simplement que la matrice `vous permet d’effectuer de nombreuses transformations compliquées, telles que l’étirement, le serrage, le cisaillement, etc.`
**Note** : Notez que même si certaines de ces les transformations SVG ressemblent beaucoup aux transformations CSS, elles ne sont pas identiques. Par exemple, CSS offre des fonctions de rotation 2D et 3D alors que SVG ne possède qu'une seule fonction de rotation 2D. De plus, bien que CSS accepte différentes unités d'angle telles que les degrés ou les radians, les rotations SVG sont toujours définies en degrés. Par conséquent, une unité peut être omise (par exemple, `rotation (45)` **NOT** `~~ rotation (45deg) ~~` ).
Toutes ces transformations peuvent être appliquées à tout élément SVG, telles que des formes ou des groupes, et sont non destructives, c'est-à-dire qu'elles n'affectent pas la géométrie d'origine du composant. élément. Nous appliquons les transformations via un attribut de `transform` :
`…`
Voyons maintenant les outils de conception! 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. Elles ne sont pas indépendantes des formes et ne seront pas exportées 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 sont exportées en tant que Une fonction `transform = "rotation (…)"` .*
Il est intéressant de noter que la même règle s'applique aux retournements (réflexions) dans Sketch et Figma (pas dans Illustrator!). Chacun d'entre eux a sa propre approche cependant. Sketch utilise une combinaison de mise à l'échelle négative et de translation pour obtenir un effet de retournement, tandis que Figma effectue un retournement au sein d'une fonction de matrice unique.
Border Radius
Nous avons déjà parlé de rectangles arrondis, mais qu'en est-il d'arrondir les autres formes? En fait, dans tous les outils de conception dont nous traitons, vous pouvez arrondir les angles de n’importe quelle forme, pas seulement d’un rectangle.
Mais qu’en est-il de SVG? Les éléments et ont-ils également des attributs `rx` et ? Malheureusement non. Toute forme autre qu'un rectangle, une fois que vous arrondissez l'un de ses coins, sera toujours exportée sous la forme d'un élément traitant les coins arrondis comme faisant partie intégrante de la géométrie de la forme.
Fills And Strokes
Illustrator, Sketch et Figma prennent en charge les remplissages et les traits comme propriétés de base de toutes les formes, et il en va de même en SVG. Par conséquent, les remplissages spécifiés dans les outils de conception sont exportés dans un attribut `fill` et les attributs sont exportés dans un attribut `stroke` . Ne pensez pas que ce soit aussi simple que cela. Le diable est dans les détails.
Remplissage de couleur
Le remplissage de couleur est le plus élémentaire des remplissages disponibles et est spécifié avec une seule couleur unie (par exemple `# 3fd8e2` ). En SVG, cette valeur est placée directement dans l'attribut `fill` (par exemple, `fill = "# 3fd8e2"` ).
Les outils de conception exportent les remplissages de couleur avec des valeurs hexadécimales (par exemple, `# 0000ff` ), même si, en SVG, vous pouvez également utiliser tous les autres systèmes de nommage connus en CSS, tels que les noms de couleurs (par exemple `blue` ), les valeurs RVB (par exemple `rgb (0 , 0,255)` ) ou même des valeurs HSL (par exemple, `hsl (240,100%, 50%)` ).
Remplir l'opacité
Lorsqu'il s'agit de remplir l'opacité, 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 de `fill-opacity` est une approche recommandée, ainsi que 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 effectuer les opérations suivantes:
La méthode la plus recommandée (utilisée par Sketch et Figma) serait la suivante:
Remplissage par gradient
Si vous connaissez bien CSS, vous savez peut-être qu'en matière d'arrière-plan, il est relativement simple de basculer entre les arrière-plans couleur et 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 très différente.
Pour utiliser un dégradé, c'est SVG, vous devez d'abord le définir dans les balises `…` puis vous y référer. un attribut `fill` par exemple:
Ainsi, lors de l’exportation SVG, lorsqu’un remplissage dégradé est utilisé, un dégradé est ajouté au paramètre et référencé dans le code ci-dessous. ] Une chose importante à retenir est que SVG ne prend en charge que les gradients linéaires et radiaux. Les effets tels que le dégradé angulaire ou le maillage dégradé ne seront pas exportés au format SVG.
Motif / Remplissage image
Sketch et Figma proposent également un remplissage Image où un graphique tramé est utilisé pour remplir tout l'élément ou comme élément répété.
L’exportation de trames d’image au format SVG est en fait assez similaire à celle des dégradés. Les images sont définies dans avec un élément `…` puis référencées dans un attribut `fill` :
Pour le faire fonctionner, la référence `# 1945` ] l'image doit être définie *quelque part* . Les outils de conception les incorporeront directement dans SVG en tant qu’éléments bien qu’il ne s’agisse pas d’une approche recommandée en matière de performances. If you really need to use raster images in your SVG, I would suggest to remove the image tag from the SVG and use it a standalone file instead:
Strokes
`stroke` attribute in SVG, same as `fill` attribute accepts colors in various formats, e.g. hex, RGB or HSL. And similarly to `fill`you can control stroke’s opacity with `stroke-opacity`. Also, same as with `fill`strokes can use gradients as their value. All of those effects can be achieved in design tools and successfully exported to SVG.
Stroke Caps And Joins
There are also a few stroke specific attributes though. First, you can control the stroke width. Design tools support it and its exported as `stroke-width` attribute. You can also control ends and joins of the strokes. SVG allows you to define them via `stroke-linecap` and `stroke-linejoin` attributes. There are three possible caps: `butt` cap, `round` cap and `square` cap, and three possible joins: `miter` join, `round` join and `bevel` join. Both caps and joins can be controlled in Illustrator, Figma and Sketch and available caps and joins are matching those available in SVG.
Dashed And Dotted Strokes
Another effect we can achieve with strokes is dashed strokes. In Illustrator and Figma, you can set multiple dashes and gaps, while in Sketch, only a single sequence of a dash and a gap is possible.
SVG allows you to create dashed lines with a `stroke-dasharray` attribute. `stroke-dasharray` allows a sequence of multiple dashes and gaps to be passed as its value which matches Figma’s and Illustrator’s features. It also means Sketch does not allow you to use the full possibilities of SVG in this case.
An interesting edge case is a dotted line. We achieve it by setting the `stroke-linecap` to `round` and a dash’s length to zero, e.g.:
**Note**: *Currently, Figma users experience a bug that doesn’t allow them to create dotted lines. For example, using* `0, 10` or `10, 0` *as Dashes is interpreted the same way as* `10, 10` *and gives a regular dashed line rather than a dotted line. Fortunately, there’s a way to get around it. Rather than using zero, use a very small value, e.g.* `0.0001, 10` *— this should result in perfectly dotted line, as expected.*
Stroke Alignment
There is one other, much more significant difference between design tools and SVG: stroke alignment. Illustrator, Sketch and Figma all allow you to control the alignment of the stroke and set it inside, outside or centre-align it. Mais devinez quoi? SVG 1.1 does not support stroke alignment. In SVG, all strokes are centre-aligned strokes. No inside strokes or outside strokes. Which is why some very weird things happen when you’re exporting your outside- and inside- aligned strokes to SVG.
Illustrator, in such case, exports the shape and its stroke as two separate shapes. So if you apply an inside stroke or an outside stroke to a rectangle in Illustrator, in SVG it will result in a rectangle and a separate element representing the rectangle’s stroke, e.g.:
This behavior has some very important repercussions. For example, you can no longer change the width of the stroke or make it dashed. It also won’t scale the same way as “real” strokes. What is more, Illustrator changes the dimensions of the original shape, e.g. a 100×100 square with a 20-units bold inner stroke will actually export as a 120×120 square to avoid rendering issues. Eventually, it’s just not a stroke. It’s just another shape with a fill.
Figma and Sketch have a different approach though. They faithfully export all strokes as strokes but they recalculate the dimensions of the shape. So if you have a circle with a radius equal to 5 and an inside stroke equal to 2, what you’ll find in your SVG will be a circle with a radius equal to 4 (and a stroke still equal to 2).
This approach allows Figma and Sketch to avoid most of the issues mentioned in the case of Illustrator. However, with some more complicated shapes this technique may turn out not to be precise and the final result to be a bit different than expected. With is why Sketch’s and Figma’s approach is not necessarily better — it’s definitely more semantic, performant and flexible, but Illustrator’s solution is more accurate.
**Note:** *The same problem with stroke alignment applies to CSS as well. The CSS* `border` *property does not support inside or outside alignment neither. However, if you want, you can hack this behavior with* `outline` *and* `box-shadow` *properties.*
Multiple Fills And Strokes
In design tools, you can add multiple fills and strokes per layer. This makes a lot of sense once combined with such attributes as opacity and blend modes. Unfortunately, SVG does not support such a feature. If you export a layer that has fills and/or strokes, it will get multiplied and each of the strokes and fills applied to its own layer.
Shadows, Filters, And Other Effects
Let’s talk about some less popular effects now. SVG is a very powerful language, in fact much more powerful than how it’s usually used on the web. One of the most interesting SVG’s features is a wide range of advanced visual effects, known as SVG filters.
The full scope of SVG filter’s possibilities is far too wide to be described in this article. If you’d like to learn more about them I strongly recommend you to check out some talks and articles on this topic by Sarah Soueidan.
Filters, same as patterns or gradients, need to be defined to apply them later to a layer. Every filter is defined as a `…` 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:
…but you can also create a more complex filter that consists of more than one filter primitive:
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, e.g. *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.
A rectangle with a shadow (Large preview)
This is how our square could look like, once exported to HTML/CSS:
A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:
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.
Blend Modes
Blend modes (such as *DarkenMultiply* or *Overlay*) allow blending two or more elements by combining their values in different ways. Well known to graphic designers (and applications such as Adobe Photoshop), blend modes work in Sketch, Figma and Illustrator as well.
In SVG, blend modes exist as one of the filters. They have their own filter primitive. However, as ’s syntax is fairly complicated, Sketch, Figma and Illustrator use CSS instead:
`.rectangle { mix-blend-mode: overlay; }`
With `mix-blend-mode` browser support being fairly good nowadays, it shouldn’t be a big issue. However, if it’s important for you to ensure bulletproof browser support that includes Microsoft Edge and IE, you will have to replace the CSS blend modes with SVG filters manually.
Same as with multiple fills and strokes, SVG does not support blend modes applied directly on fill and stroke attributes (rather than on whole layers). If you try to export fill and strokes with their own blend modes from a design tool to SVG, the layer will get multiplied and the blend modes applied to respective copies of the layer.
Symbols And Components
In some of the code examples above, you may have noticed an element we haven’t discussed yet: a `…` element. lets us define and reuse elements in SVG, a bit similar to Symbols in Illustrator and Sketch or Components in Figma. Remember defining patterns, gradients and filters within the `…` tags so they can be used in some other part of your SVG code? In fact, any SVG element can be defined and reused this way. Once you defined a shape or a group, you can refer to it in the rest of the document as many times as you like, e.g.:
`…`
You can also reuse much more complex structures using a `…` tag. Symbol acts as a separate body within our SVG and can have its own `viewBox` attribute (see Width, height and viewBox for reference).
Does it mean our design tools’ symbols and components will be exported to SVG symbols? In Illustrator — yes, it does. In Sketch and Figma — no, it doesn’t. Pourquoi? Primarily, because Illustrator symbols are fairly simple and can be easily translated to SVG while Sketch’s symbols and Figma’s components are not that simple at all and exporting some of its features (such as nested overrides) would be very tricky or even impossible.
Text
It wouldn’t be a comprehensive guide if we don’t mention typography. All the design tools offer a wide variety of tools related to text. SVG, even though usually used for graphics, supports text elements too.
Illustrator, Sketch and Figma all support exporting text to SVG and computes text layers into `…` elements in SVG. SVG text elements are rendered like any other graphic elements, shapes etc. with the only difference is that they’re text.
Same as in CSS, we can control all the basic text’s parameters, such as weight, line height or alignment. In fact, if you know how to style text in CSS, you already know how to do it in SVG. However, it may feel a bit old-school. Firstly, all the parameters must be set in inline attributes, similarly to the golden standards of HTML 3.2. Secondly, there are no shorthands. For example, you won’t find anything resembling a `font` CSS property. That’s because SVG text attributes are actually based on CSS 2 spec which takes us back to the 90ties and are way older than CSS we know today.
Nonetheless, all of those attributes are being exported from the design tools perfectly well every time we want some text layer to become SVG code.
Custom Fonts
Unfortunately, things get a bit tricky when it comes to custom fonts. Back in the days, when SVG 1 standard was being created, custom typefaces weren’t a common thing to the web. Everybody used standard fonts, such as Tahoma, Verdana or Courier. Going fancy and using fonts people didn’t have on their machines by default, usually meant rasterizing them ruthlessly and using them as images. However, SVG implemented its own fonts format, named SVG fonts. Today, 18 years after the SVG 1.0 was published, SVG fonts are no longer supported in most of the major browsers.
Luckily for us, SVG plays very nicely with CSS, which means we can use web fonts instead of SVG fonts, e.g.:
`Text`
Let me not get into detail of implementing web fonts here apart from one crucial note: don’t forget about it. In other words, if you use custom fonts in your SVG, you need to remember about providing these fonts to the client, the same as in HTML/CSS.
Outlining Fonts
One may argue that much easier than warring about fonts and all, would be to outline all the text layers and don’t worry about them ever after. Nonetheless, there are at least a few good reasons not to change your text to shapes:
**You can’t edit outlined text — before nor after export.**
Working with outlined text, you need to remember about keeping an editable copy in your Illustrator, Sketch or Figma file at all times. Otherwise, you won’t be able to edit your text layers, once they are outlined. This adds unnecessary complexity to the process. Not to mention editing the outlined text after the SVG was exported. Text in SVG can be updated at any time. Outlined text requires opening the source file every time you want to make the tiniest copy change.
**Outlined text is not accessible**.
Text in SVG, same as other text elements on the web, can be read by screen readers and other accessible technologies. By outlining text layers, you prevent people from using such technologies from accessing your content.
**People expect text to be text**.
Most people using the web know absolutely nothing about SVG, HTML or design tools. If they see text, they expect it to be just that. They may want to select it, copy it or put in a search engine. All of this is possible with text in SVG — unless you outline it.
**Don’t forget about SEO**.
Text in SVG is also accessible and used by search engines. By outlining text, you make your content less searchable and potentially less visible to the public.
Summary
Thank you a lot for going with me on a journey through the ins and outs of working with SVG and design tools. This article definitely does not cover the full spectrum of the topic, although it should be enough to deal with the most common use cases. If you have any questions or queries regarding the things that have not been mentioned here, don’t hesitate to post them in the comments!
(dm, yk, il)
Le meilleur outil 2023 pour ta croissance Instagram !

Source link
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

Rectangle arrondi SVG ( Grand aperçu ) 19659077] Rectangles arrondis avec angles elliptiques
Une différence importante entre les outils de conception et le format SVG concerne la définition des rayons. Dans tous les outils de conception considérés, le rayon de la bordure est défini par une seule variable. Nous pouvons considérer les rayons des frontières comme de petits cercles servant à masquer les angles de nos rectangles:
Angle arrondi en SVG ( Grand aperçu )
Pendant ce temps, en bordure SVG Les rayons 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 angles elliptiques. Vous pouvez imaginer de tels angles arrondis comme des ellipses utilisées comme masques au lieu de cercles:
Angle elliptique en SVG ( Grand aperçu )
Donc, dans ce cas, SVG vous offre plus de possibilités que les outils de conception.
**Note** : *Bien que le sujet de cet article ne soit pas tout à fait lié, il convient de noter que la différence décrite ci-dessus s'applique à la fois à SVG et à HTML / CSS. La propriété CSS* `border-radius` *utilisée pour styliser les nœuds tels que div et span permet également de créer des angles elliptiques. Vous pouvez voir un exemple ci-dessous.*
`border-radius: 10px 5% / 20px 25em 30px 35em;`
*Les valeurs avant barre oblique ( `/` ) sont des rayons horizontaux (équivalent de `rx` ) et les valeurs après la barre oblique sont des valeurs verticales (équivalent de `ry` ).*
Rectangles arrondis à rayons multiples
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 de SVG. Chaque élément a seulement un attribut `rx` et un `ry` . Si vous créez un rectangle avec plusieurs rayons appliqués à ses angles, l'outil de conception générera un élément au lieu d'un élément . Nous parlerons plus d'un élément dans la section suivante
Smooth Corners
Une des caractéristiques intéressantes introduites par Sketch et Figma il n'y a pas si longtemps est les angles lisses. En bref, les coins lisses utilisent un rayon de bordure irrégulier pour obtenir un résultat plus naturel et plus lisse. Les icônes d'application et autres éléments arrondis sur iOS sont les applications les plus courantes des coins lisses. Apple a utilisé des angles arrondis «normaux» sur sa plate-forme mobile jusqu'à iOS6, puis a basculé vers ce que nous appelons aujourd'hui les angles «lisses» dans le cadre de la nouvelle conception introduite en 2013 (iOS7).
] Différence entre les coins arrondis et les coins lisses ( Grand aperçu )
Dans Sketch, vous pouvez obtenir un effet de lissage des angles en basculant entre *Round Corners* et *Smooth Corners* de *Inspecteur* . Figma vous donne encore plus de contrôle sur vos coins car vous pouvez manipuler le niveau de douceur dans le menu *Corner Smoothing* .
Malheureusement, aucun de ceux-ci ne peut être facilement traduit en SVG, contrairement à SVG. connaître le concept des coins lisses du tout. Il existe également une différence importante entre ce que font Sketch et Figma si vous essayez d’exporter un rectangle avec des angles lisses au format SVG.
Figma ignore les angles lisses et exporte un rectangle en tant qu’élément régulier aux angles arrondis. Sketch, en revanche, exporte un rectangle avec des coins lisses sous la forme qui tente de reproduire la forme réelle des coins lisses. Ainsi, Figma nous donne une précision inférieure pour conserver un rectangle rectangle, alors que Sketch vise une précision maximale au détriment de la sémantique et d'une taille de fichier supérieure. Si vous souhaitez mieux comprendre la signification de cette différence, nous approfondirons les avantages et les inconvénients de la préservation des formes de base un peu plus tard.
Lines
Le prochain type d’élément de base est une ligne. Dans ce cas, nous appelons une ligne une ligne droite unique allant du point A au 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 . Quatre de ses attributs sont requis: les coordonnées de son point de départ et les coordonnées de son point final:
Ligne SVG ( Grand aperçu )
Quand il s'agit d'exporter, Illustrator et Figma exporteront les lignes sous forme d'éléments si possible, tandis que Sketch calculera toujours les lignes en éléments .
Polylines
Examinons maintenant les 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 *Pen* (dans Illustrator et Figma) ou avec un outil *Vector* (dans Sketch).
Dans, SVG, les polylignes sont définies avec un . ]élément. est dessiné à l'aide d'un attribut `points` qui est une liste de coordonnées définissant tous les points créant une polyligne. Prenons un exemple de polyligne composée de trois segments et de quatre points:
( Grand aperçu )
Illustrator et Sket traduisent les polylignes en éléments. tandis que Figma exporte les polylignes sous la forme S.
Flèches
Dans les trois outils, vous pouvez contrôler les extrémités des lignes pour les transformer en flèches, etc. Et les trois outils exporteront des lignes telles que même si sans les bouchons appliqués, les mêmes formes seraient traduites en ou en . Est-ce parce que SVG ne supporte pas 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.
est un élément SVG distinct qui peut être défini dans les éléments de SVG, puis utilisé dans les éléments et avec attributs de marqueur: `marqueur` `] marqueur-milieu et marqueur-fin . Si vous souhaitez en savoir plus sur ces attributs, je vous recommanderais de consulter la documentation officielle du W3C .`
Polygons And Stars
La dernière forme de base que nous allons examiner c'est un polygone. Le polygone est une forme fermée constituée de lignes droites, par ex. étoile ou un hexagone. Vous pouvez aussi y penser comme une polyligne fermée. La syntaxe d'un élément dans SVG est en fait la même que celle d'un élément . La seule différence entre les deux est que dans le dernier point de la liste est toujours relié au premier point pour faire une forme fermée.
SVG polygone ( Grand aperçu )
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, tels qu'un hexagone ou un pentagone, vous pouvez utiliser un outil *Polygon* identique à Illustrator, Sketch et Figma. *Les outils Polygon* dans Illustrator et Sketch généreront des éléments en SVG. En revanche, dans Figma, toutes les formes réalisées avec un outil *Polygon* génèrent des éléments .
Les trois outils de conception ont également dédié des outils *Star* pour dessiner des étoiles. Toutefois, lorsqu’il s’agit d’exporter, les formes créées avec les outils *Star* se comportent exactement comme celles créées avec les outils *Polygon* . En SVG, les étoiles ne sont que des polygones, il n’ya AUCUN élément `~~ ~~` .
Il est important de se rappeler que *Star* et *Polygon* outils sont utilisés pour créer des étoiles et des polygones réguliers, tandis que l'élément de SVG peut être utilisé pour tout polygone, régulier ou irrégulier.
Tous les chemins mènent à
Comme nous l'avons déjà appris, dans SVG, il sont trois formes de base dédiées au dessin de formes à partir de lignes droites: et . Mais que faire si nous voulons que nos lignes soient courbes? C’est un temps fort que nous avons parlé de l’élément .
L’élément
est l’élément SVG le plus polyvalent. Il peut être utilisé pour dessiner toutes les lignes et formes possibles, y compris, sans toutefois s'y limiter, toutes les formes de base énumérées ci-dessus. En fait, chaque forme de base () peut être décrite comme un élément . De plus, de nombreuses formes peuvent être créées avec mais ne peuvent pas être créées avec un autre élément SVG. Pour en savoir plus sur et sa syntaxe, je vous recommanderais de consulter cet excellent article de Chris Coyier .
Comment créer des éléments dans des outils de conception? Tout d’abord, comme nous l’avons appris plus haut, certaines des couches créées à l’aide des outils de forme calculent des éléments alors qu’elles pourraient théoriquement être d’autres éléments (par exemple, Figma exporte tous les polygones sous la forme même s’ils auraient pu être définis comme suit: Ensuite, chaque forme irrégulière que nous dessinons avec un outil *Pen* ou *un outil Vector* doit être exportée comme car aucun autre élément SVG ne pourrait les définir. Enfin, dans Sketch et Figma, nous pouvons convertir toute forme de base en un calque qui se calcule en un . Dans Sketch, nous pouvons y parvenir en choisissant *Couche> Combiner> Aplatir* tandis que Figma nous peut trouver cette fonction sous *Objet> Sélection des aplatis* ( + `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 en quelques différentes façons. Dans Illustrator, Sketch et Figma, il existe 4 opérations booléennes standard:
**Union (Unite)**
Somme des formes
**Soustraire (face minus)**
La forme inférieure est soustraite par la zone commune entre les formes
**Intersection**
Zone commune aux formes
**Différence (exclusion)**
Somme des formes soustraites de 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 que d'utiliser *Annuler* ( + `Z` sur macOS, `Ctrl` + `Z` sous Windows). En revanche, dans Sketch et Figma, les opérations booléennes créent des groupes de couches pouvant être dissociés ultérieurement sans que les formes à l'intérieur ne soient endommagées. Cependant, vous pouvez fusionner ces groupes en une seule forme pour obtenir un résultat similaire à celui d'Illustrator utilisant les fonctions *Flatten* mentionnées dans le paragraphe précédent.
La question est de savoir si SVG prend en charge les opérations booléennes? Non, ce n’est pas le cas. Ils viennent juste d'être fusionnés. Par conséquent, chaque forme combinée créée avec les opérations booléennes dans Figma ou Sketch sera exportée sous la forme d'un élément unique .
Elle est identique, alors pourquoi importe-t-elle?
défini en SVG, sa syntaxe est extrêmement polyvalente. Considérons un rectangle de base:
Rien de plus qu’un rectangle ( Grand aperçu )
Une telle forme peut être définie en SVG de différentes manières. Ce peut être un élément un élément . Ce peut certainement être un élément (car tout peut être un élément ). Il peut également s'agir d'un élément (ou d'un élément ) si nous décidons de le créer à l'aide de traits au lieu de remplissages.
Chacun de ces éléments représente un rectangle identique:
rectangle [19659018]
polygone
ligne
chemin d'accès par exemple ou
Mais si le résultat final (le graphique rendu par un agent utilisateur dans un navigateur) est identique, quelle approche choisissez-vous? Eh bien oui. 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 des cercles avec des rectangles si vous n’avez pas de bonne raison. Il y a au moins quelques arguments derrière cela:
**Sémantique / Lisibilité**
Des 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 bites, mais va certainement réduire la lisibilité de votre code. La syntaxe est extrêmement peu intuitive, donc si votre SVG doit être modifié dans un éditeur de code plutôt que dans un outil de conception, il sera beaucoup plus facile à comprendre si vous conservez les formes de base comme des formes de base.
**Taille du fichier**
Compresser des 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 qu'en tant que .
**Animations**
Avez-vous déjà essayé d'animer SVG? C’est très amusant, tant que vous utilisez un 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 en chemins, la plupart de ces opérations seront beaucoup plus difficiles à réaliser ou tout simplement impossibles.
**Variantes / Réactivité**
N'oubliez pas que SVG n'est pas une image statique telle que JPG. Vous pouvez le styler, le thématiser, 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. Cependant, de manière générale, il est recommandé de garder votre SVG aussi lisible, souple et structuré que possible.
Voyons maintenant d'autres attributs et fonctionnalités tels que viewBox, les groupes, les transformations et les effets visuels. ] width `height` and `viewBox`
Si vous avez déjà de l'expérience en SVG, vous avez probablement remarqué que la balise d'ouverture a souvent les attributs suivants: `width` `height` et `viewBox` . Dans les outils de conception, nous avons des dimensions de plan de travail (ou de 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 que nous venons de mentionner. Vous pouvez imaginer un `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 balise sont placés selon ce système de coordonnées et sont également coupés par ce dernier – tout ce qui dépasse du `viewBox` ne sera pas rendu. `Le viewBox` accepte 4 nombres:
`le modèle viewBox` en SVG ( de grand aperçu )
. ] Comme SVG signifie **Scalable** Graphiques vectoriels, aucune unité n’est nécessaire sur ces nombres. Imaginez-le simplement comme un système de coordonnées abstrait pouvant être agrandi et agrandi à n’importe quelle taille. Ne vous inquiétez pas trop des deux premiers chiffres, vous n’allez probablement pas en avoir besoin. Les deux derniers sont ce qui compte habituellement. Ce sont les dimensions réelles de notre canevas SVG.
`viewBox` ne détermine pas la taille du 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, avec un `viewBox` spécifié prendra toujours tout l'espace disponible et préservera le rapport défini par le `viewBox` – sauf si cela est empêché avec CSS ou définissez les attributs `de largeur` et / ou `de hauteur` .
`width` et `height` sont les attributs qui définissent la largeur réelle et hauteur 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 largeur et la hauteur est différent du rapport entre les valeurs de la vue `viewBox` SVG incline le graphique spécifié dans le `viewBox` en fonction du `width` et `height` de valeurs:
`Le rapport d’aspect de viewBox` est de 3: 2 mais ses attributs de largeur et de hauteur l’affiche sous forme de carré. ( Grand aperçu )
Que se passe-t-il maintenant 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 planches d'art) auront toujours un `viewBox` égal aux dimensions de l'élément exporté et `width` et `height` définie en pixels, égale aux deux dernières valeurs de la `viewBox` . Dans Illustrator, tous les actifs ont une `viewBox` spécifiée de la même manière que dans Sketch et Figma, mais aucun `largeur` et `hauteur` n'a été appliquée.
Groupes
] Les groupes sont le moyen fondamental pour organiser les couches 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 le fonctionnement des groupes entre Illustrator, Sketch et Figma et, heureusement, les fonctionnalités de base des groupes SVG (`…` ) sont à peu près les mêmes.
Transforms
Dans SVG, il y a Vous pouvez appliquer cinq transformations de base à un élément:
`translate` : déplace l'élément sur l'axe vertical et / ou horizontal;
`échelle` : met l'élément à l'échelle sur l'échelle verticale et / ou horizontale axe:
`pivoter` : crée une rotation bidimensionnelle d'un angle donné, spécifiée en degrés autour d'un point donné;
`skew` ( `skewX` ou `skewY` ]): incline l'élément d'un angle donné spécifié en degrés le long des axes vertical ou horizontal; matrice
: la plus complexe et la plus polyvalente des fonctions de transformation disponibles. Comme il faudrait beaucoup de discussions sur l’algèbre pour expliquer le fonctionnement des transformations matricielles, cela dépasse de loin le cadre de cet article. Admettons simplement que la matrice `vous permet d’effectuer de nombreuses transformations compliquées, telles que l’étirement, le serrage, le cisaillement, etc.`
**Note** : Notez que même si certaines de ces les transformations SVG ressemblent beaucoup aux transformations CSS, elles ne sont pas identiques. Par exemple, CSS offre des fonctions de rotation 2D et 3D alors que SVG ne possède qu'une seule fonction de rotation 2D. De plus, bien que CSS accepte différentes unités d'angle telles que les degrés ou les radians, les rotations SVG sont toujours définies en degrés. Par conséquent, une unité peut être omise (par exemple, `rotation (45)` **NOT** `~~ rotation (45deg) ~~` ).
Toutes ces transformations peuvent être appliquées à tout élément SVG, telles que des formes ou des groupes, et sont non destructives, c'est-à-dire qu'elles n'affectent pas la géométrie d'origine du composant. élément. Nous appliquons les transformations via un attribut de `transform` :
`…`
Voyons maintenant les outils de conception! 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. Elles ne sont pas indépendantes des formes et ne seront pas exportées 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 sont exportées en tant que Une fonction `transform = "rotation (…)"` .*
Il est intéressant de noter que la même règle s'applique aux retournements (réflexions) dans Sketch et Figma (pas dans Illustrator!). Chacun d'entre eux a sa propre approche cependant. Sketch utilise une combinaison de mise à l'échelle négative et de translation pour obtenir un effet de retournement, tandis que Figma effectue un retournement au sein d'une fonction de matrice unique.
Border Radius
Nous avons déjà parlé de rectangles arrondis, mais qu'en est-il d'arrondir les autres formes? En fait, dans tous les outils de conception dont nous traitons, vous pouvez arrondir les angles de n’importe quelle forme, pas seulement d’un rectangle.
Mais qu’en est-il de SVG? Les éléments et ont-ils également des attributs `rx` et ? Malheureusement non. Toute forme autre qu'un rectangle, une fois que vous arrondissez l'un de ses coins, sera toujours exportée sous la forme d'un élément traitant les coins arrondis comme faisant partie intégrante de la géométrie de la forme.
Fills And Strokes
Illustrator, Sketch et Figma prennent en charge les remplissages et les traits comme propriétés de base de toutes les formes, et il en va de même en SVG. Par conséquent, les remplissages spécifiés dans les outils de conception sont exportés dans un attribut `fill` et les attributs sont exportés dans un attribut `stroke` . Ne pensez pas que ce soit aussi simple que cela. Le diable est dans les détails.
Remplissage de couleur
Le remplissage de couleur est le plus élémentaire des remplissages disponibles et est spécifié avec une seule couleur unie (par exemple `# 3fd8e2` ). En SVG, cette valeur est placée directement dans l'attribut `fill` (par exemple, `fill = "# 3fd8e2"` ).
Les outils de conception exportent les remplissages de couleur avec des valeurs hexadécimales (par exemple, `# 0000ff` ), même si, en SVG, vous pouvez également utiliser tous les autres systèmes de nommage connus en CSS, tels que les noms de couleurs (par exemple `blue` ), les valeurs RVB (par exemple `rgb (0 , 0,255)` ) ou même des valeurs HSL (par exemple, `hsl (240,100%, 50%)` ).
Remplir l'opacité
Lorsqu'il s'agit de remplir l'opacité, 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 de `fill-opacity` est une approche recommandée, ainsi que 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 effectuer les opérations suivantes:
La méthode la plus recommandée (utilisée par Sketch et Figma) serait la suivante:
Remplissage par gradient
Si vous connaissez bien CSS, vous savez peut-être qu'en matière d'arrière-plan, il est relativement simple de basculer entre les arrière-plans couleur et 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 très différente.
Pour utiliser un dégradé, c'est SVG, vous devez d'abord le définir dans les balises `…` puis vous y référer. un attribut `fill` par exemple:
Ainsi, lors de l’exportation SVG, lorsqu’un remplissage dégradé est utilisé, un dégradé est ajouté au paramètre et référencé dans le code ci-dessous. ] Une chose importante à retenir est que SVG ne prend en charge que les gradients linéaires et radiaux. Les effets tels que le dégradé angulaire ou le maillage dégradé ne seront pas exportés au format SVG.
Motif / Remplissage image
Sketch et Figma proposent également un remplissage Image où un graphique tramé est utilisé pour remplir tout l'élément ou comme élément répété.
L’exportation de trames d’image au format SVG est en fait assez similaire à celle des dégradés. Les images sont définies dans avec un élément `…` puis référencées dans un attribut `fill` :
Pour le faire fonctionner, la référence `# 1945` ] l'image doit être définie *quelque part* . Les outils de conception les incorporeront directement dans SVG en tant qu’éléments bien qu’il ne s’agisse pas d’une approche recommandée en matière de performances. If you really need to use raster images in your SVG, I would suggest to remove the image tag from the SVG and use it a standalone file instead:
Strokes
`stroke` attribute in SVG, same as `fill` attribute accepts colors in various formats, e.g. hex, RGB or HSL. And similarly to `fill`you can control stroke’s opacity with `stroke-opacity`. Also, same as with `fill`strokes can use gradients as their value. All of those effects can be achieved in design tools and successfully exported to SVG.
Stroke Caps And Joins
There are also a few stroke specific attributes though. First, you can control the stroke width. Design tools support it and its exported as `stroke-width` attribute. You can also control ends and joins of the strokes. SVG allows you to define them via `stroke-linecap` and `stroke-linejoin` attributes. There are three possible caps: `butt` cap, `round` cap and `square` cap, and three possible joins: `miter` join, `round` join and `bevel` join. Both caps and joins can be controlled in Illustrator, Figma and Sketch and available caps and joins are matching those available in SVG.
Dashed And Dotted Strokes
Another effect we can achieve with strokes is dashed strokes. In Illustrator and Figma, you can set multiple dashes and gaps, while in Sketch, only a single sequence of a dash and a gap is possible.
SVG allows you to create dashed lines with a `stroke-dasharray` attribute. `stroke-dasharray` allows a sequence of multiple dashes and gaps to be passed as its value which matches Figma’s and Illustrator’s features. It also means Sketch does not allow you to use the full possibilities of SVG in this case.
An interesting edge case is a dotted line. We achieve it by setting the `stroke-linecap` to `round` and a dash’s length to zero, e.g.:
**Note**: *Currently, Figma users experience a bug that doesn’t allow them to create dotted lines. For example, using* `0, 10` or `10, 0` *as Dashes is interpreted the same way as* `10, 10` *and gives a regular dashed line rather than a dotted line. Fortunately, there’s a way to get around it. Rather than using zero, use a very small value, e.g.* `0.0001, 10` *— this should result in perfectly dotted line, as expected.*
Stroke Alignment
There is one other, much more significant difference between design tools and SVG: stroke alignment. Illustrator, Sketch and Figma all allow you to control the alignment of the stroke and set it inside, outside or centre-align it. Mais devinez quoi? SVG 1.1 does not support stroke alignment. In SVG, all strokes are centre-aligned strokes. No inside strokes or outside strokes. Which is why some very weird things happen when you’re exporting your outside- and inside- aligned strokes to SVG.
Illustrator, in such case, exports the shape and its stroke as two separate shapes. So if you apply an inside stroke or an outside stroke to a rectangle in Illustrator, in SVG it will result in a rectangle and a separate element representing the rectangle’s stroke, e.g.:
This behavior has some very important repercussions. For example, you can no longer change the width of the stroke or make it dashed. It also won’t scale the same way as “real” strokes. What is more, Illustrator changes the dimensions of the original shape, e.g. a 100×100 square with a 20-units bold inner stroke will actually export as a 120×120 square to avoid rendering issues. Eventually, it’s just not a stroke. It’s just another shape with a fill.
Figma and Sketch have a different approach though. They faithfully export all strokes as strokes but they recalculate the dimensions of the shape. So if you have a circle with a radius equal to 5 and an inside stroke equal to 2, what you’ll find in your SVG will be a circle with a radius equal to 4 (and a stroke still equal to 2).
This approach allows Figma and Sketch to avoid most of the issues mentioned in the case of Illustrator. However, with some more complicated shapes this technique may turn out not to be precise and the final result to be a bit different than expected. With is why Sketch’s and Figma’s approach is not necessarily better — it’s definitely more semantic, performant and flexible, but Illustrator’s solution is more accurate.
**Note:** *The same problem with stroke alignment applies to CSS as well. The CSS* `border` *property does not support inside or outside alignment neither. However, if you want, you can hack this behavior with* `outline` *and* `box-shadow` *properties.*
Multiple Fills And Strokes
In design tools, you can add multiple fills and strokes per layer. This makes a lot of sense once combined with such attributes as opacity and blend modes. Unfortunately, SVG does not support such a feature. If you export a layer that has fills and/or strokes, it will get multiplied and each of the strokes and fills applied to its own layer.
Shadows, Filters, And Other Effects
Let’s talk about some less popular effects now. SVG is a very powerful language, in fact much more powerful than how it’s usually used on the web. One of the most interesting SVG’s features is a wide range of advanced visual effects, known as SVG filters.
The full scope of SVG filter’s possibilities is far too wide to be described in this article. If you’d like to learn more about them I strongly recommend you to check out some talks and articles on this topic by Sarah Soueidan.
Filters, same as patterns or gradients, need to be defined to apply them later to a layer. Every filter is defined as a `…` 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:
…but you can also create a more complex filter that consists of more than one filter primitive:
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, e.g. *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.
A rectangle with a shadow (Large preview)
This is how our square could look like, once exported to HTML/CSS:
A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:
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.
Blend Modes
Blend modes (such as *DarkenMultiply* or *Overlay*) allow blending two or more elements by combining their values in different ways. Well known to graphic designers (and applications such as Adobe Photoshop), blend modes work in Sketch, Figma and Illustrator as well.
In SVG, blend modes exist as one of the filters. They have their own filter primitive. However, as ’s syntax is fairly complicated, Sketch, Figma and Illustrator use CSS instead:
`.rectangle { mix-blend-mode: overlay; }`
With `mix-blend-mode` browser support being fairly good nowadays, it shouldn’t be a big issue. However, if it’s important for you to ensure bulletproof browser support that includes Microsoft Edge and IE, you will have to replace the CSS blend modes with SVG filters manually.
Same as with multiple fills and strokes, SVG does not support blend modes applied directly on fill and stroke attributes (rather than on whole layers). If you try to export fill and strokes with their own blend modes from a design tool to SVG, the layer will get multiplied and the blend modes applied to respective copies of the layer.
Symbols And Components
In some of the code examples above, you may have noticed an element we haven’t discussed yet: a `…` element. lets us define and reuse elements in SVG, a bit similar to Symbols in Illustrator and Sketch or Components in Figma. Remember defining patterns, gradients and filters within the `…` tags so they can be used in some other part of your SVG code? In fact, any SVG element can be defined and reused this way. Once you defined a shape or a group, you can refer to it in the rest of the document as many times as you like, e.g.:
`…`
You can also reuse much more complex structures using a `…` tag. Symbol acts as a separate body within our SVG and can have its own `viewBox` attribute (see Width, height and viewBox for reference).
Does it mean our design tools’ symbols and components will be exported to SVG symbols? In Illustrator — yes, it does. In Sketch and Figma — no, it doesn’t. Pourquoi? Primarily, because Illustrator symbols are fairly simple and can be easily translated to SVG while Sketch’s symbols and Figma’s components are not that simple at all and exporting some of its features (such as nested overrides) would be very tricky or even impossible.
Text
It wouldn’t be a comprehensive guide if we don’t mention typography. All the design tools offer a wide variety of tools related to text. SVG, even though usually used for graphics, supports text elements too.
Illustrator, Sketch and Figma all support exporting text to SVG and computes text layers into `…` elements in SVG. SVG text elements are rendered like any other graphic elements, shapes etc. with the only difference is that they’re text.
Same as in CSS, we can control all the basic text’s parameters, such as weight, line height or alignment. In fact, if you know how to style text in CSS, you already know how to do it in SVG. However, it may feel a bit old-school. Firstly, all the parameters must be set in inline attributes, similarly to the golden standards of HTML 3.2. Secondly, there are no shorthands. For example, you won’t find anything resembling a `font` CSS property. That’s because SVG text attributes are actually based on CSS 2 spec which takes us back to the 90ties and are way older than CSS we know today.
Nonetheless, all of those attributes are being exported from the design tools perfectly well every time we want some text layer to become SVG code.
Custom Fonts
Unfortunately, things get a bit tricky when it comes to custom fonts. Back in the days, when SVG 1 standard was being created, custom typefaces weren’t a common thing to the web. Everybody used standard fonts, such as Tahoma, Verdana or Courier. Going fancy and using fonts people didn’t have on their machines by default, usually meant rasterizing them ruthlessly and using them as images. However, SVG implemented its own fonts format, named SVG fonts. Today, 18 years after the SVG 1.0 was published, SVG fonts are no longer supported in most of the major browsers.
Luckily for us, SVG plays very nicely with CSS, which means we can use web fonts instead of SVG fonts, e.g.:
`Text`
Let me not get into detail of implementing web fonts here apart from one crucial note: don’t forget about it. In other words, if you use custom fonts in your SVG, you need to remember about providing these fonts to the client, the same as in HTML/CSS.
Outlining Fonts
One may argue that much easier than warring about fonts and all, would be to outline all the text layers and don’t worry about them ever after. Nonetheless, there are at least a few good reasons not to change your text to shapes:
**You can’t edit outlined text — before nor after export.**
Working with outlined text, you need to remember about keeping an editable copy in your Illustrator, Sketch or Figma file at all times. Otherwise, you won’t be able to edit your text layers, once they are outlined. This adds unnecessary complexity to the process. Not to mention editing the outlined text after the SVG was exported. Text in SVG can be updated at any time. Outlined text requires opening the source file every time you want to make the tiniest copy change.
**Outlined text is not accessible**.
Text in SVG, same as other text elements on the web, can be read by screen readers and other accessible technologies. By outlining text layers, you prevent people from using such technologies from accessing your content.
**People expect text to be text**.
Most people using the web know absolutely nothing about SVG, HTML or design tools. If they see text, they expect it to be just that. They may want to select it, copy it or put in a search engine. All of this is possible with text in SVG — unless you outline it.
**Don’t forget about SEO**.
Text in SVG is also accessible and used by search engines. By outlining text, you make your content less searchable and potentially less visible to the public.
Summary
Thank you a lot for going with me on a journey through the ins and outs of working with SVG and design tools. This article definitely does not cover the full spectrum of the topic, although it should be enough to deal with the most common use cases. If you have any questions or queries regarding the things that have not been mentioned here, don’t hesitate to post them in the comments!
(dm, yk, il)
Le meilleur outil 2023 pour ta croissance Instagram !

Source link
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

Blog ARC Optimizer

mai 3, 2019

Un guide pratique sur SVG et les outils de conception

À propos de l'auteur

Why Bother About Outils de conception?

Basic Shapes

Rectangles et arrondis Rectangles

Rectangles arrondis à rayons multiples

Smooth Corners

Lines

Polylines

Flèches

Polygons And Stars

Tous les chemins mènent à

L’élément

Opérations booléennes

Elle est identique, alors pourquoi importe-t-elle?

Groupes

Transforms

Border Radius

Fills And Strokes

Remplissage de couleur

Remplir l'opacité

Remplissage par gradient

Motif / Remplissage image

Strokes

Stroke Caps And Joins

Dashed And Dotted Strokes

Stroke Alignment

Multiple Fills And Strokes

Shadows, Filters, And Other Effects

Blend Modes

Symbols And Components

Text

Custom Fonts

Outlining Fonts

Summary

Articles similaires

Blog ARC Optimizer

À propos de l'auteur

Why Bother About Outils de conception?

Basic Shapes

Rectangles et arrondis Rectangles

Rectangles arrondis à rayons multiples

Smooth Corners

Lines

Polylines

Flèches

Polygons And Stars

Tous les chemins mènent à

L’élément

Opérations booléennes

Elle est identique, alors pourquoi importe-t-elle?

Groupes

Transforms

Border Radius

Fills And Strokes

Remplissage de couleur

Remplir l'opacité

Remplissage par gradient

Motif / Remplissage image

Strokes

Stroke Caps And Joins

Dashed And Dotted Strokes

Stroke Alignment

Multiple Fills And Strokes

Shadows, Filters, And Other Effects

Blend Modes

Symbols And Components

Text

Custom Fonts

Outlining Fonts

Summary

Partager :

Articles similaires