Options d'exportation d'Adobe Illustrator - Astuces CSS

C'est moins un extrait de code et plus un rappel pour quelque chose que je recherche souvent. Lors de la création de fichiers SVG dans Adobe Illustrator, il existe plusieurs méthodes pour exporter les fichiers. Les deux méthodes incluent une poignée d'options, dont certaines j'oublie totalement ce qu'elles signifient et ce qu'il faut sélectionner.

Méthode 1: Enregistrer sous…

Vous n'utiliserez probablement pas cette méthode pour enregistrer SVG pour une utilisation sur le Web. C'est en grande partie pour enregistrer un document maître. En fait, vous voudrez peut-être simplement enregistrer directement au format Illustrator. Vous utiliseriez certaines des autres options d'exportation pour exporter vers le Web.

Le moyen le plus courant d'enregistrer un fichier au format SVG dans Adobe Illustrator est de choisir l' File > Save As… option dans le menu principal.

Illustrator ouvrira une boîte de dialogue vous demandant comment nommer le fichier et où l'enregistrer. Plus important encore, il demande également quel type de fichier enregistrer sous lequel, dans ce cas, est SVG. Non compressé SVG (svgz). Plain ol 'SVG.

Cliquez sur le bouton Enregistrer et un autre ensemble d'options apparaîtra. C'est là que ma mémoire a tendance à me faire défaut et je dois parcourir le Web pour trouver des réponses. Voici une capture d'écran d'une manière parfaitement optimale d'enregistrer un fichier SVG dans Adobe Illustrator.

• Profils SVG : Ceci définit le type de document XML sur la balise d' ouverture . SVG 1.1 est la dernière version, couvre le support le plus large et est probablement l'option la plus appropriée. Tout le reste est soit une version plus ancienne, soit un sous-ensemble de SVG 1.1 et je n'ai pas encore rencontré de problème lors de sa sélection.
• Polices> Type : sélectionnez «Convertir en contour» pour garantir que tout texte saisi dans le fichier est exporté avec des chemins vectoriels plutôt que des glyphes. Les glyphes ont une chance de ne pas être rendus, mais les chemins vectoriels sont toujours appréciés.
• Options> Emplacement de l'image : Si des images raster (lire: JPG.webp, PNG, GIF) sont utilisées dans le fichier, nous voudrons sélectionner l'option «Lien». Sinon, l'image raster sera incorporée dans le fichier et cela enlève les avantages de performances dès le SVG en augmentant la taille du fichier pour inclure ces actifs supplémentaires. Mieux vaut les référencer comme des liens et assurez-vous d'inclure ces fichiers sources dans le même répertoire que le fichier SVG.
• Options> Emplacement de l'image> Préserver les capacités d'édition d'Illustrator : Celui-ci a un impact énorme sur la sortie du fichier SVG. Étant donné que vous enregistrez probablement une copie «principale» ici, qui ne nous est pas destinée sur le Web, vous laissez cette case cochée. Cela conservera les éléments propriétaires d'Illustrator (comme les guides) pour la prochaine fois que vous ouvrirez le fichier. Si elle n'est pas cochée, des choses comme celles-ci seront supprimées et perdues.
• Options avancées> Propriétés CSS : Je sélectionne «Attributs de présentation» pour celui-ci car il place les propriétés (par exemple, les remplissages, les traits, etc.) au plus bas niveau de spécificité. Par exemple . Cela stylise l'élément, mais il est très facile de remplacer dans CSS.
• Options avancées> Décimales : si vous avez parcouru le code pour a , vous savez que les valeurs spécifiant ces formes peuvent être très précises. Cependant, ces informations sont souvent trop précises et ajoutent à la taille globale du fichier SVG. Étant donné que vous enregistrez probablement un fichier maître ici, vous pouvez le garder assez élevé, car la taille du fichier n'est pas vraiment un problème.
• Options avancées> Encodage : Je ne suis pas un mordu de l'encodage UTF, mais laisser cela à «Unicode UTF-8» garantit une compatibilité ascendante. En outre, la taille des fichiers UTF-8 a tendance à être plus petite que UTF-16, ce qui est une victoire en soi.
• Options avancées> Responsive : si vous ne cochez pas cette case, vous définissez des attributs fixes heightet widthsur le SVG. Je coche cette option car elle me permet de définir ces attributs soit dans le code, soit dans le CSS.

Méthode 2: Exporter sous

Une autre façon d'obtenir SVG à partir d'Adobe Illustrator est de choisir l' File > Export > Export As… option dans le menu principal. Cependant, il existe un deuxième moyen d'y accéder en utilisant le panneau Actions de l'espace de travail Illustrator.

Cette option est idéale si vous savez que vous allez utiliser ce fichier directement sur le Web et que vous ne prévoyez pas de bricoler la conception plus tard. Il fournit beaucoup moins de paramètres et quelques options qui permettent au fichier d'optimiser davantage le fichier pour de meilleures performances. En fait, il est recommandé de le faire sur une copie du fichier plutôt que sur le fichier maître lui-même.Il existe donc une version qui peut être ouverte et modifiée plus tard dans Illustrator et une autre plus adaptée pour être diffusée sur un site Web de production.

• Style : Nous avons abordé celui-ci plus tôt dans les paramètres de la méthode 1, mais je choisis «Attributs de présentation» ici car c'est un moyen d'organiser les propriétés sur les attributs de plus haut niveau. Cela ajoute de l'ordre au balisage, de la flexibilité dans notre capacité à styliser les attributs suivants avec CSS et conduit souvent à des fichiers de plus petite taille.
• Police : C'est une autre que nous avons couverte ci-dessus, mais en choisissant «Convertir en contours», les glyphes sont échangés contre des chemins vectoriels pour des caractères, ce qui garantit un rendu correct du texte.
• Images : C'est encore un autre que nous avons abordé ci-dessus, mais le choix de «Lien» empêchera les images raster incorporées d'être empaquetées dans le SVG, ce qui rend le fichier beaucoup plus volumineux.
• ID d'objet : ce paramètre donne à Illustrator des ordres de marche sur la manière de nommer les ID dans le balisage. Vous pouvez lui dire de nommer les ID en fonction de la façon dont les couches sont nommées dans le fichier.
• Décimal : moins de décimales dans le code signifie des tailles de fichier plus petites. Définir ceci sur 1est idéal et OK dans de nombreux cas et n'aura pas de différence notable dans la conception, mais 2est généralement sûr. Quoi qu'il en soit, il vaut la peine de vérifier comment le SVG est rendu.
• Minify : Oui, s'il vous plaît! Cela réduit le code pour réduire les espaces et augmenter les performances Web, tout comme la réduction du CSS.
• Responsive : Exactement comme la première méthode, la sélection de cette option est idéale car les attributs fixes heightet widthseraient autrement placés sur le SVG.