Scalable Vector Graphics (SVG) est un type particulier de format d’image. Les SVG ne sont pas comme les autres types. Ils ne dépendent pas de pixels uniques pour créer les images que vous voyez. Ils utilisent plutôt des données « vectorielles ».
Créez votre propre logo avec le créateur de logo Turbologo. Cela prend moins de 5 minutes et aucune compétence en conception n’est requise.
Créer un logoLes SVG vous permettent de mettre les images à l’échelle dans n’importe quelle résolution. C’est utile pour la conception de sites Web et de nombreuses autres utilisations. Nous allons répondre à la question « Qu’est-ce qu’un fichier SVG ? ». Puis, nous vous montrerons comment l’utiliser.
Qu’est-ce qu’un fichier SVG et comment l’utiliser ?
SVG est un graphique vectoriel. Un vecteur est un élément qui a une magnitude et une direction particulières.
Les graphiques vectoriels évolutifs sont un balisage basé sur XML pour décrire des graphiques vectoriels bidimensionnels. Il s’agit d’une norme Web ouverte et textuelle qui décrit des images. Elles peuvent être rendues à n’importe quelle taille. SVG est, essentiellement, aux graphiques ce que le HTML est au texte.
Pourquoi utiliser un fichier SVG ?
SVG peut résoudre un grand nombre des problèmes les plus difficiles du développement Web actuel. Examinons-en quelques-uns.
Réceptivité et évolutivité
Sous le capot, SVG utilise des formes, des nombres et des coordonnées plutôt qu’une grille de pixels pour rendre les graphiques dans le navigateur, ce qui le rend indépendant de la résolution et infiniment évolutif. Vous pouvez créer un cercle avec un stylo ou un plan d’écriture du ciel si vous le regardez attentivement. Seule l’échelle est différente.
SVG vous permet de combiner différentes formes, chemins et éléments de texte pour créer des visuels clairs et nets, quelle que soit leur taille.
Les formats matriciels tels que GIF, JPG et PNG, en revanche, ont des dimensions fixes qui entraînent une pixellisation lorsqu’ils sont mis à l’échelle. Si les techniques d’image réactive sont utiles pour les graphiques en pixels, elles ne pourront jamais rivaliser avec la mise à l’échelle indestructible de SVG.
Programmabilité et interactivité
SVG peut être modifié et programmé. Vous pouvez ajouter des animations et des interactions à votre graphique SVG en utilisant CSS ou JavaScript.
Accessibilité
Les fichiers SVG peuvent être recherchés et indexés car ils sont basés sur du texte. Ils sont accessibles par les lecteurs d’écran, les moteurs de recherche et d’autres dispositifs.
Performances
La taille des fichiers d’un site Web est l’un des principaux facteurs qui influent sur ses performances. Les graphiques SVG ont tendance à être plus petits que les fichiers bitmap.
Le format SVG offre une multitude d’applications pratiques. Jetons un coup d’œil aux plus importantes.
Diagrammes et illustrations simples
SVG est le format parfait pour tout dessin traditionnel qui peut être réalisé avec un stylo et un crayon.
Icônes et logos
SVG est idéal pour les icônes et les logos qui sont nets et clairs à toutes les tailles, comme les boutons et les panneaux d’affichage. Les icônes SVG sont également plus faciles à localiser et plus facilement accessibles.
Animations
Les graphiques SVG peuvent être utilisés pour créer des animations attrayantes. Le code SVG peut interagir à la fois avec l’animation JavaScript et sa fonctionnalité d’animation SMIL intégrée.
Interactivité (diagrammes et graphiques, infographies ou cartes)
SVG peut être utilisé pour tracer des données et les mettre à jour dynamiquement en fonction des actions de l’utilisateur ou d’autres événements. Infographie SVG interactive, carte routière SVG interactive.
Effets spéciaux
Le format SVG peut avoir de nombreux effets en direct, comme le morphing de formes et d’autres effets gluants.
Conception d’applications et d’interfaces
SVG vous permet de créer des interfaces sophistiquées que vous pouvez intégrer à HTML5, aux applications web et aux applications Internet riches (RIA).
Comme vous pouvez le constater, SVG peut être utilisé dans de nombreuses situations et presque partout. La bonne nouvelle dans tout cela, c’est que la prise en charge de SVG par les navigateurs est excellente, comme vous pouvez le vérifier par vous-même sur caniuse.com.
Deux façons de créer un fichier SVG
Les fichiers SVG peuvent être créés de deux façons. Ils peuvent être créés de toutes pièces ou extraits d’une image existante que vous pouvez convertir. Commençons par la méthode manuelle.
1. Créer un fichier SVG manuellement
Les fichiers SVG sont généralement créés sans qu’il soit nécessaire de saisir des informations vectorielles, comme nous l’avons fait précédemment. Ce n’était qu’un exemple. Au lieu de cela, les fichiers SVG peuvent être créés à l’aide de n’importe quel programme de conception. Le fichier est enregistré en tant que SVG. Les SVG sont pris en charge par de nombreux outils de conception graphique modernes. Voici quelques-unes des meilleures options :
- Adobe Illustrator, Photoshop et InDesign
- Microsoft Visio
- Inkscape
- GIMP
Ces deux solutions open-source sont les deux dernières de cette liste. Elles constituent un excellent moyen de s’essayer à la création de SVG sans avoir à payer pour un logiciel premium. Elles peuvent même être tout ce dont vous avez besoin.
Il peut être difficile de créer des logos et d’autres éléments pour votre site Web si vous n’avez pas d’expérience en matière de conception graphique. Vous pouvez utiliser des images existantes pour les convertir en SVG.
2. Convertir des images existantes en SVG
Vous pouvez convertir des images de différents formats en SVG avec de nombreux programmes gratuits. La majorité des logiciels mentionnés dans la section précédente vous permettent d’ouvrir des images et de les enregistrer au format SVG.
Des outils de conversion en ligne sont également disponibles si vous ne souhaitez pas télécharger de logiciel. Il existe de nombreux services que vous pouvez utiliser. Un exemple est Vector Magic, qui vous permet de convertir toutes sortes de types de fichiers en SVG :
Cet outil est excellent car il vous donne un aperçu avant que vous ne téléchargiez réellement le fichier SVG. Un éditeur intégré vous permet d’apporter des modifications mineures avant de télécharger le fichier.
Ce n’est qu’une option parmi d’autres. Convertio et Img2Go sont d’autres services de conversion de PNG et JPG en SVG. Pour trouver la meilleure solution pour vous, il est important de faire des recherches.
Nous avons constaté que la plupart des convertisseurs SVG produisent des résultats similaires. Les images que vous choisissez sont tout aussi importantes que le convertisseur que vous utilisez pour obtenir les meilleurs résultats.
Il est préférable d’utiliser le format SVG pour des images simples, c’est-à-dire des images aux lignes claires et aux bordures définies. Vous risquez de vous retrouver avec un fichier SVG volumineux et difficile à modifier ou à animer, selon la complexité de votre image.
Comment utiliser un fichier SVG (Dans et hors de WordPress)
Les SVG peuvent être utilisés facilement. Il est facile d’ajouter un fichier SVG sur votre site Web en copiant son code et en le collant dans un document HTML où vous voulez l’image.
Si vous et les visiteurs de votre site utilisez des navigateurs qui prennent en charge les fichiers SVG (et la plupart le font de nos jours), ils pourront voir l’élément. Comme les SVG peuvent être animés à l’aide de CSS, c’est plus difficile.
Toutefois, les utilisateurs de WordPress constateront un changement dans le processus. Les SVG ne sont pas pris en charge par le système de gestion de contenu (CMS). Si vous souhaitez activer la prise en charge des SVG afin de pouvoir télécharger des fichiers directement sur votre site Web, vous devrez utiliser un plugin tel que Safe SVG.
Il est également possible d’activer manuellement le support SVG dans WordPress, mais le processus est beaucoup plus complexe. Dans ce cas, un plugin est plus sûr.
Conclusion
Il est plus facile que vous ne le pensez d’adapter votre site Web aux fichiers SVG. Il n’est pas facile de créer des SVG ou de choisir les bonnes images à convertir. Il existe de nombreux outils qui peuvent être utilisés pour accomplir ces deux tâches.
I’m a product and graphic designer with 10-years background. Writing about branding, logo creation and business.
