Retour

Le format d'image SVG

Publié le 17 octobre 2020 à 14:39
image

SVG (Scalable Vector Graphics) est un format de données qui permet de représenter des image et du texte, voir des animation, sous forme vectorielle.

Qu’est ce qu’une image vectorielle?

Une image vectorielle (svg,eps,... ) est définie par plusieurs formes et tracés géométriques, calculés par des formules mathématiques et assortis de certaines propriétés: position, remplissage, contour, transparence,...

Les images que nous utilisons habituellement (jpeg, gif, png, bmp) sont des images matricielles ou bitmap. Elles sont décrites à l’aide de points, les uns à côté des autres, et couvrant la surface de l’image.

Quels sont les avantages / inconvénients d'une image vectorielle

Avantages

Évolutives sans perte de qualité

Le SVG est basé sur des formes mathématiques. Il peut être agrandi ou réduit à n’importe quelle taille sans pixellisation.

Fichiers souvent plus légers

Pour les logos, icônes ou illustrations simples, le fichier SVG est souvent beaucoup plus léger qu’une image bitmap.

Modifiables facilement

On peut ouvrir un SVG dans un éditeur de texte ou un logiciel vectoriel (Inkscape, Illustrator) et modifier les formes, couleurs, etc.

Animables et interactifs

Les SVG peuvent contenir des animations et interagir avec CSS ou JavaScript dans une page web.

Qualité optimale à l’écran et à l’impression

Parfait pour les logos, diagrammes, interfaces, car la qualité reste parfaite même sur des écrans haute résolution.

Inconvénients

Pas adaptées aux images complexes

Les photos ou les images très détaillées ne sont pas adaptées au SVG. Le fichier deviendrait énorme et difficile à gérer.

Compatibilité limitée avec certains logiciels ou plateformes

Certains anciens navigateurs ou logiciels ne prennent pas bien en charge le SVG ou certaines de ses fonctions avancées.

Complexité pour les débutants

Créer ou éditer un SVG complexe demande une connaissance des outils vectoriels ou du code SVG.

Sécurité en web

Un SVG peut contenir du code (scripts), donc il peut poser des risques si mal utilisé ou téléchargé d’une source non fiable.

Quand utiliser un SVG dans WebForge?

Pour les logos et icônes

Les logos doivent rester nets sur tous les écrans (mobile, écran Retina, affichage 4K). Le SVG évite le flou ou les pixels lorsqu’on zoome.

Illustrations simples, schémas, graphiques

Dessins, infographies, cartes, formes géométriques.
Parfait pour représenter des formes propres et modifiables.

Attention

Évitez les SVG avec du contenu texte

Selon la taille d'affichage, le texte pourrait ne plus être lisible. Placez les textes dans une zone de texte en vis-à-vis de l'image, ainsi sa taille sera adaptée automatiquement suivant l'écran du visiteur.

Évitez les SVG qui incorporent des images bitmap

Ceci alourdi le fichier et vous ne bénéficiez par des automatismes de redimensionnements automatiques dans WebForge.