Fichiers SVG d'Illustrator au Web

Scalable Vector Graphics (SVG) est un format d’image vectorielle qui a vu le jour en 1998. Il a toujours été développé pour le Web, mais c’est seulement maintenant que le Web a commencé à rattraper son retard. On ne peut nier sa pertinence aujourd'hui, jetons donc un coup d'œil aux principes de base pour passer de SVG d'Illustrator au navigateur Web..

Remarque: J'utilise Adobe Illustrator CC pour illustrer certaines choses ici, mais d'autres versions proposent des options et des outils similaires (voire identiques)..

Pourquoi SVG est-il utile??

Le format SVG a été développé et continue d'être mis à jour par le World Wide Web Consortium (W3C). Le W3C est composé d'un groupe de personnes intelligentes, qui s'efforcent de normaliser le Web, ce qui en fait un lieu ouvert et accessible à tous..

SVG est bon pour le Web, surtout de nos jours, car il contourne le problème de la résolution de l'écran. Peu importe la densité de pixels de votre nouveau smartphone, les vecteurs seront toujours affichés aussi clairement que de la neige fraîchement tombée, ce qui n'est pas toujours le cas pour les images pixellisées..

La taille du fichier est toujours un problème avec le Web (personne ne veut attendre qu'une image de 5 To soit chargée dans le navigateur via une connexion mobile) et SVG est donc un format vectoriel simplifié. Il est construit avec XML, et beaucoup de "choses" inutiles sont supprimées, ce qui donne un fichier relativement léger..

Enfin, étant donné ces blocs de construction XML, le contenu d'un fichier SVG peut être manipulé et stylé comme n'importe quel autre élément d'une page Web. Les parties d'un fichier SVG peuvent être isolées, les couleurs peuvent être changées, le poids du trait peut être modifié, la transparence, nous pouvons même appliquer certains filtres (tels que le flou), même animer - tout en CSS et JavaScript.

Quand utiliserais-je SVG??

Les avantages de la qualité de ligne nette et de la possibilité de manipuler un élément graphique vont de soi, mais où en tirer profit? Voici une liste rapide de situations dans lesquelles SVG prend tout son sens:

Graphiques quotidiens: Si vous utilisez un graphique sur un site Web, déterminez s'il peut s'agir d'un format SVG. Si oui, pourquoi ne pas l'utiliser? La photographie serait un exemple où SVG n'a pas de sens, mais pour tout le reste, réfléchissez-y.

Démonstration de spécimens de polices croustillantes. Pourquoi s'embêter avec les formats raster flous?

Icônes: Les sites Web du monde entier sont parsemés d’icônes; ils sont universellement compris (lorsqu'ils sont utilisés correctement) et réduisent le temps nécessaire au traitement d'une interface par un utilisateur. De nos jours, les icônes sont souvent appliquées aux sites Web par le biais de polices Web, mais peuvent également être injectées dans une page au format SVG. Des icônes parfaitement propres et nettes pour tout le monde, charmant.

Je n'ai pas encore fini cette série d'icônes SVG, mais vous pouvez les télécharger et les utiliser…

Logos: S'il y a une chose qu'une entreprise devrait garder précieuse, c'est son identité. SVG offre le meilleur moyen d’afficher la stratégie de marque sur le Web, de manière claire et simple. Les couleurs peuvent être précises, la qualité des lignes est impeccable et le même fichier peut être utilisé de manière répétée sur un site Web, mais modifié en fonction des circonstances. Parfait.

Reconnaître ce logo?

Décoration: Je n'ai pas besoin de vendre cette idée à un tas d'artistes vectoriels, est-ce que je?

SVG décoration gracieuseté de fixate.it

Animation: Grâce à CSS3 et à JavaScript, tout un monde d'animation s'est ouvert sur le Web. SVG est également le véhicule idéal, pour toutes les raisons que j'ai énumérées jusqu'à présent. Pouvez-vous imaginer des boutons qui s'animent lorsque vous les survolez? Des icônes qui vous donnent un retour personnalisé direct? Le ciel est vraiment la limite.

Iconic démontrant les retours SVG

Voilà ce qu'est SVG. Un format vectoriel développé pour le Web. Voyons comment nous pouvons l'utiliser.

Enregistrement d'un fichier au format SVG

Nous allons travailler avec une image très basique, pour montrer ce que fait SVG.

Nouveau document

Ouvrez Illustrator, commencez un nouveau document (Fichier> Nouveau document), donnez-lui un nom si vous le souhaitez et réglez l'Artboard sur 300 x 300 pixels..

Choisissez une image

Peu importe ce que vous utilisez comme vecteur de démonstration à ce stade, mais optez pour quelque chose de relativement simple. J'ai utilisé le glyphe "Pas de pirates autorisés", disponible gratuitement avec la police "Webdings" (je n'aurais jamais pensé l'utiliser pour quoi que ce soit!)

Aller au Glyphes panneau (Type> Glyphes) puis sélectionnez la police "Webdings" pour parcourir les différents caractères disponibles.

Avec le Outil texte sélectionné, cliquez sur l’Artboard, puis double-cliquez votre glyphe de choix pour l'utiliser.

Convertir en contours

Nous allons maintenant convertir ce type de glyphe en contours.

Remarque: SVG supporte effectivement les objets texte, mais pour illustrer les choses à un niveau fondamental, nous opterons pour les chemins.

Sélectionnez le glyphe à l'aide du bouton Outil de sélection (V):

Ensuite aller à Type> Créer des contours.

Super! Nous avons maintenant un objet vectoriel basé sur le chemin.

Économie

Pour enregistrer ce document au format SVG, allez à Fichier> Enregistrer, ou Fichier> Enregistrer sous… Dans la boîte de dialogue qui apparaît, choisissez un emplacement, attribuez-lui un nom de fichier (si vous ne l'avez pas encore fait) et, surtout, sélectionnez le format SVG:

Vous serez ensuite présenté avec un autre dialogue, cette fois avec quelques options SVG.

En vérité, ignorer ces options à ce stade vous sera parfaitement utile. Les valeurs par défaut sont telles que vous les voudriez dans des circonstances normales..

Nous aborderons certaines de ces options un peu plus tard, mais pour le moment, appuyez sur D'accord.

Nous avons un fichier SVG!

Alors alors, ces options SVG

Nous avons sauté les options SVG car vous n’avez pas vraiment besoin de leur accorder beaucoup d’attention. Cependant, par souci de profondeur, jetons un coup d'oeil.

SVG vs. SVGZ

Pour commencer, nous aurions pu choisir deux formats SVG potentiels dans le dialogue de sauvegarde.

SVGZ est un fichier fortement compressé (Zippé, Je suppose) version de SVG. Cela donne une taille de fichier plus petite, mais transforme le code XML du fichier lui-même en charabia, nous empêchant de manipuler les vecteurs via CSS et JavaScript si nous le souhaitions..

Profils SVG

Le paysage en constante évolution du Web et le développement continu de normes Web font que SVG est en croissance constante. Vous pouvez le voir grâce à la première option lors de l'enregistrement d'un fichier SVG: Profils SVG. Les choix de profil actuellement ressemblent à ceci:

Ils signifient (plus ou moins) ce qui suit:

SVG 1.0: La première incarnation de SVG (2001)
SVG 1.1: À peu près la même chose que SVG 1.0, sauf que SVG 1.1 peut être divisé en plusieurs sous-types, ceux-ci étant…
SVG Tiny 1.1: Ceci est le premier sous-type de SVG 1.1 et est optimisé pour le Web mobile. C'est une forme très simple de SVG, conçue pour les "appareils mobiles très restreints". Tiny ne prend pas en charge les dégradés, la transparence, le découpage, les masques, les symboles, les motifs, le texte souligné, le texte barré, le texte vertical ou les effets de filtre SVG..
SVG Tiny 1.1+: Développement léger de SVG Tony 1.1, prise en charge des dégradés et de la transparence.
SVG Basic 1.1: Il s’agit du deuxième sous-type de SVG 1.1 et offre des fonctionnalités pour les appareils les plus capables, tels que les téléphones intelligents. Basic ne prend pas en charge l'écrêtage non rectangulaire et certains effets de filtre SVG.
SVG Tiny 1.2: Ceci était initialement destiné à être la prochaine spécification complète de SVG, mais a fini par être un développement du sous-type Tiny. Ne me demande pas quelle est la différence.

Bientôt, nous pourrons ajouter SVG 2.0 à cette liste. En réalité, les nuances de ces profils ne nous sont en grande partie pas pertinentes. SVG est capable de gérer toutes sortes de choses, mais pour les vecteurs simples, tenez-vous-en à la version par défaut de SVG 1.1 et vos graphismes seront bien, dans la mesure du possible, sur le Web..

Les polices

Les fichiers SVG peuvent contenir beaucoup plus que des chemins vectoriels. Les objets texte en sont un exemple, et le Police de caractère Cette option vous permet de déterminer comment les objets de texte sont traités..

Adobe CEF: Cette opération utilise des indications de police pour afficher une typographie plus raffinée. Il n'est pas supporté par tous les lecteurs SVG, cependant.
SVG: Prise en charge maximale, reconnue par tous les utilisateurs de SVG, mais manquant du raffinement d'Adobe CEF.
Convertir en contours: Supprime toutes les fonctionnalités d'édition, mais conserve le texte exactement de la même manière, où qu'il soit visualisé. Résultats dans un fichier légèrement plus volumineux, car les chemins doivent être décrits, plutôt que de simplement indiquer les caractères présents.

Une partie de l'option de police implique Subsetting. Ceci est pertinent uniquement si vous avez choisi de ne pas convertir votre texte en contours..

La sous-définition incorpore les détails des caractères dans le fichier SVG, ce qui permet au fichier d'afficher des polices qui peuvent ne pas être présentes sur le système de l'utilisateur. L'incorporation de polices entières (évidemment) donne des fichiers beaucoup plus lourds, bien que vous puissiez choisir le nombre de glyphes à inclure..

Les options

Alors que nous sommes sur le sujet de l'intégration, les dernières options restantes ici peuvent également avoir un impact sur la taille du fichier.

De la même manière que pour les polices, les fichiers SVG peuvent contenir des images bitmap. Où tu vois Emplacement de l'image choisissez "incorporer" pour que les images soient incluses dans le fichier sous forme de code, ou choisissez "lien" pour que les images soient simplement référencées. Cela fonctionne de la même manière que placer des images dans Illustrator même et a un impact considérable sur la taille du fichier final..

La dernière case à cocher ici vous permet de conserver les capacités d’édition d’Illustrator si nécessaire. Cela signifie que les détails de tous les calques, filtres et effets, symboles, etc. seront conservés. Encore une fois, laissez cette case décochée si votre fichier SVG est prêt pour la production et que la taille du fichier est importante..

Remarque: Il est recommandé de conserver un fichier .AI fonctionnel à utiliser pour l'édition..

Quelques boutons

Enfin, les trois boutons au bas de la boîte de dialogue des options ont les propriétés suivantes:

Plus d'options: Laissons ces pour l'instant, allons-nous?
Code SVG… : Lance le code XML, contenu dans le fichier SVG, directement dans un éditeur de texte.
Globe: Lance le fichier SVG directement dans un navigateur Web. Juste pour que tu puisses vérifier.

Utiliser le SVG sur le Web

Si vous n'êtes pas habitué à travailler directement avec le Web, le HTML, les navigateurs, etc., vous devez prendre en compte quelques éléments à ce stade..

Navigateurs Web

Tout d'abord, démontrons que votre navigateur peut parfaitement gérer ce format. Clic-droit votre nouveau fichier SVG brillant et choisissez de l'ouvrir avec votre navigateur Web standard:

Les anciens navigateurs, tels qu'Internet Explorer 8 et les versions antérieures, ne prennent pas en charge le format SVG et ne pourront malheureusement pas continuer à jouer..

Plus de détails sur le support SVG et le navigateur peuvent être trouvés sur caniuse.com.

Mais tant que vous utilisez un navigateur moderne, le fichier SVG s'ouvrira et s'affichera sans problème..

La première chose à noter est que le fichier SVG a conservé les dimensions que nous lui avions initialement données. Notre SVG a ouvert à 300 x 300 pixels, l’artboard a imposé les limites extérieures et l’icône de pirate est placée comme il se doit au centre..

Incorporation de SVG dans une page Web

Jusqu'à présent, nous avons créé un fichier SVG et nous l'avons ouvert dans un navigateur pour vérifier qu'il fonctionne. Il est maintenant temps d'utiliser correctement notre fichier dans une page Web.

Pour commencer, nous avons besoin d’une page Web. Ce ne doit pas être quelque chose de plus complexe qu'un fichier vide, avec le .html extension de fichier, enregistrée depuis un éditeur de texte normal. Nous n'avons pas à nous préoccuper de la présence de code dans ce fichier, mais si vous êtes intéressé par les bases du HTML, jetez un coup d'œil à La meilleure façon d'apprendre le HTML.

Voici mon fichier, ouvert dans TextEdit pour Mac OS X, mais vous pouvez utiliser le texte ou l'éditeur de code qui vous convient.

Ce fichier s'ouvrira tel quel dans un navigateur Web, mais nous devons ajouter du code de "balisage" HTML afin d'intégrer le fichier SVG. Il y a quelques approches pour le faire.

le Approche par balise

Tout d’abord, nous pouvons utiliser une balise d’image (que vous utiliserez peut-être pour les fichiers JPG, PNG, etc.) pointant vers le chemin du fichier src = "" attribut. Collez cet extrait dans votre fichier HTML:

En supposant que le chemin du fichier soit correct, votre page HTML s'ouvrira dans un navigateur similaire à celui-ci:

Oui, je sais que l'effet général à ce stade est exactement le même que lorsque nous avons ouvert le SVG directement dans le navigateur Web, mais nous avons maintenant beaucoup plus de pouvoir! Par exemple, nous pouvons immédiatement agrandir le SVG en utilisant le largeur = "" attribut:

Une belle SVG nette, infiniment évolutive!

Cette approche est peut-être la plus facile, mais elle a ses problèmes. Certains navigateurs, pour des raisons de sécurité, limiteront ce que vous pouvez faire au SVG (avec JavaScript, par exemple). Regardons des alternatives.