Le format d'image SVG
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.