Paramètres optimaux pour exporter des fichiers SVG pour le web depuis Illustrator?

Question

Je cherche à utiliser un logo SVG pour un site web — pour le rendre superbe sur un design responsive pour tous les appareils.

Mais comme il y a des problèmes, je veux soutenir autant de dispositifs et navigateurs que possible. La vitesse de chargement est également une considération importante. Comment les paramètres d'exportation dans Adobe Illustrator s'inscrivent-ils dans tout ça ?

Dans Illustrator, il y a plusieurs options pour l'exportation en SVG. Tout d'abord, quel profil SVG est le meilleur ?

Je suppose que SVG Tiny a une taille de fichier inférieure ? Beaucoup de dispositifs supportent-ils SVG Tiny ? Quelles sont les différences les plus importantes ? (Sans avoir à lire ce monstre de la W3.)

Deuxièmement, je suppose que la meilleure option pour l'emplacement de l'image est "lien" ? (Voir la description après le point d'exclamation.)

Alternativement, quel est le support du navigateur pour l'option "intégrer" ?

Merci !

P.S. Il y aura une option de secours alpha-PNG, mais je veux que le SVG soit supporté autant que possible. (En y réfléchissant, une option de secours — comme un JPG — serait probablement la mieux adaptée dans ce cas, étant donné que l'alpha-PNG lui-même nécessite une solution pour les anciens navigateurs IE.)

Mise à jour : Il y a aussi d'autres options qui peuvent être configurées. Je ne travaille pas avec du texte, donc la seule pertinente que je vois est le nombre de décimales. Pour les logos, quelque chose devant être affiché en maximum 200x200px (donc 400x400px sur les écrans Retina), est-ce que "3" est le meilleur réglage ? Ou "2" pour minimiser la taille du fichier ?

Answer 1

Profils SVG

• SVG 1.0 : tous les navigateurs modernes sur ordinateur et mobile prennent en charge SVG 1.1, donc ne choisissez jamais cette option.
• SVG 1.1 : Vous voudrez presque toujours choisir cela.
• SVG Tiny/Basic : il s'agit d'un sous-ensemble de SVG destiné aux appareils mobiles. Seuls quelques appareils prennent en charge SVG Tiny et non la spécification complète, donc optez pour SVG 1.1.

Remarque : SVG Tiny ne réduit pas la taille du fichier, c'est juste un sous-ensemble de SVG adéquat pour les appareils à faible puissance de traitement. Il supprimera les dégradés, l'opacité, les polices intégrées et les filtres.

Erik Dahlström dit :

Tous les visualiseurs complets SVG 1.1 devraient être en mesure d'afficher tout le contenu SVG 1.1 Tiny/Basic (selon les spécifications), et probablement tout le contenu SVG 1.2 Tiny que produit également Illustrator.

Polices remarque : si vous n'avez pas de texte dans votre image, ce paramètre n'a pas d'importance.

• Adobe CEF : n'utilisez jamais cette option si vous avez l'intention de l'afficher dans les navigateurs. C'est la manière d'Adobe d'intégrer des polices dans les fichiers SVG, à ma connaissance cela n'est pris en charge que par le plugin visualiseur SVG d'Adobe.

• SVG : cela intègre la police en SVG, qui n'est pas prise en charge par Firefox, mais c'est une bonne option si vous avez l'intention de prendre en charge uniquement les appareils mobiles (qui exécutent généralement webkit).

• Créer des contours : vous voudrez le faire la plupart du temps, sauf si vous avez une grande quantité de texte. Si vous avez une grande quantité de texte, vous voudrez intégrer la police avec WOFF mais vous devrez le faire manuellement.

Sous-ensemble :

• Aucun : cela annulera le paramètre précédent et n'intégrera aucune police, si vous ne vous souciez pas que la police soit remplacée par une autre police sur l'ordinateur de l'utilisateur, choisissez ceci.

• Seuls les glyphes utilisés : vous voudrez généralement cela si vous choisissez d'intégrer la police. Il intègre uniquement les caractères utilisés afin de ne pas augmenter la taille de votre fichier.

• [reste du sous-ensemble] : c'est assez clair, vous pouvez choisir d'inclure toute la police ou des sous-ensembles de celle-ci. Cela n'est utile que si votre SVG est dynamique et que le texte pourrait changer en fonction de l'entrée de l'utilisateur.

Images : cela importe uniquement si vous incluez des images bitmap

• Incorporer : c'est généralement ce que vous voulez, cela encode l'image sous forme d'URI de données afin que vous n'ayez à télécharger qu'un seul fichier au lieu du fichier svg avec ses images bitmap associées.

• Lier : utilisez ceci uniquement si vous avez plusieurs fichiers svg qui font référence à un fichier bitmap (pour qu'il ne soit pas téléchargé à chaque fois qu'il rend le fichier svg).

Remarquez que les images bitmap liées ne s'afficheront pas si le SVG est affiché à travers la balise , car img n'autorise pas le chargement de ressources externes. De plus : webkit a un bug qui n'affiche pas les images bitmap dans les fichiers svg même si elles sont intégrées. En bref : utilisez une balise simple si vous avez l'intention d'intégrer ou de lier des images bitmap, n'utilisez pas .

Préserver les capacités de modification d'Illustrator

Je préfère enregistrer un fichier .ai comme image source, et considérer le fichier SVG comme une fonction Exporter pour le web. De cette façon, vous vous concentrez sur la réduction de la taille du fichier et avez une copie vierge de votre fichier vectoriel avec toutes les capacités de modification. Donc ne choisissez pas ceci.

Nombre de décimales

La valeur par défaut de 3 est un paramètre raisonnable et vous pouvez généralement l'oublier.

Cependant, si vous avez des chemins vraiment compliqués avec de nombreux points, réduire ce paramètre à 1 ou même à 0 réduira considérablement la taille du fichier. Mais vous devez faire attention car les segments de Bézier sont très sensibles à ce paramètre et ils pourraient sembler un peu déformés. Donc si vous réduisez ce paramètre, assurez-vous toujours qu'il est acceptable visuellement dans un navigateur.

Encodage

L'explication derrière l'encodage des caractères est plutôt technique, et ne concerne que les fichiers svg avec du texte. L'encodage le plus probable dont vous avez besoin est UTF-8, ne le changez pas à moins de savoir ce que vous faites.

Inclure les données de découpe

Cela ajoute du bloat de métadonnées à votre fichier SVG, sauf si vous prévoyez d'ouvrir votre fichier SVG ultérieurement dans Illustrator et de retrouver vos découpes (si vous en avez), n'activez pas ceci

Inclure XMP

Davantage de métadonnées concernant le fichier, vous pouvez en savoir plus sur XMP ici. ne cochez pas ceci

Adaptatif

Notez que ce paramètre éliminera la propriété de hauteur et de largeur de l'élément racine svg, en supposant que vous redimensionnerez l'image incluse via css. Cependant, dans certains cas, vous voudrez que chaque image déclare sa taille. Assurez-vous de désactiver ce paramètre dans ces cas-là.

Produire moins d'éléments

Ceci sera grisé si vous n'avez pas de texte. Les SVG ne supportent pas les tables de césures, donc, certaines séquences de caractères sembleront trop espacées, par exemple AVA. Illustrator contourne cela en ajoutant des éléments tspan et en ajustant légèrement les positions des caractères. Cela ajoute un peu de bloat au fichier ne cochez pas ceci à moins que vous ne vous préoccupiez davantage de la taille du fichier que de l'apparence du texte.

Utiliser l'élément pour le texte sur un chemin

Ceci sera grisé si vous n'avez pas de texte sur un chemin. Les navigateurs ont tendance à varier beaucoup lorsqu'il s'agit de placer du texte sur un chemin, donc Illustrator essaie d'être utile en appliquant la rotation et la position aux caractères au lieu de laisser cette tâche au navigateur. ne cochez pas ceci à moins que vous ne vous préoccupiez davantage de la taille du fichier que de l'apparence du texte.

---

En général, je vous recommande de vous renseigner sur le SVG en général, vous verrez qu'il ressemble beaucoup à HTML et qu'il vous permet de modifier des choses qui ne peuvent pas être faites dans Illustrator.

Answer 2

Mise à jour de l'excellente explication de @methodofaction.

Les options d'exportation ont un peu changé dans la version actuelle d'Illustrator.

1. Le visualiseur Adobe SVG n'existe plus.

2. Mais plus important encore, il y a un nouveau paramètre "responsive" qui est coché par défaut je crois. Notez que ce paramètre éliminera la propriété de hauteur et de largeur de votre nœud racine svg, en supposant que vous mettrez à l'échelle le graphique inclus via css. Dans certains cas cependant, vous voulez que le graphique individuel déclare sa taille. Assurez-vous de décocher ce paramètre dans ces cas.