Bien que le format ne soit pas particulièrement nouveau, les images SVG sont de plus en plus populaires dans la conception de sites Web. Tous les principaux navigateurs Web prennent en charge le format et SVG change notre façon de penser et de restituer les images pour le Web.
Pourquoi chez eux si populaire? Et qu'est-ce qui est différent d'un fichier SVG? Aujourd'hui, nous avons les réponses et tout ce que vous avez besoin de savoir pour utiliser ce type de fichier. (En prime, toutes les images de ce message sont disponibles dans SVG à partir de Creative Market.)
Qu'est ce que le SVG?
Scalable Vector Graphics, ou SVG, est un format d'image vectoriel développé pour le Web. (Pour en savoir plus sur les formats vectoriels et vectoriels, consultez un article précédent de Design Shack.)
Le format a gagné en popularité grâce aux écrans haute définition, où les utilisateurs peuvent voir tous les pixels (s'ils existent). Le format SVG étant un format vectoriel, le rendu de l’image est identique, avec des détails parfaits, quelle que soit sa taille.
Le langage de balisage a été développé pour la première fois par le World Wide Web Consortium, plus communément appelé W3C, en 1999. Le W3C définit SVG comme un langage de balisage permettant de décrire des applications et des images graphiques en deux dimensions, ainsi qu'un ensemble d'interfaces de script graphique associées. . Il est supporté par tous les navigateurs modernes - vous n'avez donc pas à vous soucier de savoir si les fichiers SVG seront restitués correctement ou non - et fonctionne quel que soit le type de périphérique.
Applications pratiques
Qu'est-ce qui rend SVG si populaire et pourquoi davantage de concepteurs l'utilisent-ils? Simplement parce que ça marche.
Les fichiers SVG sont petits et évolutifs. Bien que le format soit le mieux adapté aux formes, il offre de nombreuses applications pratiques. Les logos de marque, les icônes, les éléments de l'interface utilisateur et de nombreux autres éléments de conception peuvent fonctionner au format SVG. Le plus gros bonus est qu'ils sont des vecteurs. Ainsi, une image SVG peut être utilisée à presque toutes les tailles. (Certains des plus petits fichiers ne peuvent être aussi volumineux.)
Les fichiers SVG sont faciles à manipuler et à contrôler. Un fichier SVG peut non seulement être enregistré en tant qu’image statique, mais vous pouvez également ajouter de l’interactivité et des filtres pour rendre l’image encore plus amusante. (Les fichiers SVG peuvent être animés et colorés.)
Voici quelques applications pratiques pour l’utilisation de SVG:
- Logos ou images
- Comme image de fond
- En tant qu'objet, tel qu'un bouton
- Cartographie
- Graphiques ou dessins
En règle générale, le format SVG convient le mieux aux images susceptibles d'évoluer ou de changer avec le temps, en fonction du type d'appareil ou intégrant une animation ou d'autres effets dynamiques. Utilisez ce format pour des éléments visuels tels que des logos, des esquisses, des formes, des graphiques et des graphiques, ou pour d’autres images simples.
Avantages de l'utilisation de SVG
Alors, pourquoi voudriez-vous quitter le fidèle JPG ou GIF en SVG? Il existe de nombreuses raisons pour lesquelles ce format pourrait être la meilleure utilisation dans vos projets. (Et il est même possible d’utiliser SVG pour l’impression.)
- SVG est un format vectoriel. Cela seul est important pour la conception réactive, où la taille des images change souvent en fonction du périphérique. Un fichier SVG est suffisamment petit pour qu’un fichier puisse faire tout le travail et il n’ya aucune perte de qualité sur les écrans plus grands.
- Les images et les comportements SVG sont définis avec XML, ce qui signifie que les images peuvent être recherchées, indexées, compressées et compressées.
- Vous pouvez faire presque tout avec une image SVG que vous pouvez utiliser avec n’importe quelle autre image, notamment en utilisant diverses techniques de conception. Il est facile d’ajouter des filtres, des modes de fusion, des effets de bur, de couleur, de découpage et de masquage, des ombres portées et presque toute autre technique que vous aimez.
- Les fichiers SVG sont accessibles.
- SVG fonctionne avec des standards web ouverts.
- Vous pouvez créer un fichier SVG à l'aide d'un code textuel ou à l'aide d'une image que vous dessinez. Cela permet une certaine liberté, en fonction de vos besoins et de votre niveau d'expertise dans différents domaines.
- La taille des fichiers est minuscule et peut être réduite. Cela signifie que les graphiques qui auraient pu être volumineux ne le sont pas, ce qui augmente les temps de chargement. (Toujours un bonus.)
Inconvénients de l'utilisation de SVG
Vous êtes probablement vendu sur SVG après avoir lu tous les avantages, non? Mais il y a quelques points négatifs à prendre en compte.
- Les anciens navigateurs, tels qu'Internet Explorer 8 ou version antérieure, ne prennent pas en charge le format SVG. Vous pouvez probablement trouver un moyen de contourner le problème (ou ne pas s'en soucier), mais vous devez savoir que certains utilisateurs pourraient ne pas voir vos images.
- SVG ne fonctionne pas pour les images complexes telles que les photos. C'est un format conçu pour les formes et les lignes uniquement.
Quelle est la prochaine étape pour SVG?
L'avenir de SVG ne fait que commencer. En tant que format d’image mobile adopté (et standard), l’utilisation et le développement de SVG ne feront que croître.
Selon le W3C, "SVG 2 est en cours de développement et ajoutera de nouvelles fonctionnalités conviviales à SVG, ainsi qu’une intégration plus étroite avec HTML, CSS et DOM, ainsi que des fonctionnalités de dépréciation non prises en charge par tous les navigateurs."
D'autres ajouts sont également lancés. Les fabricants de matériel d’impression recherchent des moyens de mieux utiliser SVG pour les processus d’impression et bénéficient du soutien de leaders du secteur tels que Adobe et Canon. L'utilisation dans la cartographie et les SIG est également en expansion, permettant de meilleures capacités de cartographie et de zoom.
Lorsque vous commencez vraiment à y penser, les possibilités d'utilisation et de mise en œuvre de SVG dans des projets sur le Web et dans la conception imprimée sont presque infinies. (C'est l'une des beautés du format vectoriel.)
Ressources SVG
Maintenant que vous êtes un peu plus excité à propos de SVG et que vous voyez pourquoi et comment il peut être utile pour vos projets, nous avons une liste de ressources pour vous aider à démarrer.
- Exportation de fichiers SVG pour le Web avec Adobe Illustrator
- Intégrer SVG directement dans des pages HTML
- Opérationnel avec la série vidéo SVG
- Profils SVG
- Astuces CSS: Utiliser SVG
Conclusion
Utilisez-vous déjà SVG pour vos projets? Si non, êtes-vous prêt à faire le changement?
SVG gagne en popularité presque quotidiennement et, comme il s’agit d’un outil à code source ouvert, ces modifications et progrès sont lus immédiatement pour vous.Vous n'êtes pas lié à un fournisseur ou à un produit en particulier et vous pouvez créer des images parfaitement compatibles sur le Web moderne.
Stock Photos avec l'aimable autorisation de Creative Market.