Une liste d'outils pour optimiser les SVG.
Via https://www.alsacreations.com/astuce/lire/1925-Optimiser-le-poids-des-images-SVG.html
Un tuto simple qui aborde l'animation d'un SVG simple avec des transitions CSS.
Un outil qui utilise l'IA pour produire un SVG à partir d'une image classique (PNG, JPG). J'ai testé avec un wallpaper relativement simple mais le résultat est bluffant.
L'outil a été mentionné par Korben
Un outil pour transformer une image en svg. C'est rempli de réglages pour faire ça au mieux selon le résultat que vous espérez.
Un très bon article d'initiation à la syntaxe path du format SVG. Très instructif pour avoir une petite idée de ce qu'est ce charabia ! Et ça permet même de pouvoir dessiner des formes simples "de tête" en écrivant le path directement.
Autre ressource intéressante chez Mozilla : https://developer.mozilla.org/fr/docs/Web/SVG/Tutoriel/Paths
Une chouette introduction aux animations CSS en utilisant des path SVG.
Convertir un fichier de police de caractères dans d'autres format (dont SVG !).
Via: https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/
Un ensemble d'icônes svg ultra-personnalisables.
Des icônes vectorielles gratuites.
Un outil pour optimiser vos SVG.
J'ai testé rapidement et le résultat est plutôt efficace !
Des animations de menu hamburger absolument délicieuses. Le tout sans Javascript (si on omet le simple onclick dans le HTML). Merci SVG.
Un outil en ligne pour facilement animer du SVG.
Un exemple de ce qu'on peut faire dans un navigateur web avec le format SVG.
Bon il faut un poil de créativité mais c'est assez impressionnant.
Transition de path svg.
Des graphiques SVG générés en Javascript. Ils fonctionnent nickel sur mobile.
Plein d'icônes en SVG.
Une idée intéressante pour styliser un bloc de manière légère et discrète.
Animer du SVG en CSS.
Comment bien utiliser SVG en HTML / CSS.
Moteur de recherche de logos connus en SVG.
Le SVG semble être une excellente alternative au GIF lorsqu'il s'agit de formes géométriques pas trop complexes (difficile à faire avec une photo par exemple).
Au niveau du support, il y a malheureusement toujours IE8 qui ne prend pas en compte le SVG ( http://caniuse.com/#feat=svg ).
Mais il y a toujours des moyens de contourner cette absence de support : https://css-tricks.com/svg-fallbacks/
Je ne connaissais pas la propriété "pointer-events" mais elle peut être bien pratique pour désactiver complètement un élément de l'UI avec "pointer-events: none;".
Bon par contre prudence, il s'agit d'une spécification CSS3 destinée à l'origine aux éléments SVG, et repoussée à CSS4 pour les autres éléments. Donc le support navigateur risque d'être chaotique.
Une librairie Javascript pour faire des partitions musicales, à base de HTML5, Canevas et SVG.
Un éditeur SVG en ligne.
Pour générer rapidement des images scalable.