Les fichiers SVG (Scalable Vector Graphics) sont des options fantastiques en matière de développement ou de conception web. Ce type d’image ne pixelise pas si vous l’agrandissez ou le réduisez, et il est généralement plus léger que des options telles que les JPEG. Cependant, l’ouverture et la modification des fichiers SVG peuvent être un défi sans les bons outils.
Il est essentiel d’apprendre à ouvrir un fichier SVG si vous souhaitez le modifier avant de le téléverser sur WordPress. Certains outils vous permettront à la fois d’ouvrir et de modifier les fichiers SVG, ce qui signifie que vous serez en mesure de créer les graphiques dont vous avez besoin pour votre site web.
Dans cet article, nous allons brièvement discuter de ce que sont les fichiers SVG. Nous verrons pourquoi ils sont si populaires et quand vous devez les utiliser. Puis nous vous montrerons comment convertir des fichiers en SVG et comment les ouvrir. C’est parti !
Qu’est-ce qu’un fichier SVG ?
Un vecteur est un objet défini par un ou plusieurs points reliés entre eux. Lorsque vous combinez suffisamment de vecteurs, vous pouvez créer à peu près tout type de graphique que vous voulez.
Un fichier SVG est une collection de données vectorielles rassemblées au format XML. Prenez ce logo Kinsta, par exemple.
Contrairement à un PNG ou à un JPEG, cette image est entièrement composée de vecteurs et non de pixels. Voici à quoi ressemble ce même fichier si vous l’ouvrez avec un éditeur de texte.
La plupart des données de ce fichier se trouvent à l’intérieur de l’élément path. Cet élément permet de définir des vecteurs dans n’importe quelle direction. Nous avons ajouté un peu de couleur aux lignes à l’aide de CSS.
Si vous essayez d’ouvrir un fichier JPEG ou PNG à l’aide d’un éditeur de texte, vous ne verrez que du charabia. Cependant, vous pouvez prendre un autre format d’image et le convertir en SVG en traduisant ces pixels en chemins ou en vecteurs. Nous vous montrerons comment cela fonctionne dans une minute, mais pour l’instant, voyons pourquoi et quand utiliser les fichiers SVG.
Pourquoi utiliser un fichier SVG
Un fichier SVG est utilisé pour tout type de graphique que vous pourriez avoir besoin de mettre à l’échelle. Habituellement, si vous essayez de modifier différentes tailles d’images, vous rencontrerez des problèmes de pixellisation. Les fichiers SVG, en revanche, sont extensibles à l’infini car vous travaillez avec des vecteurs au lieu de pixels.
Comme vous pouvez le voir, l’image ne se déforme pas et ne se pixelise pas du tout lorsque vous la redimensionnez. Cela rend les fichiers SVG parfaits pour les logos, les illustrations, les images mises en avant, les graphiques en ligne et bien plus encore. Cela signifie également que vous pouvez réduire la taille du fichier image pour accélérer votre site WordPress, sans compromettre la qualité.
Voici un aperçu rapide de certains des fichiers SVG que nous utilisons sur notre site web, afin que vous ayez une référence pour les types de graphiques dont nous parlons.
En plus d’être infiniment évolutifs, les fichiers SVG offrent une foule d’autres avantages, notamment :
- Ils sont indexés par Google. Les fichiers SVG apparaissent dans les recherches d’images de Google, ce qui signifie qu’ils ne présentent aucun inconvénient du point de vue de l’optimisation des moteurs de recherche (SEO).
- Ils sont relativement petits en taille de fichier. Si vous prenez une image ou une illustration simple et que vous l’enregistrez aux formats SVG, JPEG et PNG, le premier sera généralement beaucoup plus petit en taille de fichier que le reste. Toutefois, cela ne fonctionne que pour les images « simples », dont nous parlerons dans un instant.
- Vous pouvez animer des fichiers SVG. Puisque vous traitez des fichiers XML ou du code, vous pouvez styliser et animer les fichiers SVG à l’aide de CSS.
Bien que les fichiers SVG soient incroyablement polyvalents, ils ne conviennent pas à toutes les situations. Lorsque vous comparez SVG vs JPEG vs PNG, vous vous rendrez rapidement compte que les deux dernières options sont bien meilleures lorsqu’il s’agit de graphiques et de photographies complexes.
Prenez ce fichier JPEG, par exemple. Il ne s’agit pas d’une image haute résolution, mais elle est plus que suffisante pour distinguer des détails distincts.
Lorsque vous convertissez ce fichier JPEG en SVG à l’aide de l’un des outils disponibles en ligne, vous vous retrouvez avec beaucoup moins de détails.
Non seulement cette image manque de détails et de couleurs, mais sa taille de fichier est également plus grosse (en poids de fichier) que l’originale. En effet, les données vectorielles s’additionnent rapidement lorsqu’il s’agit de photographies ou d’autres types de graphiques complexes.
En résumé, les SVG devraient être votre format de prédilection pour les images comportant moins de lignes, comme les logos et les illustrations. Toutefois, en ce qui concerne les photographies, il est préférable de s’en tenir aux JPEG et PNG haute résolution (à condition de les optimiser).
Comment convertir un fichier SVG
Le logiciel de retouche photo de votre choix devrait vous permettre de prendre d’autres types de fichiers d’image et de les convertir au format SVG et vice versa. Voici un exemple rapide utilisant l’un de nos outils de retouche photo gratuits préférés, appelé Photopea.
Si vous n’avez pas accès à un logiciel de retouche photo, il existe de nombreux outils gratuits en ligne qui peuvent prendre des images dans presque tous les formats et les exporter en SVG ou vice versa. L’inconvénient d’utiliser ces outils gratuits est que les résultats ne sont souvent pas aussi détaillés que vous le souhaiteriez.
D’après notre expérience, l’utilisation de logiciels de conversion d’images gratuits donne souvent des fichiers SVG sans couleur ou des fichiers qui ressemblent à peine à l’image originale. Cependant, la conversion de fichiers SVG vers d’autres formats d’image est beaucoup plus simple et n’entraîne pratiquement jamais de perte de qualité notable, quel que soit l’outil utilisé.
Comment ouvrir les fichiers SVG (3 façons)
Il existe plusieurs façons d’ouvrir des fichiers SVG en fonction de ce que vous voulez en faire. Commençons par parler des navigateurs.
1. Utiliser un navigateur
Contrairement aux autres fichiers graphiques, lorsque vous ouvrez un SVG, il se lance dans votre navigateur par défaut. C’est parce que votre ordinateur reconnaît les SVG non pas comme des graphiques, mais comme des fichiers XML.
Les fichiers SVG existent depuis un certain temps et environ 33 % de tous les sites web les utilisent sous une forme ou une autre. Cela signifie que la plupart des navigateurs modernes prennent en charge les fichiers SVG, notamment Edge, Firefox, Chrome, Safari et à peu près toutes les autres options auxquelles vous pouvez penser.
À moins que vous n’utilisiez un navigateur très obscur ou obsolète (ce qui ne devrait pas être le cas), vous serez en mesure de lancer des fichiers SVG en quelques clics. Cependant, vous ne pouvez pas modifier les fichiers SVG à partir de votre navigateur. Pour cela, vous devrez utiliser un éditeur de texte ou un logiciel d’édition d’images.
2. Ouvrir des fichiers SVG à l’aide d’un éditeur de texte
Les fichiers SVG étant des images basées sur XML, vous pouvez les ouvrir et les modifier à l’aide d’un éditeur de texte. Plus tôt, nous vous avons montré à quoi ressemble le logo de Kinsta en tant que SVG. Nous avons également examiné son code.
En théorie, vous pouvez modifier ou créer un fichier SVG à l’aide d’un éditeur de texte. Cependant, cela ne fonctionne que pour des images très simples avec peu de vecteurs. Pour un fichier comme celui ci-dessus, modifier chaque vecteur à la main est presque impossible.
Ce que vous pouvez faire, c’est ajouter du CSS à l’aide d’un éditeur de texte, ce qui est assez simple. Dans cet exemple, vous pouvez voir que nous avons rempli les lignes vectorielles avec le violet de la marque Kinsta. Vous pouvez utiliser le CSS pour ajouter tout type de style que vous souhaitez au fichier vectoriel, y compris des animations. C’est quelque chose que vous ne pouvez pas faire avec les formats d’image traditionnels.
3. Utiliser un éditeur de photos ou d’images
La plupart des logiciels modernes d’édition de photos prennent en charge les fichiers SVG. Cela signifie que vous pouvez les ouvrir, les modifier, puis enregistrer les modifications ou exporter l’image vers d’autres formats.
Lorsque vous travaillez avec un fichier SVG à l’aide d’un logiciel de retouche photo, vous avez accès à tous les mêmes outils que vous pouvez utiliser pour personnaliser d’autres types d’images. Cela vous permet de modifier le SVG, d’ajouter des détails, d’en supprimer des parties et, en gros, de faire tout ce que vous voulez.
Les logiciels d’édition d’images ou de photos offrent également le moyen le plus simple de créer des fichiers SVG à partir de zéro. Vous pouvez utiliser des outils vectoriels ou linéaires pour concevoir des images et les enregistrer au format SVG. Une fois que vos fichiers SVG sont prêts, vous pouvez aller de l’avant et les téléverser sur WordPress pour que les visiteurs puissent les voir.
Résumé
Les SVG sont parfaits pour les illustrations et les graphiques simples tels que les logos. Heureusement, il existe de nombreux outils que vous pouvez utiliser pour gérer ce type de contenu. De plus, les fichiers SVG sont pris en charge par la plupart des navigateurs Internet.
Quant à savoir comment ouvrir un fichier SVG, vous pouvez procéder de trois manières différentes :
- Utiliser un navigateur
- Ouvrir des fichiers SVG avec un éditeur de texte
- Utiliser un éditeur de photos ou d’images
Vous avez besoin d’aide pour votre conception web ? Chez Kinsta, tous nos plans d’hébergement incluent un support 24/7 de nos développeurs WordPress de classe mondiale.
