Paramètres optimaux pour l'exportation de SVG pour le Web à partir d'Illustrator?

Je cherche à utiliser un logo SVG pour un site Web - pour le rendre beau sur un design réactif pour tous les appareils.

Mais comme il y a des problèmes , je souhaite prendre en charge autant d'appareils et de navigateurs que possible. La vitesse de chargement est également une considération importante. Comment les paramètres d'exportation d'Adobe Illustrator s'intègrent-ils dans tout cela?

Dans Illustrator, il existe plusieurs options d'exportation SVG. Premièrement, quel profil SVG est le meilleur?

Je suppose que SVG Tiny a une taille de fichier inférieure? Est-ce que de nombreux appareils prennent en charge SVG Tiny? Quelles sont les différences les plus importantes? (Sans avoir à lire ce monstre 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.)

Sinon, comment le navigateur prend-il en charge l'option «incorporer»?

Je vous remercie!

PS Il y aura une option de secours alpha-PNG, mais je veux que le SVG soit pris en charge le mieux possible. (À bien y penser, une option de secours - comme un JPG - serait probablement la mieux servie dans ce cas, car alpha-PNG lui-même a besoin d'une solution pour les anciens IE.)

Mise à jour: il existe également plus d'options qui peuvent être configurées. Je ne travaille pas avec du texte, donc le seul pertinent que je vois est la décimale. Pour les logos, quelque chose devant être affiché au 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?

Profils SVG

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

Remarque: SVG Tiny ne réduit pas la taille du fichier, c'est juste un sous-ensemble de SVG qui convient aux 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 visionneurs complets SVG 1.1 devraient être capables d'afficher tout le contenu SVG 1.1 Tiny / Basic (selon les spécifications), et probablement tout le contenu SVG 1.2 Tiny produit par Illustrator.

Remarque sur les polices : 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'incorporer des polices dans des fichiers SVG, pour autant que je sache, cela n'est pris en charge que par le plugin de visualisation SVG d'Adobe.

• SVG: cela incorpore la police au format SVG, qui n'est pas pris en charge par Firefox, mais est une bonne option si vous avez l'intention de ne prendre en charge que les appareils mobiles (qui exécutent généralement webkit).

• Créez 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 à la main.

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 retombe sur une autre police de l'ordinateur de l'utilisateur, choisissez ceci.

• Seuls les glyphes utilisés: vous en voudrez la plupart du temps si vous choisissez d'incorporer la police. Il n'intègre que les caractères utilisés afin de ne pas gonfler la taille de votre fichier.

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

Images : cela n'a d'importance que si vous incluez des images bitmap

• Incorporer: c'est généralement ce que vous voulez , il encode l'image en tant qu'URI de données afin que vous ne téléchargiez qu'un seul fichier au lieu du fichier svg avec ses images bitmap associées.

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

Notez que les images bitmap liées ne s'afficheront pas si le SVG est affiché via la <img>balise, car imgne permet pas le chargement de ressources externes. De plus: webkit a un bogue qui n'affiche pas les images bitmap dans les fichiers svg même si vous les incorporez. En bref: utilisez une <svg>balise simple si vous avez l'intention d'incorporer ou de lier des images bitmap, ne l'utilisez pas <img>.

Préserver les capacités d'édition d'Illustrator

Je préfère enregistrer un fichier .ai comme image source et penser au fichier SVG comme une Export for webfonctionnalité. De cette façon, vous vous concentrez sur la réduction de la taille du fichier et obtenez une copie parfaite de votre fichier vectoriel avec toutes les capacités d'édition. Alors ne choisissez pas ça.

Places décimales

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

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

Codage

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 changez pas cela à moins que vous ne sachiez ce que vous faites.

Optimiser pour Adobe SVG Viewer

Adobe SVG Viewer est un plugin de navigateur à l'époque où les navigateurs ne prenaient pas en charge le SVG de manière native. Je ne sais pas ce qu'il fait, mais ce n'est pas pertinent, ne le vérifiez pas .

Inclure les données de découpage

Cela ajoute un gonflement des métadonnées à votre fichier SVG, sauf si vous prévoyez d'ouvrir votre fichier SVG plus tard dans Illustrator et de trouver vos tranches (si vous en avez), ne cochez pas ceci

Inclure XMP

Plus de métadonnées concernant le fichier, vous pouvez lire sur XMP ici . ne vérifie pas ça

Produisez moins d' <tspan>éléments

Cela sera grisé si vous n'avez pas de texte. SVG ne prend pas en charge les tables de crénage, donc certaines séquences de caractères sembleront trop espacées, c'est-à-dire AVA. Illustrator fonctionne en ajoutant des tspanéléments et en modifiant un peu la position des caractères. Cela ajoute un peu de gonflement au fichier. Ne cochez pas cette option à moins que vous ne vous souciez plus de la taille du fichier que de l'apparence du texte .

Utiliser l' <textpath>élément pour le texte sur un chemin

Cela 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 au personnage au lieu de laisser le travail au navigateur. ne le cochez pas à moins que vous ne vous souciez plus de la taille du fichier que de l'apparence du texte .

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