Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. SVG
Design

Fichiers SVG: D'Illustrator au Web

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Set of Glossy Labels and Save them for Web
Quick Tip: How to Create a Simple Web Button Set Using the Appearance Panel

French (Français) translation by Nelly Harvey (you can also view the original English article)

Le Scalable Vector Graphics (en français "graphique vectoriel adaptable") est un format d'image vectoriel qui naquit en 1998. Il avait toujours été développé avec le web en tête, mais ce n'est que récemment que le web a commencé à se mettre à jour. On ne peut plus nier son importance, et je vous propose donc de jeter un oeil sur les bases de la création d'un fichier SVG sous Illustrator jusqu'à son utilisation dans le navigateur.

À noter: J'utilise Adobe Illustrator CC pour mes démonstrations, cependant, les autres versions d'Illustrator ont des options et outils similaires, voire identiques.

Pourquoi est SVG utile?

Le format SVG a été développé, et continue d'être maintenu, par le  World Wide Web Consortium (W3C). Le W3C est composé d'un groupe de gens astucieux dont le but est de standardiser Internet, et d'en faire un lieu ouvert et accessible à tout le monde.

SVG est bien pour le web, en particulier de nos jours, puisqu'il résout les problèmes liés aux résolutions d'écran. Peu importe la densité de pixels de votre nouveau smartphone, les graphismes vectoriels seront toujours affichés avec la même clarté, ce qui n'est pas toujours le cas pour les images raster. 

Le poids des fichiers a toujours été un problème quant au web (personne n'a envie d'attendre qu'une image de 5 To soit chargée dans le navigateur au travers d'une connexion mobile), et donc SVG est un format vectoriel simplifié. C'est construit avec XML, et beaucoup de "choses" qui ne sont pas nécessaires ont été retirées, ce qui nous donne un fichier relativement léger.

Et enfin, étant donné ces bases XML, le contenu d'un fichier SVG peut être manipulé et stylisé tout comme n'importe quel autre élément d'une page web. Certaines parties du fichier SVG peuvent être isolées, les couleurs peuvent être changées, l'épaisseur des lignes, ainsi que la transparence peuvent être modifiées, on peut même appliquer certains filtres (tel qu'un flou), et même animer - et tout cela avec CSS et JavaScript.

Quand utiliser SVG?

Les avantages concernant la clarté des lignes et la possibilité de manipuler les éléments graphiques vont d'eux-même, mais dans quelles situations peut-on profiter de ces avantages? Voici une petite liste de situations dans lesquelles l'utilisation de SVG s'impose:

Éléments graphiques: Si vous utilisez des éléments graphiques sur un site, demandez-vous si cela pourrait se faire au format SVG.  Si oui, pourquoi ne pas le faire? La photographie est un bon exemple où l'utilisation de SVG n'aurait pas de sens, mais pour tout le reste, pensez-y.

Demonstrating crisp font specimens Why bother with fuzzy raster formats
Démonstration de la clarté de spécimens de police. Pourquoi s'embêter avec des formats flous raster?

Icônes: Les sites internet partout dans le monde sont remplis d'icônes; elles sont universellement comprises (quand utilisées de manière appropriée) et permettent à l'utilisateur de se familiariser avec une interface en moins de temps. De nos jours, les icônes sont souvent intégrées à travers des polices, mais elles peuvent également être ajoutées grâce au format SVG. Des icônes parfaitement propres et claires pour tout le monde, charmant.

I havent finished this set of SVG icons yet but youre welcome to download and use them
Je n'ai pas encore fini cette série d'icônes SVG, mais vous pouvez les télécharger et les utiliser avec plaisir.

Logos: S'il y a bien quelque chose qu'une compagnie devrait précieusement garder, c'est leur identité. SVG offre tout simplement la meilleure façon possible d'afficher l'identité visuelle d'une marque sur le web. Les couleurs sont précises, la qualité des lignes est parfaite, et un même fichier peut être utilisé plusieurs fois sur un même site, et modifié selon les besoins. Parfait.

Recognise this logo

Vous reconnaissez ce logo?

Décoration: Ai-je vraiment besoin de convaincre un tas d'artistes vectoriels?

SVG decoration courtesy of fixateit
Décoration SVG, grâce à fixate.it

Animation: À travers CSS3 et JavasScript, tout un monde d'animation s'est ouvert au web. SVG est un support parfait grâce aux nombreuses raisons que j'ai énumérées jusqu'à maintenant. Pouvez-vous imaginer des boutons qui s'animent au survol de la souris? Des icônes qui vous donnent du feedback direct et personnalisé? Les possibilités sont sans limites.

Iconic demonstrating SVG feedback
Iconic, un exemple de feedback SVG.

Donc voilà, c'est ça SVG. Un format vectoriel, développé avec le web à l'esprit. Voyons voir comment l'utiliser.

Sauvegarder un fichier au format SVG.

Nous allons utiliser une image toute simple afin de découvrir ce que peut faire SVG.

Nouveau Document.

Ouvrez Illustrator, ouvrez un nouveau document (Fichier > Nouveau Document), nommez-le ce que vous voulez, et donnez-lui une taille de 300px x 300px.

svg-new-document

Choisissez une image

L'image que vous allez choisir pour cet exercice importe peu à ce niveau, mais choisissez quelque chose de relativement simple. J'ai utilisé le glyphe "No Pirates Allowed", qui est disponible gratuitement avec la police "Webdings" (Je n'aurais jamais cru que je l'utiliserais un jour!)

Rendez-vous sur le panneau Glyphes (Fenêtre > Texte > Glyphes) puis choisissez la police "Webdings" afin de pouvoir jeter un oeil aux glyphes disponibles.

svg-webdingst

Sélectionnez l'Outil Texte, cliquez sur le Plan de Travail, puis double-cliquez sur le glyphe de votre choix afin de l'utiliser.

Convertir en Contours

Nous allons maintenant convertir ce glyphe en contours.

À noter: SVG peut prendre en charge les objets de type texte, mais afin d'étudier les bases, nous allons utiliser les tracés.

Sélectionnez le glyphe en utilisant l'Outil de Sélection (V):

svg-select

Puis allez sur Texte > Vectoriser.

svg-outlines

Super! Nous avons maintenant un objet vectoriel composé de tracés.

Enregistrer

Afin d'enregistrer ce document au format SVG, allez sur Fichier > Enregistrer, ou Fichier > Enregistrer sous.. Une fenêtre s'ouvre, choisissez l'endroit où vous souhaitez enregistrer votre fichier, nommez-le (si vous ne l'aviez pas encore fait) et, très important, choisissez SVG en tant que format:

svg-save

Une nouvelle fenêtre s'ouvre, cette fois-ci avec certaines options SVG.

svg-options

Pour être honnête, vous pouvez tout à fait ignorer ces options pour le moment. Les options par défaut sont exactement celles dont vous avez besoin dans une situation normale.

Nous allons discuter de ces options un peu plus tard, mais pour le moment cliquez sur OK.

svg-file

Nous avons un fichier SVG!

Donc maintenant, ces fameuses options SVG

Nous avons laissé les options SVG de côté parce que nous n'en avons pas vraiment besoin. Cependant, afin d'étudier les choses plus en profondeur, jettons-y un oeil.

SVG vs. SVGZ

Pour commencer, nous aurions pu choisir entre 2 différents formats SVG dans la fenêtre d'enregistrement.

svg-save-dialogue

SVGZ est une version très compressée de SVG ("Z" pour "Zipped", je suppose). Cela nous donne un fichier de taille plus petite, mais rend le XML à l'intérieur du fichier incompréhensible, ce qui nous empêche de manipuler les vecteurs avec CSS et JavaScript au cas où on en aurait envie.

Profiles SVG

Les changements constants dans le domaine du web, ainsi que les développements continuels des standards web impliquent une évolution constante de SVG.  Vous pouvez vous en rendre compte grâce à la première option disponible lors de l'enregistrement d'un fichier SVG: Les SVG Profiles. Les choix de profiles actuels sont les suivants:

svg-profiles

Ils veulent plus ou moins dire les choses suivantes:

  • SVG 1.0: La première version de SVG (2001)
  • SVG 1.1: Plus ou moins la même chose que SVG 1.0, sauf que SVG 1.1 peut être divisé en sous-catégories, celles-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 version très simple de SVG, conçue pour des "appareils mobiles très limités". Tiny ne peut pas gérer les dégradés, la transparence, l'écrêtage, les masques, les symboles, les motifs, les textes soulignés, les textes barrés, les textes verticaux, ou encore les filtres d'effets SVG.
  • SVG Tiny 1.1+: Un léger changement de SVG Tiny 1.1 qui ajoute la gestion des dégradés et de la transparence.
  • SVG Basic 1.1: Ceci est le deuxième sous-type de SVG 1.1 et permet l'utilisation de certaines caractéristiques pour les appareils mobiles capables de les gérer, tels que les smartphones. Basic ne peut gérer l'écrêtage non-rectangulaire, ainsi que certains filtres d'effets SVG.
  • SVG Tiny 1.2: À l'origine, ce sous-type était censé devenir la nouvelle version de SVG, mais il finit par devenir une autre version du sous-type Tiny. Ne me demandez surtout pas quelle est la différence.

Nous pourrons bientôt ajouter SVG 2.0 à cette liste. En réalité, ces nuances, d'un profil à un autre, nous importent peu. SVG est capable de gérer toutes sortes de choses, mais pour de simples vecteurs, continuez à utiliser la version actuelle par défaut SVG 1.1 et vos éléments graphiques se porteront très bien, où que ce soit, sur le web.

Polices

Les fichiers SVG peuvent contenir beaucoup plus que des tracés vectoriels. Les objets texte en sont un exemple. L'option Police nous permet de déterminer de quelle façon nos objets seront traités.

svg-fonts
  • Adobe CEF: Cette option utilise le hinting (ou optimisation de rendu) afin d'afficher une typographie plus propre. Toutefois, ceci n'est pas pris en charge par tous les navigateurs.
  • SVG: Prise en charge maximale, reconnu par tous les navigateurs, mais manque le raffinement d'Adobe CEF. 
  • Convertir en Contours: Supprime la capacité à éditer, mais préserve le texte de manière uniforme où qu'il soit vu. Ce qui résulte en un fichier légèrement plus volumineux: les tracés doivent être tous décrits au lieu de pouvoir tout simplement dire quels sont les caractères présents.

Une partie des options inclut le "Subsetting". Cela ne nous intéresse que si nous avons choisi de ne pas convertir notre texte en contours.

svg-subsetting

Le "Subsetting" intègre les détails concernant les caractères dans le fichier SVG, ce qui nous permet d'afficher des polices que l'utilisateur n'a pas forcément sur son système. Intégrer des polices entières rend les fichiers beaucoup plus volumineux, néanmoins vous pouvez choisir combien de glyphes vous souhaitez inclure.

Options

Tant qu'on parle d'intégration, les dernières options peuvent aussi avoir un effet sur la taille du fichier.

svg-embed

Tout comme les polices, les fichiers SVG peuvent contenir des images au format bitmap. Là où vous voyez "Emplacement de l'image", choisissez "Intégrer" afin d'avoir vos images intégrées sous forme de code dans le fichier, ou choisissez "Lier" pour n'avoir qu'une simple référence aux images. Cela marche de manière identique au placement d'image dans Illustrator-même, et influence grandement la taille du fichier final.

La dernière case à cocher vous permet de préserver la capacité à éditer sous Illustrator. Ce qui veut dire que tous les détails des calques, filtres et effets, symboles etc... seront gardés. Encore une fois, ne cochez pas cette case si votre SVG est prêt à être utilisé, et que la taille de votre fichier est importante.

À noter: Il est recommandé de garder une copie au format .AI à utiliser pour tous besoins d'édition.

Quelques boutons

svg-final

Enfin, les trois boutons en bas de la fenêtre d'options vous permettent de faire les choses suivantes:

  • Plus d'Options: Laissons-les de côté pour le moment, d'accord?
  • Code SVG..: Lance directement le code XML, contenu dans le fichier SVG, dans un éditeur de texte.
  • Globe: Ouvre le fichier SVG directement dans un navigateur web. Juste pour que vous puissiez vérifier.

Utiliser le fichier SVG sur le Web

Si vous n'êtes pas habitués à travailler directement sur le web, avec HTML, les navigateurs, et tout le reste, il y a quelques trucs à prendre en compte à ce niveau.

Les Navigateurs Web

Tout d'abord, nous allons voir que votre navigateur est tout à fait capable de bien prendre en charge ce format. Faites un clique-droit sur votre tout nouveau, tout beau, fichier SVG, et ouvrez-le avec votre navigateur habituel:

svg-browser

Les versions les plus anciennes de certains navigateurs, comme Internet Explorer 8 par exemple, ne prennent malheureusement pas en charge le format SVG, et refusent de coopérer. 

More details of SVG and browser support can be found on caniusecom
Plus de détails concernant SVG et la prise en charge de certaines fonctions par différents navigateurs sont disponibles sur le site caniuse.com.

Mais tant que vous utilisez un navigateur moderne, les fichiers SVG s'ouvriront et s'afficheront sans problèmes.

svg-in-browser

La première chose que nous pouvons remarquer est que le fichier SVG a gardé les dimensions originales que nous lui avions données. Notre SVG est ouvert à 300px x 300px, le Plan de Travail a décidé des dimensions des bordures, et l'icône de pirate est placée comme il le faut, au centre.

svg-in-browser-artboard

Intégrer SVG dans une page Web

Pour le moment, nous avons créé un fichier SVG et nous l'avons ouvert dans un navigateur pour nous assurer qu'il fonctionne. Maintenant, il est temps d'utiliser notre fichier de manière appropriée dans une page web.

Pour commencer, il nous faut une page web. Ça n'a pas besoin d'être plus compliqué qu'un simple fichier vide, avec une extension .html, que vous pouvez créer/enregistrer depuis un éditeur de texte normal.  Nous n'avons pas besoin d'avoir de code dans ce fichier, mais si vous êtes intéressés par les bases d'HTML, jetez un oeil à "The Best Way to Learn HTML" quand vous pourrez.

Voici mon fichier, ouvert dans TextEdit pour Mac OS X, mais vous pouvez utiliser n'importe quel éditeur de texte ou de code.

svg-text-editor

Ce fichier s'ouvrira très bien dans le navigateur tel quel, mais nous avons besoin d'ajouter un peu de code HTML afin d'y intégrer du SVG. Il y a plusieurs façon de s'y prendre.

L'approche utilisant la balise <img>

Premièrement, nous pouvons utiliser une balise image (que vous avez peut-être l'habitude d'utiliser pour les fichiers JPG, PNG, etc...) qui pointera vers le chemin exact du fichier dans l'attribut src="". Collez ce bout de code dans votre fichier HTML:

Supposons que le chemin d'accès est correct, votre page HTML s'ouvrira exactement comme ça:

svg-in-browser-html

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

A beautiful crisp SVG infinitely scalable
Un magnifique SVG, indéfiniment adaptable!

Cette approche est probablement la plus facile, mais elle a ses problèmes. Certains navigateurs, pour des raisons de sécurité, peuvent restreindre ce que pouvez faire avec votre SVG (avec JavaScript, par exemple). Jetons un œil à certaines alternatives.

L'approche utilisant la balise <object>

Utiliser la balise <object> est une approche similaire à la précédente, mais vous devez indiquer le chemin d'accès de cette manière:

Le résultat est exactement le même:

svg-in-browser-html

Pour les navigateurs qui ne prennent pas en charge SVG, vous pouvez placer un avertissement entre les balises <object>, pour qu'il soit affiché si le SVG lui-même ne peut l'être.

De nombreux web designers s'accordent sur le fait que cette méthode est la plus fiable et la plus flexible pour utiliser SVG sur une page web, pour le moment. 

L'approche Inline

Nous avons parlé des origines XML de SVG, et si vous ouvrez votre fichier SVG dans votre éditeur de texte, vous allez voir quelque chose de ce genre:

svg-xml

Wouah, tout un tas de non-sens! À vrai dire, le choc initial une fois passé, vous devriez pouvoir y trouver un peu de sens. Nous pouvons utiliser ce code XML inline, en copiant le contenu directement dans notre fichier HTML.

Quand vous vous serez un peu mieux familiarisés avec la structure XML de SVG, vous serez capable de supprimer des petits bouts de vos fichiers, ce qui permettra d'en réduire le poids.

N'hésitez pas à supprimer la ligne du <!DOCTYPE>, le <!--Generator: Adobe Illustrator commentaire, et même la déclaration <?xml si vous en avez envie.

Tout ce dont vous avez vraiment besoin est une version simplifiée, comprenant seulement quelques balises XML:

Notre SVG:

L'approche CSS Background

En utilisant CSS (la syntaxe de stylisation d'HTML) nous pouvons utiliser SVG en tant qu'image d'arrière-plan pour nos éléments sur notre page web.

Nous sommes en train d'aller au-delà des limites de ce tutoriel, mais si ça vous intéresse d'apprendre les bases de CSS, jetez un œil à The Best Way to Learn CSS

Nous pouvons utiliser un fichier CSS séparé et le relier à notre document HTML, ou nous pouvons directement utiliser des balises <style> dans notre HTML. Nos styles ressembleraient à peu près à ça:

Cette règle de style déclare que notre fichier SVG devrait s'afficher en tant qu'image d'arrière-plan de notre élément HTML.

Conclusion

C'est à peu près tout pour ce qui est des bases! Dans ce tutoriel nous avons abordé la création d'un fichier SVG, et son utilisation basique pour le web.

Si vous vous étiez toujours demandé ce qu'était SVG, mais ne saviez pas exactement comment l'utiliser, j'espère que ce tutoriel vous a aidé. Le potentiel de ce format est énorme et est en constante évolution grâce à l'imagination et au génie technique des gens de l'industrie du web et du graphisme.

Nous avons d'autres tutoriels sur l'animation et les interactions avec SVG en préparation, donc gardez l'oeil ouvert!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.