Le guide pratique du débutant en SVG
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 modifie notre façon de penser et de rendre les images pour le Web.
Pourquoi chez eux si populaire? Et qu'est-ce qui est exactement différent d'un fichier SVG? Aujourd'hui, nous avons les réponses et tout ce que vous devez savoir pour commencer avec ce type de fichier. (En bonus, toutes les images de ce post sont disponibles en SVG sur Creative Market.)
Explorez Envato Elements
Qu'est-ce que SVG?
Les graphiques vectoriels évolutifs, ou SVG, sont un format d'image vectoriel développé pour le Web. (Vous pouvez en savoir plus sur les formats vectoriels et raster dans un précédent article Design Shack.)
Le format a gagné en popularité grâce aux écrans haute définition, où les utilisateurs peuvent voir chaque pixel (s'ils existent). Parce que SVG est un format vectoriel, l'image est rendue de la même manière - et dans les moindres détails - 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 connu sous le nom de W3C, en 1999. Le W3C définit SVG comme «un langage de balisage pour décrire les applications et images graphiques bidimensionnelles, et un ensemble d'interfaces de script graphique connexes . " Il est pris en charge par tous les navigateurs modernes - vous n'avez donc pas à vous soucier de savoir si les fichiers SVG s'afficheront correctement ou non - et fonctionne quel que soit le type d'appareil.
Applications pratiques
Alors, pourquoi SVG est-il si populaire et pourquoi plus de concepteurs l'utilisent-ils? Tout simplement parce que ça marche.
Les fichiers SVG sont petits et évolutifs. Bien que le format soit le mieux adapté aux formes, il a une variété d'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 également faciles à manipuler et à contrôler. Non seulement un SVG peut ê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, SVG est le mieux adapté aux images qui peuvent évoluer ou changer au fil du temps ou par type d'appareil ou inclure des animations ou d'autres effets dynamiques. Utilisez le format pour les visuels tels que les logos, les croquis, les formes, les graphiques et les graphiques, ou d'autres images simples.
Avantages de l'utilisation de SVG
Alors, pourquoi voudriez-vous passer du fidèle JPG ou GIF au SVG? Il existe de nombreuses raisons pour lesquelles ce format peut être le meilleur usage dans vos projets. (Et il est même possible d'utiliser également SVG pour l'impression.)
- SVG est un format vectoriel. Cela seul est important lorsque l'on pense à une conception réactive, où les tailles d'image changent souvent en fonction de l'appareil. Un SVG est suffisamment petit pour qu'un seul fichier puisse faire tout le travail et il n'y a aucune perte de qualité sur des é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, scriptées et compressées.
- Vous pouvez faire presque n'importe quoi avec une image SVG que vous pouvez faire avec n'importe quelle autre image, comme inclure une variété de techniques de conception. Il est facile d'ajouter des filtres, des modes de fusion, des effets de fraise, des couleurs, des coupures et des masques, des ombres portées et presque toutes les autres techniques que vous aimez.
- Les fichiers SVG sont accessibles.
- SVG fonctionne avec des standards Web ouverts.
- Vous pouvez créer un SVG en utilisant du code texte ou avec l'image que vous dessinez. Cela permet une certaine liberté, selon votre besoin et 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 autrement ne le sont pas, ce qui augmente les temps de chargement. (Toujours un bonus.)
Contre l'utilisation de SVG
Vous êtes probablement vendu sur SVG après avoir lu tous les avantages, non? Mais il y a aussi quelques points négatifs à considérer.
- Les navigateurs plus anciens - tels qu'Internet Explorer 8 ou inférieur - ne prennent pas en charge SVG. Vous pouvez probablement trouver une solution (ou ne pas vous en soucier), mais sachez qu'il pourrait y avoir des utilisateurs qui ne voient pas vos images.
- SVG ne fonctionne pas pour les images complexes telles que les photos. Il s'agit d'un format conçu uniquement pour les formes et les lignes.
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 actuellement en cours de développement et ajoutera de nouvelles fonctionnalités de facilité d'utilisation à SVG, ainsi qu'une intégration plus étroite avec HTML, CSS et DOM, et des fonctionnalités obsolètes non prises en charge par tous les navigateurs."
D'autres ajouts sont également lancés. Les sociétés 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 de l'industrie tels qu'Adobe et Canon. L'utilisation dans la cartographie et le SIG est également en expansion, ce qui permet de meilleures capacités de cartographie et de zoom.
Lorsque vous commencez vraiment à y penser, il existe une opportunité presque infinie pour savoir comment utiliser et implémenter SVG dans des projets sur le Web et dans la conception imprimée. (C'est l'une des beautés du format vectoriel.)
Ressources SVG
Maintenant que vous êtes un peu plus enthousiasmé par SVG et pouvez voir pourquoi et comment cela peut être utile pour vos projets, nous avons une liste de ressources pour vous aider à démarrer.
- Exportation de SVG pour le Web avec Adobe Illustrator
- Intégrer directement SVG dans des pages HTML
- Fonctionnement avec la série vidéo SVG
- Profils SVG
- Astuces CSS: Utilisation de SVG
Conclusion
Utilisez-vous déjà SVG pour vos projets? Sinon, êtes-vous prêt à effectuer le changement?
SVG gagne en popularité presque tous les jours et comme il s'agit d'un outil open source, ces changements et avancées sont lus immédiatement pour vous. Vous n'êtes lié à aucun fournisseur ou produit et pouvez créer des images entièrement compatibles sur le Web moderne.
Photos courtoisie de Creative Market .
