Lors de la conception d'un site Web convivial, vous pourriez rencontrer des difficultés avec les images, en particulier avec l'image résolution. La qualité de l'image est importante pour bien faire - moins d'éléments semblent moins professionnels sur une page qu'un logo, une icône ou une photo déformés et mal dimensionnés.
Et ce problème n'est aggravé que par la réactivité conception. Les visiteurs consultent votre contenu sur les ordinateurs de bureau et les smartphones, donc, avec le reste de votre contenu, vos images doivent être optimisé quel que soit l'appareil . Ne serait-il pas agréable d’avoir un format numérique qui donne aux images une belle apparence, quelle que soit leur taille?En fait, il y en a. Il s'appelle le format SVG , et il est parfait pour les images non photographiques sur les sites Web.
Les SVG sont en quelque sorte un tour de magie dans conception de sites Web - non seulement ils génèrent des graphiques nets à n'importe quelle échelle, mais ils sont également optimisés pour le référencement, programmables, souvent plus petits que les autres formats et capables de animations dynamiques. Il y a beaucoup de choses à découvrir et à apprendre.
Dans ce guide, je vais couvrir tous les principes de base que vous aurez besoin de savoir pour commencer à travailler avec les SVG. Je vais vous expliquer ce que sont ces fichiers, comment ils fonctionnent sous le capot, quand les utiliser et comment commencer à créer des fichiers SVG vous-même.
Qu'est-ce qu'un fichier SVG?
An Le fichier SVG, abréviation de fichier graphique vectoriel évolutif , est un type de fichier graphique standard utilisé pour le rendu d'images bidimensionnelles sur Internet.
Unli Comme d'autres formats de fichiers image populaires, le format SVG stocke les images sous forme de vecteurs. Cela pose la question: Qu'est-ce qu'un graphique vectoriel exactement?
Raster vs Vector
Il y a plus de quelques formats de fichiers image actuellement utilisés sur le Web, que nous pouvons diviser en deux catégories: graphiques raster et graphiques vectoriels .
Vous connaissez probablement les formats communs PNG et JPEG. Il s'agit de formats graphiques matriciels, ce qui signifie qu'ils stockent les informations d'image dans une grille de carrés colorés, également appelée bitmap. Les carrés de ce bitmap se combinent pour former une image cohérente, un peu comme les pixels sur un écran d'ordinateur.
Les graphiques matriciels fonctionnent bien pour des images très détaillées comme des photographies, dans lesquelles la couleur exacte de chaque pixel doit être spécifiée . Les images raster ont une résolution fixe, donc augmenter leur taille réduit la qualité de l'image.
Les formats graphiques vectoriels - comme SVG et PDF - fonctionnent différemment. Ces formats stockent les images sous la forme d'un ensemble de points et de lignes entre les points. Les formules mathématiques dictent le placement et la forme de ces points et lignes, et conservent leurs relations spatiales lorsque l'image est agrandie ou réduite. Les fichiers graphiques vectoriels stockent également des informations de couleur et peuvent même afficher du texte.
Fonctionnement des fichiers SVG
Les fichiers SVG sont écrits en XML , un langage de balisage utilisé pour stocker et transférer des informations numériques. Le code XML d'un fichier SVG spécifie toutes les formes, couleurs et textes qui composent l'image.
Examinons quelques exemples. Je vais commencer par dessiner un simple cercle SVG:
Quand j'ouvre t e fichier pour ce cercle dans un éditeur de texte, ce code XML apparaît:
Comme vous pouvez le voir, il n'y a pas beaucoup de code ici. Nous n'avons besoin que d'une ligne de code pour dessiner un cercle. C'est parce que XML fait l'essentiel du travail pour nous avec les balises . Dans le code ci-dessus, les balises sont affichées en rose entre crochets.
Pour dessiner le cercle, le code XML spécifie la forme avec une balise