SVG: créer des graphiques HTML5 qui fonctionnent dans n’importe quel navigateur

Divulgation: Votre soutien aide à maintenir le site en marche! Nous gagnons des frais de référence pour certains des services que nous recommandons sur cette page.


Lorsque vous travaillez avec des images sur le Web, il est important d’utiliser le type de fichier correct pour votre objectif. Bien que les formats tels que JPG, PNG et GIF soient les plus connus des utilisateurs Web, ils ne sont pas toujours le choix approprié.

Cet article vous présentera les bases d’un autre type de format d’image: le format SVG ou Scalable Vector Graphics.

SVG: graphiques vectoriels évolutifs

Formats d’images vectorielles et raster

Dans le monde des fichiers image, il existe deux types de format de base: raster et vectoriel. Les formats basés sur un raster sont basés sur des pixels. Ces formats incluent des types de fichiers tels que JPG, PNG et GIF.

Parfois, les images raster sont appelées images bitmap, en raison de leur nature basée sur les pixels. Les pixels, bien sûr, sont les minuscules blocs de construction carrés de la plupart des images numériques que vous voyez sur le Web.

Vous pouvez savoir si une image est une image raster (ou bitmap) simplement en la regardant de près et (généralement) en zoom agrandi. Si vous voyez des millions de minuscules carrés à une résolution suffisamment élevée (en particulier dans les endroits où une couleur change en une autre), vous regardez des pixels, et donc c’est une image raster.

Les graphiques vectoriels, en revanche, sont basés sur des lignes et des courbes, stockées dans du XML basé sur du texte. Ils sont fortement basés sur la théorie mathématique et nécessitent donc des programmes informatiques spéciaux pour créer, ouvrir et modifier.

Les images vectorielles étant des illustrations, elles ne conviennent pas aux photographies. Cependant, une image créée par un artiste à partir d’une photographie peut être créée en SVG. Les logos sont probablement la principale utilisation de SVG sur le Web, ainsi que d’autres illustrations spécifiques à la marque.

Les polices et les polices de caractères sont également créées dans des formats vectoriels, de sorte que les bords des caractères sont nets et propres. Si vous avez déjà essayé d’ajouter du texte au-dessus d’une image raster dans Photoshop ou une autre application de retouche d’image – par exemple, pour créer un en-tête de site Web – puis avez essayé de le redimensionner même un peu, vous avez peut-être remarqué que le texte peut parfois en lambeaux sur les bords.

C’est à cause des différences entre les formats vectoriels et raster; un format SVG est le chemin à parcourir ici.

Avantages de SVG

Le SVG est, comme vous pouvez vous y attendre du nom, un graphique vectoriel. Ils sont indépendants de la résolution. Comparez cela aux graphiques raster, qui dépendent de la résolution du moniteur ou de l’écran sur lequel ils sont affichés.

Ainsi, lorsque vous effectuez un zoom avant sur un graphique raster – un fichier JPG ou PNG, par exemple – vous verrez l’image de plus en plus floue et déformée..

Au format SVG, vous ne le ferez pas. Vous pouvez agrandir et zoomer sans distorsion de l’image elle-même.

Cela est rendu possible en raison de la nature du format SVG. Parce qu’elle est basée sur du texte et non sur des pixels, vous pouvez redimensionner l’image sans perte d’intégrité ou de netteté des détails.

À elle seule, cette fonctionnalité rend les fichiers SVG incroyablement utiles, en particulier pour les images dépendant de la marque telles que les logos complexes et autres graphiques de sites Web. Les SVG peuvent être librement redimensionnés pour de futurs projets, faisant du SVG un format très flexible pour le travail sur le site Web.

Un autre avantage de l’utilisation des fichiers SVG est qu’ils sont plus efficaces pour stocker et transmettre. SVG est une description mathématique vraiment précise au lieu d’une collection massive de pixels individuels. Les fichiers SVG résultants sont plus petits que ne le serait la même image s’ils étaient rendus dans un format raster.

SVG prend en charge l’animation pour chaque élément et aspect de l’image. Parce qu’ils sont basés sur du texte, ils sont également consultables et indexables, ainsi que compressibles.

Inconvénients de SVG

Il y a un inconvénient principal à utiliser des fichiers image au format SVG, et c’est la compatibilité. Vous avez besoin d’un logiciel capable de travailler avec des SVG.

Certains de ces programmes, comme Adobe Illustrator, ne sont pas immédiatement accessibles à tous ceux qui pourraient avoir besoin de travailler avec ces images, contrairement à la pléthore d’éditeurs (dont beaucoup sont gratuits) disponibles pour travailler avec des images raster.

Cependant, Inkscape est un éditeur open source gratuit qui peut gérer les fichiers SVG.

Autres extensions de format vectoriel

En plus du SVG (graphique vectoriel évolutif), les extensions de fichier vectoriel de base incluent:

  • .drw (fichier vectoriel)
  • .eps (PostScript encapsulé)
  • .pct (format graphique bitmap Macintosh)
  • .pif (image vectorielle au format GDF)
  • .ps (Adobe PostScript)
  • .svf (format vectoriel simple)

Éléments SVG en HTML5

À l’aide d’éléments HTML, vous pouvez créer des formes de base avec SVG dans le navigateur. Chacun de ces éléments doit être imbriqué dans la balise.

Ligne

L’élément peut être utilisé pour créer une ligne droite, composée de deux points – un début et une fin. Chaque point, bien sûr, aura deux coordonnées, un «x» et un «y».

Le code ressemblera à ceci:

Vous pouvez également associer d’autres attributs à < ligne > élément: le trait définit la couleur et la largeur du trait contrôle l’épaisseur de la ligne.

Rect

Créez un rectangle à l’aide de l’élément et spécifiez les dimensions avec les attributs largeur et hauteur. Vous pouvez également fournir une couleur avec remplissage et pour le contour du rectangle avec trait, comme illustré dans l’extrait de code ci-dessous:

Cercle

Comme vous vous en doutez, l’élément crée un cercle. Pour créer un cercle avec un rayon de 40 (défini avec l’attribut r), centré à 40 pixels vers le bas et 40 en face du coin supérieur gauche, un remplissage vert et un contour noir, utilisez le code ci-dessous:

Si vous ne spécifiez pas les attributs cx et cy, le navigateur interprétera une valeur par défaut de “0”.

Les autres éléments avec lesquels vous pouvez jouer incluent, et .

Prise en charge du navigateur

SVG est bien pris en charge dans tous les principaux navigateurs disponibles, à l’exception d’IE8 et des versions antérieures.

Qu’en est-il de SWF?

Les concepteurs et développeurs expérimentés connaissent bien SWF – le format des animations et des graphiques Flash – et bien que SVG existe depuis un certain temps, ce n’est que ces dernières années que son support est devenu courant.

La prise en charge de Flash diminuant au profit de HTML5, CSS, JavaScript et SVG, il est essentiel que les professionnels du Web comprennent les différences entre SVG et SWF et apprennent à utiliser les technologies modernes..

Qu’est-ce que SWF?

SWF est un acronyme qui signifie Small Web Format. Il s’agit d’un format de fichier Adobe Flash qui peut être utilisé pour les graphiques, les animations et les widgets d’applet intégrés. Le plugin Flash doit être installé dans un navigateur pour que le contenu SWF s’affiche.

SWF existe depuis longtemps, est pris en charge par un grand nombre de développeurs qualifiés, et il existe de nombreuses animations et didacticiels SWF prédéfinis facilement disponibles.

Similitudes et différences entre SVG et SWF

SWF et SVG sont tous deux des formats de fichiers graphiques vectoriels, et ils peuvent tous deux être scriptés pour créer des animations et de l’interactivité. De cette façon, ils sont similaires. Cependant, il existe de nombreuses façons dont SWF et SVG sont différents.

SVG est un standard ouvert

Le standard SVG a été développé par le World Wide Web Consortium (W3C) et, par conséquent, est complètement ouvert et gratuit à utiliser et à développer. SWF, d’autre part, est un format Flash propriétaire appartenant à Adobe. En 2008, Adobe a supprimé de nombreuses restrictions régissant l’utilisation des fichiers SWF, mais SWF reste un format propriétaire.

SVG est plus facile à utiliser

Le code SVG est du texte XML lisible par l’homme. Les SVG peuvent être créés à l’aide de n’importe quel éditeur de texte brut et la création de SVG simples est facile à faire et peut être apprise rapidement par toute personne familiarisée avec les langages Web tels que HTML, CSS et JavaScript. Les fichiers SWF doivent être créés et modifiés avec des programmes complexes tels qu’Adobe After Effects ou des alternatives open source telles que Motion-Twin ActionScript 2 Compiler.

De plus, l’écriture de scripts SVG pour l’animation et l’interactivité peut être effectuée avec CSS et JavaScript, des langages avec lesquels chaque concepteur et développeur Web travaille quotidiennement. Les fichiers SWF, quant à eux, sont scriptés avec le code ActionScript d’Adobe qui est similaire à JavaScript mais pas identique, et la plupart des développeurs le traitent beaucoup moins fréquemment..

L’ajout d’un SVG à un site Web est également aussi simple que de déposer le code dans un document HTML en ligne avec d’autres éléments HTML. Alternativement, les SVG peuvent être incorporés dans un document HTML. Les fichiers SWF doivent être intégrés dans un document HTML.

SVG est meilleur pour le référencement

Étant donné que les SVG sont écrits en texte brut, ils peuvent être lus et indexés par les moteurs de recherche. Les fichiers SWF, en revanche, sont des fichiers binaires difficiles à interpréter pour les moteurs de recherche. Par conséquent, si vous utilisez un SVG ou un SWF pour diffuser du contenu, il vaut mieux utiliser SVG si le trafic des moteurs de recherche est important pour votre site Web..

Le support SVG se développe

Bien que la prise en charge des fichiers SWF soit disponible dans la plupart des navigateurs Web de bureau, il n’en va pas de même pour les navigateurs mobiles. La prise en charge du contenu Flash, y compris les fichiers SWF, a été largement supprimée des navigateurs mobiles. La prise en charge de SVG, d’autre part, est offerte par tous les navigateurs modernes et la prise en charge de nouvelles fonctionnalités est continuellement ajoutée..

SVG et SWF prennent en charge plusieurs types de supports

Le contenu audio et vidéo peut être intégré directement dans un fichier SWF. SVG n’inclut pas la prise en charge du contenu audio et vidéo. Cependant, d’autres fonctionnalités HTML5 prennent en charge le contenu audio et vidéo, et ces fonctionnalités peuvent être intégrées directement dans SVG. Par conséquent, l’audio et la vidéo peuvent être intégrés dans un SVG, mais la lecture est gérée par d’autres joueurs, et non par la norme SVG elle-même.

Résumé SWF

Alors que les graphiques basés sur Flash régnaient sur le Web dans le passé, l’avenir appartient à SVG animé avec CSS et JavaScript. Les ressources suivantes aideront les concepteurs de sites Web et les webmasters à maintenir leurs compétences à jour et à commencer à utiliser SVG dans leurs projets..

Ressources SVG

Il existe de nombreux articles, tutoriels et guides gratuits pour vous aider à démarrer avec SVG. Voici quelques-uns des meilleurs.

Apprenez les bases

Si vous débutez avec SVG, consultez ce didacticiel de Creative Bloq pour créer des formes simples et utiliser des remplissages et des dégradés. Une deuxième option qui couvre un grand nombre des mêmes techniques de base est ce guide pour démarrer avec SVG d’Envato Tuts+.

Utiliser un logiciel graphique pour créer des SVG

Si vous voulez créer quelque chose de plus complexe que des formes simples, vous voudrez travailler avec un programme de graphiques vectoriels comme Adobe Illustrator qui peut exporter des fichiers au format SVG. Ce guide rapide de CSS-Tricks vous montrera comment utiliser Illustrator pour créer une annonce animée qui utilise uniquement HTML et CSS. Une autre excellente ressource pour apprendre à utiliser illustrator pour créer des SVG provient du Web Designer Depot.

Si vous n’avez pas accès à Adobe Illustrator, vous n’avez pas de chance. Inkscape est un programme de graphiques vectoriels de qualité professionnelle qui est gratuit et open-source. Il existe également de nombreux didacticiels intéressants disponibles sur Inkscape qui vous aideront à démarrer avec le programme et vous montrer comment exporter vos créations au format SVG..

Apprenez les techniques SVG avancées

Si vous voulez vraiment maîtriser SVG, il y a deux ressources que vous devez passer du temps à réviser:

  • Le tutoriel SVG du Mozilla Developer Network.
  • Une introduction SVG pour les navigateurs d’aujourd’hui, un ebook gratuit du W3C.

Ces deux ressources sont vastes et couvrent toute l’étendue de la réflexion et des pratiques actuelles en matière de programmation SVG. Ces ressources ne sont pas destinées aux débutants, mais si vous êtes à l’aise avec HTML et CSS et que vous souhaitez maîtriser le travail avec SVG, vous êtes prêt à les utiliser..

Créer des animations SVG

SVG peut être utilisé pour créer des animations vraiment impressionnantes. Une fois que vous êtes à l’aise avec SVG, si vous voulez apprendre à créer des animations SVG impressionnantes, consultez ces ressources:

  • Un tutoriel de David Walsh pour créer des animations SVG en utilisant CSS et JavaScript.
  • Un didacticiel complet de Jenkov couvrant tous les aspects du travail avec SVG, y compris les animations CSS et les scripts JavaScript.
  • Liste des huit principales bibliothèques JavaScript de Hongkiat pour créer des animations SVG.

Autres ressources

  • Tutoriel SVG de Mozilla Developers Network: un tutoriel en cours qui traite de tous les aspects du format SVG à utiliser dans les navigateurs Mozilla.
  • L’introduction simple à l’animation SVG: un excellent tutoriel écrit par David Walsh.
  • Introduction et ressources ImageMagick: une collection d’outils graphiques, dont certains pour PostScript.

Conclusion

L’utilisation de SVG dans vos créations graphiques et votre conception de sites Web n’est peut-être pas quelque chose que vous avez l’habitude de franchir, mais c’est sans aucun doute un effort utile pour vous familiariser avec eux. J’espère que ce qui précède vous guidera dans votre apprentissage.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector