Paramètres optimaux pour l’exportation de fichiers SVG pour le Web à partir d’Illustrator?
Je souhaite utiliser un logo SVG pour un site Web afin de le rendre superbe sur un design réactif pour tous les appareils.
Mais depuis il y a des problèmes , je souhaite prendre en charge autant de périphériques et de navigateurs que possible. La vitesse de chargement est également un facteur important. Comment les paramètres d'exportation dans Adobe Illustrator s'intègrent-ils dans tout cela?
Dans Illustrator, il existe plusieurs options pour l'exportation SVG. Tout d’abord, quel est le meilleur profil SVG ?
Je suppose que SVG Tiny a une taille de fichier inférieure? De nombreux appareils prennent-ils en charge SVG Tiny? Quelles sont les différences les plus importantes? (Sans avoir à lire ce monstre W .)
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 "incorporée"?
Je vous remercie!
P.S. Il y aura une option de secours alpha-PNG, mais je veux que le SVG soit pris en charge le mieux possible. (En y réfléchissant bien, une option de secours - comme un JPG - serait probablement la mieux servie dans ce cas puisque l'alpha-PNG lui-même a besoin d'une solution pour les anciens IE.)
Mise à jour: Il y a aussi plus d'options qui peuvent être configurées. Je ne travaille pas avec du texte, la seule chose pertinente que je vois est la décimale. Pour les logos, quelque chose doit être affiché au maximum 200x200px (donc 400x400px sur les écrans Retina), "3" est-il le meilleur réglage? Ou "2" pour réduire la taille du fichier?
Profils SVG
- SVG 1.0: tous les navigateurs de bureau et mobiles modernes supportent SVG 1.1, aussi ne choisissez 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 supporte SVG Tiny et pas la spécification complète, alors optez pour SVG 1.1.
Remarque: SVG Tiny ne réduit pas la taille du fichier, il s'agit simplement d'un sous-ensemble de SVG qui convient aux périphériques à faible puissance de traitement. Il supprimera les dégradés, l'opacité, les polices incorporées et les filtres. Erik Dahlström a déclaré: Tous les téléspectateurs complets de SVG 1.1 devraient pouvoir afficher tout le contenu SVG 1.1 Tiny/Basic (selon les spécifications) et probablement tout le contenu SVG 1.2 Tiny que Illustrator produit également.
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 dont Adobe incorpore les polices dans les fichiers SVG. Autant que je sache, cela n'est pris en charge que par le plug-in de visualisation SVG d'Adobe.
SVG: cela intègre la police SVG, qui n'est pas prise en charge par Firefox, mais constitue une bonne option si vous souhaitez prendre en charge uniquement 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 souhaiterez intégrer la police avec WOFF, mais vous devrez le faire à la main.
Sous-configuration :
Aucune: cette option annulera le paramètre précédent et n'intégrera aucune police. Si vous ne tenez pas à ce 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'incorpore que les caractères utilisés pour ne pas gonfler la taille de votre fichier.
[reste de sous-ensemble]: ceci 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 des entrées de l'utilisateur.
Images : cela n'a d'importance que si vous incluez des images bitmap
Embed: c'est généralement ce que vous voulez , il code l'image sous forme d'URI de données afin que vous puissiez simplement télécharger un fichier à la place du fichier svg avec son compagnon. images bitmap.
Lien: utilisez-le uniquement si vous avez plusieurs fichiers svg qui référencent un fichier bitmap (afin qu'il ne soit pas téléchargé à chaque fois qu'il restitue le fichier svg).
Notez que les images bitmap liées ne s'afficheront pas si le SVG est affiché via la balise <img>, Car img n'autorise pas le chargement de ressources externes. En outre: 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 simple balise <svg> Si vous souhaitez incorporer ou lier des images bitmap, n'utilisez pas <img>.
Conserver les fonctionnalités d'édition Illustrator
Je préfère enregistrer un fichier .ai comme image source et considérer le fichier SVG comme une fonction Export for web. De cette façon, vous vous concentrez sur la réduction de la taille du fichier et disposez d'une copie vierge de votre fichier vectoriel avec toutes les fonctionnalités d'édition. Alors ne choisissez pas cela.
Décimales
La valeur par défaut 3 Est un paramètre sain et vous pouvez l’oublier la plupart du temps.
Cependant, si vous avez des chemins très 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 peuvent sembler un peu déformés. Donc, si vous baissez ce paramètre, assurez-vous toujours qu'il semble acceptable dans un navigateur.
Encodage
L'explication derrière le codage de caractères est plutôt technique et ne concerne que les fichiers svg avec du texte. Le codage le plus probable dont vous avez besoin est UTF-8 , ne le changez pas sauf si vous savez ce que vous faites.
Optimiser pour Adobe SVG Viewer
Adobe SVG Viewer est un plug-in de navigateur de l'époque où les navigateurs ne prenaient pas en charge SVG de manière native. Je ne sais pas ce que ça fait, mais c'est sans importance, ne cochez pas cette case .
Inclure les données de découpage
Cela ajoute un volume de métadonnées à votre fichier SVG, sauf si vous envisagez d’ouvrir votre fichier SVG ultérieurement dans Illustrator et de rechercher vos tranches (si vous les avez). ne cochez pas cette option
Inclure XMP
Plus de métadonnées concernant le fichier, vous pouvez lisez sur XMP ici . ne cochez pas cette case
Affiche moins d'éléments <tspan>
Ce sera grisé si vous n'avez pas de texte. SVG ne supporte pas les tables de crénage, donc certaines séquences de caractères sembleront trop espacées, c'est-à-dire AVA. Illustrator fonctionne en ajoutant tspan éléments et en modifiant légèrement les positions des caractères. Cela ajoute un peu de masse au fichier . Ne cochez cette case que si vous vous souciez plus de la taille du fichier que de l'apparence du texte .
Utilisez l'élément <textpath> Pour du texte sur un chemin
Cela sera grisé si vous n'avez pas de texte sur un chemin. Les navigateurs ayant tendance à varier beaucoup lorsqu'il s'agit de placer du texte sur un chemin, Illustrator essaie de l'aider en appliquant la rotation et la position au caractère au lieu de laisser le travail au navigateur. ne cochez cette case que si vous vous souciez plus de la taille du fichier que de l'apparence du texte .
En général, je vous recommanderais d’examiner SVG en général, vous constaterez que cela ressemble beaucoup au HTML et que cela vous permet d’ajuster des choses qui ne peuvent pas être réalisées dans Illustrator.