Importer du SVG
Faire entrer du dessin vectoriel depuis Illustrator, Affinity Designer, Inkscape ou Figma en calques de forme modifiables, et les fonctions SVG qui ne survivent pas.
Un SVG devient ici de la vraie géométrie : les tracés se transforment en calques de forme avec des points d'ancrage et des poignées que vous modifiez à l'outil Nœud, pas en photo d'un dessin. Les groupes du fichier deviennent des groupes dans le panneau Calques.
Il y a quatre portes d'entrée, et toutes lancent le même lecteur :
- Fichier ▸ Importer ▸ SVG… importe dans le projet ouvert
- Fichier ▸ Ouvrir… avec un SVG sélectionné construit un nouveau projet sans titre autour de lui
- Déposer le fichier sur le canevas l'importe ; le déposer ailleurs l'ouvre comme un nouveau projet
- Ctrl+V colle du balisage SVG copié depuis une autre application
Importé depuis un fichier, le groupe enveloppe prend le nom du fichier. Collé depuis le presse-papiers, il s'appelle SVG.
Ce qui devient quoi
| Dans le SVG | Dans Celas Studio |
|---|---|
| g, a, et un svg imbriqué | Un calque de groupe |
| path, rect, circle, ellipse, polygon, polyline, line | Un calque de forme chacun |
| image | Un calque Image |
| linearGradient, radialGradient | Un fond ou un contour en dégradé sur la forme qui l'utilise |
| text | Un calque vide qui tient la place, nommé d'après les premiers caractères |
Toutes les commandes de tracé sont comprises, y compris les arcs elliptiques, et le tout est converti en Béziers cubiques. Un tracé transparent (un O, un beignet, tout ce qui a un trou) reste un seul calque de forme avec ses contours intérieurs intacts, si bien que le trou fonctionne toujours et que l'ensemble reste modifiable comme un seul objet.
Les fonds, la règle de remplissage, les contours, l'épaisseur de contour, les extrémités et les raccords, l'opacité et les dégradés passent tous, et l'épaisseur de contour est mise à l'échelle avec le dessin pour que le poids du trait ait l'air juste. Tout ce qui est marqué masqué dans le fichier arrive masqué.
Les couleurs sont lues sous toutes les formes CSS du modèle de dessin : couleurs nommées, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() et rgba(), les pourcentages étant acceptés dans les formes numériques. Les formes hexadécimales à quatre et huit chiffres emportent leur alpha.
Un rect arrondi dont rx diffère de ry s'importe avec des coins vraiment elliptiques. Quand rx et ry se valent, il reste un simple rectangle porteur d'un rayon de coin, si bien que la poignée de rayon de coin de l'outil Nœud fonctionne encore dessus.
Une <image> liée est résolue par rapport au dossier du SVG lui-même, si bien qu'un dessin qui référence un fichier voisin se charge. Une URI data: intégrée est décodée directement.
Les groupes ne portent aucune transformation
Les transformations du fichier sont cuites dans le dessin lui-même, si bien que les groupes que vous obtenez sont de la pure structure, sans rotation ni échelle propres. Le dessin atterrit exactement là où le fichier dit qu'il devrait, et vous êtes libre de faire tourner ou de mettre le groupe à l'échelle ensuite sans que rien ne glisse en dessous.
Ce qui n'est pas pris en charge
Le lecteur couvre le modèle de dessin, pas toute la spécification SVG. Tout ce qui suit est sauté sans message.
- Les blocs de style CSS et les attributs class : voir l'avertissement plus bas
- use et symbol : les planches de sprites et les instances répétées s'importent vides
- clipPath et mask : l'écrêtage n'est pas appliqué, si bien que du dessin qui était découpé peut apparaître
- Les fonds pattern, qui retombent sur un gris uni
- Les effets filter : flous, ombres portées et le reste
- marker : pointes de flèche et embouts de ligne
- stroke-dasharray et stroke-dashoffset, si bien que les contours en pointillés s'importent pleins
- switch, foreignObject, et l'animation SMIL
- Le texte : la police, la taille et la position sont perdues et il ne reste qu'un calque nommé qui tient la place
- Les unités en pourcentage et relatives, et les transformations écrites dans un attribut style
Préparer un fichier qui s'importe proprement
- Vectorisez le texte avant d'exporter ; le texte n'arrive que comme un calque qui tient la place.
- Décomposez les contours, les pointillés, les motifs et tout effet de filtre dont vous voulez garder l'aspect.
- Relâchez les masques d'écrêtage, ou recadrez le dessin sur ce qui doit être visible.
- Décomposez les symboles et les instances répétées pour que rien ne dépende de use.
- Exportez avec des attributs de présentation plutôt qu'en CSS, et donnez un viewBox au document.
Taille et placement
La largeur et la hauteur du document sont lues en pixels, points, picas, pouces, millimètres ou centimètres, et combinées au viewBox pour mettre le dessin à une échelle sensée. Un fichier dimensionné en pourcentages (le logo web habituel en "width=100%") est importé à la taille de son viewBox au lieu d'être étiré. Le dessin est ensuite centré sur votre canevas.