Comment exporter des icônes .svg propres avec Sketch

En tant que concepteurs, nous nous efforçons chaque jour de résoudre des problèmes. Personnellement, j'aime rencontrer des développeurs et essayer de nouvelles solutions. En parcourant les fichiers sources de notre application destinée aux consommateurs chez Practo, j'ai réalisé que 30% d'entre elles étaient composables de dessins (images, icônes, polices). Cela équivaut à environ 3,2 Mo. 200+ tirables. Chaque dessinable en 6 variations. Pour chaque dpi. De plus, la majorité d'entre eux n'ont même pas été utilisés. Avoir des pngs pour drawables pourrait être la solution de facilité, mais sûrement pas la plus optimale.

Android a récemment lancé sa ressource pour la compatibilité SVG avec les versions antérieures. Nous nous sommes donc attelés à la tâche difficile de déterminer les avantages de l’utilisation de SVG au lieu de PNG pour les tirages.

Qu'est ce que le SVG?

Scalable Vector Graphics (SVG) est un format d'image vectorielle basé sur XML pour les graphiques en deux dimensions, avec prise en charge de l'interactivité et de l'animation.

Vecteur Drawable?

Vector drawables vous aide à créer un dessin basé sur un graphique vectoriel XML. En termes simples, tous les fichiers SVG doivent être convertis en dessins vectoriels et regroupés dans un fichier .apk.

Pourquoi devrions-nous utiliser des SVG?

  • Graphiques vectoriels indépendants de la résolution. Pas besoin de faire des icônes pour 6 DPI différents.
  • Un moyen plus simple de créer des animations et des interactions.
  • Économise beaucoup d'espace. 80 à 95% d'espace économisé en utilisant svg au lieu d'un png (pour une icône système 24x24 dp)
  • Plus facile à gérer. Faire un repo est d'autant plus facile.
  • Besoin de fichier dans une seule couleur. Vous pouvez ajouter des couleurs lors de vos développements.
  • Possibilité de fonctionner pour tous les appareils Android. Android a récemment lancé une compatibilité ascendante pour les icônes SVG.
  • Avoir tous les éléments dessinables au format vectoriel est un avantage considérable pour la collaboration croisée.

Problèmes actuels liés à l'exportation Sketch SVG

Pendant que je fabriquais des icônes pour le dépôt central, j'ai découvert un énorme bug. Les SVG exportés n’ont aucun problème. Ouvrez-les sur Chrome ou prévisualisez-les sur mac. Elles ressemblent à ce que vous attendez d'eux. Le problème se pose lorsque vous les convertissez en vecteur dessinable.

Voici à quoi ressemble une icône SVG téléchargée à partir de Google:

J'ouvre maintenant le même SVG sur Sketch et l'exporte à nouveau. Voici le nouveau code SVG:

Icône téléchargée depuis le référentiel d'icônes de Google ouvert dans Sketch
 ic_build_black_24px </ title></pre><pre><desc> Créé avec Sketch. </ desc></pre><pre><defs> </ defs></pre><pre><g id = "Page-1" stroke = "none" stroke-width = "1" fill = "none" fill-rule = "evenodd"></pre><pre><g id = "city" transform = "translate (-171.000000, -375.000000)"></pre><pre><g id = "ic_build_black_24px" transform = "translate (170.000000, 374.000000)"></pre><pre><g id = "Groupe"></pre><pre><polygon id = "Shape" points = "0 0 24 0 24 24 0 24"> </ polygone></pre><pre><chemin d = "M22,7,19 L13,6,9,9 C14,5,7,6 14,4,9 12,1,3 C10,1,1 7,1,0,6 4,7,1,7 L9,6 L6,9 L1,6,4,7 C0. 4,7,1 0,9,10,1 2,9,12,1 C4,8,14 7,5,14,5 9,8,13,6 L18,9,22,7 C19,3,23,1 19,9,23,1 20,3,22,7 L22,6,20,4 C23,1,20 23,1,19,3 22,7 , 19 L22.7,19 ​​Z "id =" Forme "fill =" # 000000 "> </ path></pre><pre></ g>
</ g>
</ g>
</ g>
</ svg></pre><h4>Vous avez compris le bug?</h4><p>Si vous voyez de près, la hauteur et la largeur du premier svg sont de 24. Même la zone de visualisation est «0 0 24 24». Le deuxième svg vient de modifier la hauteur et la largeur en 22. La zone de visualisation est «0 0 22 22». Comment est-ce arrivé?</p><p>Ok, alors Sketch prend juste la zone avec l’icône réelle comme zone de visualisation. Et pour compenser, ils ont une forme de polygone qui est "0 0 24 24". Un problème survient lorsque vous essayez de convertir ce svg en un vecteur dessinable.</p><p>L’outil Android Studio, qui convertit les SVG en fichiers vectoriels, lit la balise <svg> et les entrées qui leur sont associées. Sketch’s svg ayant une zone de visualisation défectueuse, le vecteur que l’on peut dessiner s’avère plus petit et donc incorrect.</p><p>Et avez-vous remarqué la merde Sketch a exporté. Formes et groupes inutiles. La raison de ce problème est que Sketch gâche parfois l'identification des calques masqués, groupés ou masqués lors de l'exportation d'un svg.</p><h4>Comment créer des SVG corrects?</h4><p>Ce n'est vraiment pas si difficile si vous suivez ces étapes avec prudence. Cela peut être un peu fastidieux, mais les résultats finaux en valent la peine.</p><h4>1. Créer un Artboard</h4><p>Créez une planche de la même taille que l’icône / illustration que vous souhaitez exporter.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567199140579.png" /><h4>2. Créez votre icône</h4><p>Sketch est un outil très puissant pour créer des icônes. Propre, rapide et facile. Mais il y a quelques règles à suivre si vous voulez que cela soit exporté proprement.</p><p>Règle 1: essayez de créer des formes avec des remplissages. Les remplissages sont facilement exportables au format vectoriel.</p><p>Règle 2: Si votre forme a une bordure, utilisez une bordure centrale. Les SVG exportés avec des bordures intérieures ou extérieures ne sont pas convertis en dessins vectoriels.</p><p>Avertissements affichés lors d'une tentative d'exportation vers un dessinable:</p><pre>AVERTISSEMENT @ ligne 14 Nous n'échelonnons pas la largeur du trait!
AVERTISSEMENT @ ligne 15 Nous n'échelonnons pas la largeur du trait!
AVERTISSEMENT @ ligne 16 Nous n'échelonnons pas la largeur du trait!</pre><p>Règle 3: n’utilisez aucun masque. Les calques masqués ne sont pas identifiés dans les vecteurs dessinables.</p><p>Règle 4: Pas de groupes. Crée beaucoup de code indésirable qui crée un désordre lors de la conversion en vecteur dessinable.</p><p>Règle 5: Pas de rotation. Aucun retournement. Aucune transformation.</p><p>Votre planche graphique finale devrait ressembler un peu à ceci.</p><img alt="Cette forme suit toutes les règles. Remplissage, bordure intérieure, pas de masque, pas de groupe et pas de transformation." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567199142508.png" /><p>Voici le fichier SVG propre exporté de Sketch en respectant les règles ci-dessus.</p><pre><? xml version = "1.0" encoding = "UTF-8" standalone = "non"?></pre><pre><svg width = "24px" height = "24px" viewBox = "0 0 24 24" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http: / /www.w3.org/1999/xlink "></pre><pre>    
<! - Générateur: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -></pre><pre><titre> 24x24 dp </ title>
<desc> Créé avec Sketch. </ desc></pre><pre><defs></pre><pre><chemin d = "M13,6,9,9 C14,5,7,6 14,4,9 12,1,3 C10,1,1 7,1,0,6 4,7,1,7 L9,6 L6,9 L1,6,4,7 C0,4,7,1 0,9, 10,1 2,9,12,1 C4,8,14 7,5,14,5 9,8,13,6 L18,9,22,7 C19,3,23,1 19,9,23,1 20,3,22,7 L22,6,20,4 C23,1,20 23,1,19,3 22,7,19 L13,6 , 9,9 Z "id =" chemin-1 "> </ chemin></pre><pre><mask id = "mask-2" maskContentUnits = "userSpaceOnUse" maskUnits = "objectBoundingBox" x = "0" y = "0" y = "0" width = "22.0329167" height = "21.9001586" fill = "white">
            
<use xlink: href = "# path-1"> </ use>
        
</ mask>
    
</ defs>
    
<g id = "Page-1" stroke = "none" stroke-width = "1" fill = "none" fill-rule = "evenodd">
        
<g id = "24x24-dp" stroke = "# 2985C3" stroke-width = "2" fill = "# 3B99D9">
            
<use id = "Shape" mask = "url (# mask-2)" xlink: href = "# path-1"> </ use>
        
</ g>
    
</ g></pre><pre></ svg></pre><p>Ce processus long et minutieux permet de s’assurer que les fichiers SVG que vous exportez sont convertis en dessins vectoriels propres. La conversion de plus de 200 icônes en SVG nous a sûrement pris un jour. Mais du côté plus lumineux, la taille de l’application téléchargeable a été réduite de 30%.</p><p>Mise à jour: Sketch 43 a été doté de fonctionnalités majeures. Nous vous en parlerons bientôt.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/article/how-to-transform-your-content-marketing-into-an-effective-digital-strategy-4fa292/" title="Comment transformer votre marketing de contenu en une stratégie numérique efficace">Comment transformer votre marketing de contenu en une stratégie numérique efficace</a><a href="/article/4-unexpected-stressors-that-could-be-slowly-killing-you-and-how-to-fix-them-fdc241/" title="4 facteurs de stress inattendus qui pourraient vous tuer lentement (et comment les corriger)">4 facteurs de stress inattendus qui pourraient vous tuer lentement (et comment les corriger)</a><a href="/article/how-to-boost-both-your-website-accessibility-seo-1d9e27/" title="Comment améliorer à la fois l'accessibilité de votre site Web et le référencement">Comment améliorer à la fois l'accessibilité de votre site Web et le référencement</a><a href="/article/how-to-be-a-food-blogger-for-cats-4538c9/" title="Comment être un blogueur alimentaire pour les chats">Comment être un blogueur alimentaire pour les chats</a><a href="/article/how-to-fix-a-negative-mindset-e75d4d/" title="Comment réparer un état d'esprit négatif">Comment réparer un état d'esprit négatif</a></div></main><div class="push"></div></div><footer style="height:50px">ceadesc.org<!-- --> © <!-- -->2020<!-- --> <a href="https://hi.ceadesc.org/article/how-to-export-clean-svg-icons-with-sketch-cf589c/" title="https://ceadesc.org">ceadesc.org</a></footer></div></div></div></body></html>