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.
