Comment (et pourquoi) SVG va prendre le relais en 2018

/2019-11-08 21:00:22/
Irving
/Graphiques/

2018 sera l'année du SVG. Le format de fichier image n'a cessé de croître en popularité et en utilisation au cours des dernières années, mais 2018 est le moment où il va vraiment percer.

Vous avez la combinaison d'utilisateurs avec des écrans haute résolution et la nécessité d'un temps de chargement ultra rapide à remercier. Et bien que le passage à SVG puisse sembler être un gros problème; ce n'est pas.

SVG est facile à utiliser et à implémenter, et vous n'avez pas vraiment à modifier les fichiers existants; il suffit d'ajouter de nouvelles images au format SVG. Voici tout ce dont vous avez besoin pour être au courant en matière de SVG.

Explorez les ressources de conception

SVG est fait pour le Web

Mozilla le décrit comme ceci:

SVG est un langage basé sur XML pour décrire les images vectorielles. Il s'agit essentiellement de balisage, comme HTML, sauf que vous disposez de nombreux éléments différents 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 à baliser les graphiques, pas le 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 de sites 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 qu'Adobe Illustrator; Le texte SVG est accessible; Les SVG sont faciles à styliser 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 pour débutants en SVG.

Comment les concepteurs utilisent SVG

L'un des avantages de SVG est que vous pouvez faire beaucoup de choses différentes avec lui. SVG peut être utilisé pour:

Logos
Arrière-plans, motifs et textures
Animation
Images réactives
Icônes

Les concepteurs peuvent utiliser SVG pour n'importe quel élément d'une conception où un format vectoriel est une solution applicable. Le peut remplacer JPG, PNG et GIF, entre autres formats.

Règle des formats vectoriels

Il y a de fortes chances que vous utilisiez plus de formats vectoriels. SVG est indépendant de la résolution. Et c'est un énorme bonus car vous savez que vos images auront fière allure n'importe où.

Ce qui est particulièrement agréable avec les images SVG, c'est que vous n'avez pas vraiment besoin de modifier votre flux de travail pour les implémenter. Si vous concevez dans un logiciel tel qu'Illustrator ou Sketch, le processus - autre que l'exportation finale - est identique. Le seul inconvénient est que vous voudrez probablement transformer tous les éléments de texte en contours dans Illustrator, mais beaucoup de gens le font déjà.

Lors de la préparation des fichiers SVG, il y a une chose clé à retenir. Pour les garder aussi petits que possible, assurez-vous de supprimer tous les fichiers inutiles dont vous n'avez pas besoin. (Supprimez ce carton!) SVG sur le Web contient d'excellents conseils 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 s'accompagne également d'un bonus pour les concepteurs de moteurs de recherche. Parce que SVG utilise le texte réel dans la mise en forme, les moteurs de recherche peuvent mieux lire les images.

Oui, vous pouvez ajouter des informations alt avec d'autres images, mais il n'y a que peu de place pour les mots clés. Avec SVG, vous pouvez créer des images plus faciles à rechercher et simplement télécharger. Google indexe tout le contenu SVG, y compris les fichiers autonomes et lorsque les SVG sont directement intégrés au HTML.

SVG est léger

Contrairement à certains autres types de fichiers vectoriels qui peuvent devenir lourds rapidement, les SVG sont du code. Le code est rapide. C'est si simple. Enfin… presque.

En ce qui concerne ces dessins vectoriels fantaisie que vous avez enregistrés au format SVG, vérifiez la taille des fichiers avant d'aller trop loin. Alors que les formats PNG peuvent croître de façon presque exponentielle lorsque la transparence est ajoutée, les SVG ont tendance à croître en fonction du nombre de chemins et de remplis dans l'image.

Si le SVG est énorme, envisagez de l'exporter en JPG ou PNG. (Même si cela semble contradictoire. La réalité est que la plupart des concepteurs continueront à utiliser un mélange de types de fichiers avec des images; attendez-vous simplement à utiliser plus de SVG que vous n'en avez par le passé.)

L'édition est facile

Si vous avez l'habitude de dessiner des icônes ou des logos ou quoi que ce soit dans un logiciel de dessin vectoriel, rien sur le processus d'édition ne change pour vous.

Mais si vous écrivez SVG, vous allez vous régaler. Il suffit de changer le mot ou 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 ça.

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 animée, SVG permet l'un ou l'autre. Vous pouvez créer une image fixe ou une animation. Et tout fonctionne à peu près de la même manière. (Cet exemple astucieux est un tutoriel sur la façon d'animer un élément le long d'un chemin SVG!)

Ces petits avantages aident à pousser SVG au premier plan de l'esprit des concepteurs. Vous n'avez pas besoin d'apprendre un nouvel outil ou une nouvelle technique; vous avez déjà tout ce dont vous avez besoin 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 parfaitement et vous n'avez pas à vous soucier de la pixellisation. Les SVG créent de superbes logos (statiques ou réactifs), des graphiques et des arrière-plans, des icônes et de petites images et des animations. Les fichiers sont petits et se chargent rapidement, et il n'y a pas de courbe d'apprentissage énorme quand il s'agit d'implémenter des SVG dans la conception de votre site Web.

Vous pouvez littéralement commencer à utiliser des images SVG dès maintenant.