SVG pour les développeurs : comprendre les bases, les avantages et les inconvénients

Les graphiques apportent des expressions uniques sur les sites Web et aident également les développeurs à communiquer sans effort des idées et des concepts profonds aux utilisateurs. C'est un élément clé sur internet et devenu depuis 1999 scriptable, ce qui permet une présentation plus complexe des images sur le web.

Vous connaissez peut-être très bien l'utilisation des différents types de fichiers d'images raster : JPG, PNG et GIF. Rappelons un peu. Avec la prise en charge de 256 couleurs (8 bits), GIF (Graphic Interchange Format) est un format exceptionnel pour l'animation et la transparence, sans compter la transparence alpha. Le format PNG (Portable Network Graphic) est bien meilleur avec la prise en charge de plus de 16 millions de couleurs (24 bits) et de tous les types de transparence, à condition que vous n'ayez pas besoin d'animations.

Le format d'image le plus utilisé sur le Web JPG ou JPEG (Joint Photographic Experts Group), principalement parce qu'il est compressible, prend en charge plus de 16 millions de couleurs ; 24 bits ou 8 bits par pixel pour les niveaux de gris, mais pas de prise en charge de l'animation ou de la transparence. Par conséquent, JPG est le principal format graphique utilisé par les développeurs pour les photographies statiques. Je n'ai pas mentionné Bitmap (BMP) car ce n'est généralement pas un format d'image pour le Web. BMP stocke des données précises de chaque pixel d'une image, ce qui rend les fichiers vraiment volumineux (plus de 150 fois la taille des JPG avec la même résolution) et non idéaux pour les graphiques de sites Web.

Ces formats graphiques dépendant de la résolution sont excellents, surtout lorsqu'ils sont utilisés de manière appropriée. Cependant, ils partagent tous un défaut commun, qui a conduit à l'introduction de SVG - le seul format d'image vectorielle pour le Web.

Qu'est-ce que SVG ?

Scalar Vector Graphics (SVG) est un format d'image basé sur le langage de balisage extensible (XML) qui décrit des graphiques bidimensionnels tels que des chemins, des lignes, des cercles, des motifs, des couleurs de texte, etc. Dans une définition plus simple, il fait référence à un format d'image. avec prise en charge de deux dimensions, dont le comportement et l'existence sont entièrement contrôlés par un fichier texte XML.

Une autre caractéristique intéressante est son évolutivité ; vous pouvez prendre des images SVG à n'importe quelle échelle sans perdre leur résolution. En effet, les SVG rendent les images avec des formes, des nombres et des coordonnées, et non avec des pixels comme dans les formats d'image raster qui rendent les images en définissant la couleur de chaque pixel à peindre.

Voyons comment vous pouvez créer des images SVG et quelques-unes des raisons pour lesquelles vous devriez envisager d'utiliser SVG dans vos projets.

Comment créer des images SVG

Vous pouvez créer des images SVG à l'aide de n'importe quel éditeur de texte, bien que le processus soit un peu technique et nécessite des connaissances en conception et en mathématiques, surtout si vous créez des formes complexes. Imaginez dessiner un avion sur une toile en utilisant uniquement des lignes de codes. Il existe cependant un moyen plus simple, mais utilisons-le pour comprendre les concepts de base de SVG.

Nous utilisons des éléments graphiques SVG pour créer des images SVG dans un éditeur de texte. Le processus consiste simplement à insérer vos éléments graphiques à l'intérieur des balises <svg> et </svg>, en précisant leur coordonnée, dimension, couleur, etc. Par exemple, l'élément <rect> peut être utilisé pour dessiner un rectangle comme on le voit dans le exemple suivant.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Le code ci-dessus dessinera un rectangle bleu de 300x par 300px dans le coin supérieur gauche de votre navigateur s'il est enregistré en tant que fichier .svg et ouvert avec un navigateur. Maintenant, vous vous demandez peut-être pourquoi nous avons deux hauteurs et largeurs dans le document. Comprenons tout le code pour voir pourquoi. Comme mentionné précédemment, votre code SVG doit être écrit à l'intérieur de l'élément racine (<svg> et </svg>) pour indiquer à votre navigateur comment interpréter ces lignes.

Tout comme en HTML, SVG nécessite une déclaration d'espace de noms dans l'élément racine. Dans l'exemple ci-dessus, nous avons fourni le paramètre xmlns "http://www.w3.org/2000/svg" et le W3C a recommandé la version 1.1 de SVG dans l'élément racine. La dimension à l'intérieur de l'élément racine est appelée le point de vue SVG, qui est la fenêtre ou le canevas à travers lequel l'image SVG dessinée dans la balise racine apparaît. Le point de vue doit avoir au moins la même dimension avec l'ensemble de vos objets SVG avant qu'ils ne puissent apparaître dans votre navigateur.

La deuxième ligne est plus facile à comprendre. L'élément <rect>, qui est utilisé pour dessiner des rectangles, incarne les paramètres du rectangle proposé en commençant par la dimension. La largeur de trait décrit l'épaisseur de la ligne tandis que les deux modèles de couleurs RVB informent le navigateur de la couleur à remplir respectivement pour le rectangle et la ligne. C'est assez simple non ?

Maintenant, nous pouvons déplacer le rectangle à l'intérieur de la page en déclarant une valeur pour x et y comme ceci :

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Bien sûr, nous n'oublierons pas d'augmenter la dimension du point de vue pour tenir compte de l'espace supplémentaire que cela prendrait.

Le moyen le plus simple de créer des images SVG consiste à utiliser des outils de dessin tels qu'Adobe Illustrator, Inskape et Sketch. Au lieu de créer à partir de zéro, certaines bibliothèques JavaScript telles que Bonsai.js et D3.js sont de bonnes sources pour les images SVG si vous recherchez des icônes, des formes complexes, etc.

Ajout d'images SVG

L'un des avantages de l'utilisation d'images SVG est la facilité de les intégrer à votre conception. Vous les référencez simplement dans l'attribut src d'une balise img. Cela devrait faire référence au fichier .svg enregistré dans le dossier de votre site Web comme ceci :

<img src='example.svg'>

Alternativement, vous pouvez insérer les codes SVG dans votre document HTML, avec les balises <svg></svg> commençant et terminant le code comme déjà mentionné précédemment.

Vous pouvez également vous référer à l'image SVG dans votre CSS pour une image d'arrière-plan comme celle-ci :

.main-header {
background-image: url(example.svg);
}

Avantages de l'utilisation de SVG pour les développeurs

Le besoin de SVG dans vos projets Web ultérieurs ne saurait être surestimé compte tenu des exigences graphiques actuelles d'Internet. Outre le nombre incalculable de nouveaux appareils dotés d'une résolution et d'une taille d'écran puissantes, les sites Web offrent désormais tellement d'interactivité que, sans avoir le contrôle total de vos graphiques, il pourrait être difficile de fournir des sites Web de qualité professionnelle.

Voici quelques-uns des avantages :

Évolutivité et réactivité

En tant que format d'image non dépendant de la résolution, les SVG peuvent être mis à l'échelle indéfiniment, sans devenir pixélisés. Cela vous permet, en tant que développeur, de fournir des images graphiques de premier ordre à chaque utilisateur, quelle que soit la résolution et la taille de l'écran de leurs appareils. Vous pouvez combiner différents chemins, formes et éléments de texte pour créer des visuels époustouflants qui seront nets et nets à toutes les tailles.

Ceci n'est disponible dans aucun des formats d'image raster à dimensions fixes, simplement parce qu'ils n'auraient jamais assez de données pour remplir chaque espace lorsqu'ils sont extrêmement mis à l'échelle. SVG calcule la distance entre les points pour garder les chemins constamment connectés afin que l'image reste nette à n'importe quelle échelle.

Extrêmement flexible et prend en charge l'animation

Contrairement aux images raster, qui fournissent la copie finale d'une image, les images SVG sont entièrement modifiables en ajustant les codes à l'aide d'un éditeur de texte ou d'outils de dessin spéciaux. En utilisant les noms de classe ou les identifiants de vos éléments SVG, vous pouvez styliser ou animer vos images SVG à l'aide de CSS. L'animation d'images SVG est également possible avec Web Animation API, SMIL ou WebGL.

Plus important encore, vous pouvez intégrer vos images SVG à d'autres technologies et documents de plate-forme Web ouverte de premier plan. Les SVG peuvent être scriptés avec JavaScript et stylisés avec CSS comme HTML.

Convivial pour le référencement et petite taille de fichier

Existant dans un format texte, les images SVG améliorent l'accessibilité d'un site Web, ce qui est un atout majeur dans le classement des pages. Au-delà de cela, les moteurs de recherche sont capables d'indexer le texte des éléments SVG, ce qui permet aux utilisateurs de trouver votre site Web à l'aide de mots-clés dans votre fichier SVG.

SVG se charge beaucoup plus rapidement car il n'a pas de fichier à télécharger et sans avoir besoin d'une requête HTTP. Améliorer la résolution d'un fichier image raster signifie augmenter le nombre de points (pixels). Cela augmentera la taille de l'image, ce qui ralentira le temps de chargement de votre site Web. C'est loin d'être le cas lorsque vous utilisez SVG. En tant qu'image créée à l'aide d'un ensemble d'instructions et de coordonnées, la taille des fichiers SVG est incroyablement petite (lorsqu'elle est optimisée) par rapport à tout autre type de fichier image. Cela se traduit par un temps de chargement plus rapide, des performances de page accrues, un meilleur classement dans les moteurs de recherche tout en améliorant l'expérience utilisateur. Pour plus d'informations à ce sujet, visitez SEO Consultant London

SVG a son propre modèle d'objet de document

SVG existe en tant que document séparé, considéré comme ayant sa propre structure et positionné à l'intérieur du DOM normal. Cette réputation est cruciale pour l'attribut viewBox, qui nous permet de créer un point de vue de n'importe quelle dimension, de dessiner des images sur différentes tailles de canevas et de les afficher sans mettre à jour les propriétés SVG.

SVG est le format de fichier image du futur

Sans l'arrivée d'appareils plus puissants avec une résolution d'écran incroyablement magnifique, les développeurs n'auraient pas à faire face aux maux de tête accablants liés à l'optimisation des images pour différents appareils. Mais cela ne va pas devenir plus facile dans quelques années, couplé à la demande croissante d'interactivité accrue des sites Web.

D'une manière ou d'une autre, gérer ces défis en servant différentes images pour correspondre à la dimension du point de vue des utilisateurs n'est pas rentable. Et dans l'intérêt de la durabilité de l'entreprise en économisant de la bande passante, de l'argent et en améliorant l'expérience utilisateur, les efforts pour passer au format d'image SVG deviennent inévitablement une priorité absolue. Il existe une communauté grandissante de partisans de SVG.

Avant l'introduction par le W3C de SVG 1.1 (deuxième édition) le 16 août 2011, qui est potentiellement en cours de révision pour une version plus récente, SVG 1.0 et 1.1 (première édition) changeaient déjà la façon dont nous traitons les images sur Internet. C'est une promesse de quelque chose qui vaut plus que le format d'image raster ordinaire, qui est toujours très utile dans notre état actuel de programmation Web. SVG n'est pas le meilleur format d'image dans tous les cas. Les versions ultérieures de SVG devraient s'attaquer à certains des inconvénients de SVG ; à discuter plus loin dans cet article.

Quand utiliser le format d'image SVG

Bien sûr, les formats d'image dépendant de la résolution sont toujours les meilleurs pour les photographies et autres images bien détaillées. Voici une liste de cas courants où les formats d'image SVG sont les meilleurs.

1. Logos et icônes
2. Images interactives telles que tableaux, graphiques, cartes, infographies
3. Animations
4. Interfaces d'applications
5. Schémas simples et illustrations
6. Effets spéciaux tels que gluant ou morphing de forme
7. Œuvres d'art de faible intensité et graphismes simples

Inconvénients de SVG pour les développeurs

SVG n'est pas pris en charge par tous les navigateurs : les anciens navigateurs traitent les SVG de la même manière qu'un Windows XP obsolète traiterait les lecteurs flash ou votre Canon EOS 5DSr lorsque vous essayez de les connecter. En un mot, SVG ne fonctionne pas sur les anciens navigateurs ; IE8 et inférieur. Cependant, étant donné que les navigateurs hérités ne font pas vraiment partie d'une cause future, couplé au fait que seule une poignée de personnes les utilisent encore, ce n'est pas une raison majeure de ne pas utiliser les SVG.

SVG ne prend pas en charge autant de détails : étant un mélange de chemins et de points, SVG n'a pas le cadre pour afficher autant de détails que les formats d'image raster basés sur des pixels. SVG ne fonctionne pas avec tout ce qui est capturé avec un appareil photo. Par conséquent, les photos et autres formes de graphiques avec autant de détails sont mieux affichées en utilisant des formats d'image raster en raison de leur prise en charge d'une densité de couleurs plus élevée.

Comprendre le code SVG : alors que les développeurs peuvent être réputés savoir utiliser plusieurs langages de programmation Web, augmenter cette charge s'est avéré être un défi. Le modèle de code SVG n'est pas réellement difficile ou totalement différent des langages de programmation Web. Mais créer ou manipuler des images accrocheuses nécessite un certain effort. Ce n'est pas ce que chaque développeur voudrait investir beaucoup de temps à faire lorsque les images bitmap sont pratiques et ne nécessitent aucun effort pour être intégrées.

Conclusion

Le comportement des graphiques sur un site Web en réponse à son large éventail d'utilisateurs est un aspect important du développement Web aujourd'hui. Et le format d'image SVG est la grande solution, au lieu de rendre plusieurs tailles d'image, comme on le voit généralement dans nos conceptions actuelles. En effet, les navigateurs calculent comment l'image doit être rendue à l'aide d'un ensemble d'instructions qui garantissent des images claires et nettes à n'importe quelle échelle.

Les images bitmap restent les meilleures pour les images très détaillées telles que les photographies, tandis que les images SVG sont utilisées pour les images moins détaillées telles que les icônes, les logos, les graphiques, les infographies, etc. Je vous conseille de vous en tenir aux outils de dessin tels qu'Illustrator ou Sketch for créer des images SVG et des bibliothèques en ligne pour les icônes et les formes populaires. Le codage ne devrait être nécessaire que lorsque vous souhaitez manipuler vos images SVG.

Veuillez nous faire savoir comment vous utilisez SVG et d'autres astuces sympas non partagées ici.