SVG pour les concepteurs Web en 60 secondes

Les images bitmap, telles que les JPEG, les GIF et les PNG, paraissent horribles lorsque vous les redimensionnez. Par conséquent, si vous souhaitez conserver la qualité dans de grandes dimensions, vous devez augmenter la taille du fichier. Cependant, les images SVG (qui signifie Scalable Vector Graphics) ont exactement le même aspect, quelles que soient les dimensions auxquelles elles ont été dimensionnées. et ils conservent la même taille de fichier. 

Regardons les SVG pour la conception web, en soixante secondes!

Comprendre SVG pour la conception Web

 

Les SVG peuvent être utilisés avec les CSS comme arrière-plans, ou vous pouvez les placer dans le contenu sous forme d’images ordinaires. Vous pouvez créer des icônes et des logos qui semblent toujours parfaits, quelle que soit leur taille, ils peuvent être animés et transformés, et vous pouvez leur appliquer des filtres et des effets sympas (consultez la démonstration du filtre SVG de Lucas Bebber ci-dessous). Vous pouvez même contrôler leur coloration avec CSS.

À l'intérieur, un fichier SVG ne contient que du code XML lisible et éditable. Et le texte dans les SVG est un texte normal, indexable et adapté aux moteurs de recherche..

Vous pouvez créer des SVG avec pratiquement tous les programmes d'édition de graphiques vectoriels, tels qu'Affinity Designer, Boxy SVG, Illustrator, Gravit Designer ou Inkscape. Créez simplement votre image, exportez-la au format SVG et vous pourrez l'utiliser dans vos sites Web. C'est SVG pour la conception web, en soixante secondes!

Ressources SVG plus utiles