Si vous connaissez ce format, je vous invite à lire uniquement le dernier paragraphe.
Pour les personnes qui ne le savent pas, les images sont souvent séparées en 2 catégories, les plus classiques sont les images matricielles (jpg, gif, png, bmp, etc.) qui sont représentées sous la forme d'un tableau de pixels et les images vectorielles (svg : Scalable Vector Graphics) qui sont décrites par le contenu à l'aide de formes et couleurs. Ces dernières sont principalement utilisées pour les logos et les images/présentations à afficher dans n'importe quelle dimension sans avoir l'effet de pixellisation.
Inkscape est le logiciel que j'utilise le plus. Je m'en suis servi pour ma présentation des origamis, mais je m'en sers aussi pour mettre en page facilement des photos, réaliser des étiquettes pour les confitures que je mets à jour toutes les années en ligne de commande (On peut effectivement utiliser Inkscape directement dans le terminal), etc.
Il est parfois possible de convertir une image matricielle en image vectorielle. Inkscape possède un outil qui marche plus ou moins bien mais quand j'en ai eu vraiment besoin, j'ai obtenu de meilleurs résultats avec des outils en ligne comme Vector Magic (qui semble être devenu payant depuis).
SVG est également un format supporté par tous les navigateurs (ou presque) et en fait donc un format privilégié pour le web. Il est parfois utilisé pour les polices d'écriture/d'icône. Il s'utilise aussi facilement avec javascript et il existe plusieurs bibliothèques :
- RaphaelJS est la plus complète qui supporte jusqu'à IE 6, oui, oui vous avez bien lu ??? « Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ »
- Snap.svg est plus récente et ne s'intéresse qu'aux navigateurs récents « Modern features for modern browsers »
- SVG.js est la version minimaliste et légère
Je suis un grand fan de ce format et je connaissais quelques outils sympathiques comme Sozi qui permet de faire des présentations animées ou svgo pour réduire la taille des fichiers (Inkscape stocke beaucoup d'infos inutile au rendu de l'image) mais je viens découvrir 2 nouveaux usages:
- Des icônes responsives : http://responsiveicons.co.uk
- Des logos responsives : http://responsivelogos.co.uk/
(Il faut redimensionner le navigateur pour voir la magie opérée)
Je suis tombé dessus grâce à cet article
https://medium.com/9elements/building-a-responsive-image-e4c6229fa1f6
qui présente ce logo
https://www.ichimnetz.com/responsive-logo/9e-anywhere.svg
