2018 sera l'année de SVG. Le format de fichier d'image a gagné en popularité et en utilisation de façon constante au cours des dernières années, mais 2018 est le moment où il va vraiment percer.
Vous avez la combinaison des utilisateurs avec des écrans haute résolution et la nécessité d’un temps de chargement extrêmement rapide pour vous remercier. Et si le passage à SVG peut sembler une grosse affaire; ce n'est pas.
SVG est facile à utiliser et à implémenter, et vous n'avez pas vraiment besoin de modifier les fichiers existants. ajoutez simplement de nouvelles images au format SVG. Voici tout ce dont vous avez besoin pour être au courant en matière de SVG.
SVG est fait pour le Web
Mozilla le décrit comme ceci:
SVG est un langage XML permettant de décrire des images vectorielles. Il s’agit d’un balisage, comme HTML, sauf que vous disposez de nombreux éléments pour définir les formes que vous souhaitez voir apparaître dans votre image et les effets que vous souhaitez appliquer à ces formes. SVG sert à marquer des graphiques, pas du contenu. À l'extrémité la plus simple du spectre, vous avez des éléments pour créer des formes simples, comme et. Les fonctionnalités SVG plus avancées incluent (transformer les couleurs à l'aide d'une matrice de transformation), (animer des parties de votre graphique vectoriel) et (appliquer un masque sur le dessus de votre image).
Les principaux avantages de SVG pour les concepteurs Web incluent la possibilité de créer des rendus SVG simples dans un éditeur de code ou de texte, tandis que des graphiques complexes peuvent être dessinés dans un programme tel que Adobe Illustrator; Le texte SVG est accessible. Les SVG sont faciles à styler et à écrire; et vous créez avec un format vectoriel qui rend bien à n'importe quelle taille. Les formats SVG sont pris en charge par les navigateurs modernes, sont évolutifs et hautement compressibles.
Certains des inconvénients sont que la conception de SVG peut devenir compliquée et est un peu plus difficile à créer au départ. L'autre problème est que certains navigateurs dégradés ne comprennent tout simplement pas ce qu'ils sont.
Besoin d'une meilleure compréhension de SVG? Nous avons un guide du débutant pour SVG.
Comment les concepteurs utilisent SVG
Un des avantages de SVG est que vous pouvez faire beaucoup de choses différentes avec. SVG peut être utilisé pour:
- Logos
- Arrière-plans, motifs et textures
- Animation
- Images sensibles
- Les icônes
Les concepteurs peuvent utiliser SVG pour n’importe quel élément d’une conception pour laquelle un format vectoriel est une solution applicable. Le peut remplacer JPG, PNG et GIF, entre autres formats.
Règle de formats vectoriels
Il y a de fortes chances que vous utilisiez davantage de formats vectoriels. SVG est indépendant de la résolution. Et c'est un bonus énorme, car vous savez que vos images auront fière allure n'importe où.
Le fait de travailler avec des images SVG est particulièrement agréable: vous n'avez pas vraiment besoin de modifier votre flux de travail pour les implémenter. Si vous concevez des logiciels tels que Illustrator ou Sketch, le processus - autre que l'exportation finale - est identique. Le problème est que vous voudrez probablement transformer n'importe quel élément de texte en un contour dans Illustrator, mais beaucoup de gens le font déjà.
Lors de la préparation des fichiers SVG, il y a un élément clé à retenir. Pour les garder aussi petits que possible, assurez-vous de supprimer tous les fichiers inutiles. (Supprimez cette carte!) SVG sur le Web propose des astuces très utiles pour dessiner des éléments et enregistrer les fichiers SVG de la meilleure façon possible.
Le format texte est bon pour le référencement
L'utilisation de SVG apporte également un bonus supplémentaire aux concepteurs avertis en matière de moteurs de recherche. Étant donné que SVG utilise du texte réel dans le formatage, les moteurs de recherche peuvent mieux lire les images.
Oui, vous pouvez ajouter alt informations avec d'autres images, mais il n'y a pas beaucoup de place pour les mots-clés. Avec SVG, vous pouvez créer des images plus conviviales pour la recherche et simplement télécharger. Google indexe tout le contenu SVG, y compris les fichiers autonomes et lorsque les SVG sont incorporés directement au format HTML.
SVG est léger
Contrairement à certains autres types de fichiers vectoriels pouvant être lourds rapidement, les SVG sont du code. Le code est rapide. C'est si simple. Bien? presque.
Vérifiez la taille des fichiers avant de vous lancer dans des dessins vectoriels de qualité que vous avez enregistrés au format SVG. Bien que les formats PNG puissent croître de manière presque exponentielle lorsque la transparence est ajoutée, les SVG ont tendance à croître en fonction du nombre de chemins et de remplissages de l'image.
Si le fichier SVG est énorme, envisagez de l'exporter avec un fichier JPG ou PNG. (Même si cela semble contradictoire. La réalité est que la plupart des concepteurs continueront à utiliser une combinaison de types de fichiers avec des images; attendez-vous simplement à utiliser plus de SVG que par le passé.)
L'édition est facile
Si vous avez l'habitude de dessiner des icônes, des logos ou quoi que ce soit dans un logiciel de dessin vectoriel, rien dans le processus d'édition ne change pour vous.
Mais si vous écrivez en SVG, vous vous régalerez. Il suffit de changer le mot, les coordonnées ou la couleur dans l'éditeur de texte et boom, le changement est fait. Il est difficile de rendre l'édition plus facile que cela.
Créer des images fixes ou animées avec SVG
Contrairement à la plupart des autres formats d'image, qui vous permettent d'avoir une image fixe ou en mouvement, SVG permet l'une ou l'autre. Vous pouvez créer une image fixe ou une animation. Et tout fonctionne à peu près de la même façon. (Cet exemple astucieux est un tutoriel sur la façon d'animer un élément le long d'un chemin SVG!)
Ces petits avantages contribuent à placer SVG au premier plan des concepteurs. Vous n'avez pas à apprendre un nouvel outil ou une nouvelle technique. vous avez déjà tout ce dont vous avez besoin à votre disposition avec SVG.
Conclusion
Voici la grande raison pour laquelle 2018 sera l'année où SVG commencera à prendre le relais: c'est pratique.
Avec tout le monde utilisant des écrans haute résolution, les formats vectoriels sont vraiment la voie à suivre. Tout évolue sans faille et vous n'avez pas à vous soucier de la pixelisation. Les SVG créent de superbes logos (statiques ou réactifs), des graphiques et des arrière-plans, des icônes, des petites images et des animations. Les fichiers sont petits et chargés rapidement, et il n’ya pas de longue période d’apprentissage pour implémenter des SVG dans la conception de votre site Web.
Vous pouvez littéralement commencer à utiliser des images SVG dès maintenant.