SVG

Un lien vite fait pour pas le perdre http://sozi.baierouge.fr/wiki/fr:bienvenue

Faire des animations SVG en javascript avec framework ⇒ http://snapsvg.io/

https://github.com/maxwellito/vivus#vivusjs

https://css-tricks.com/mega-list-svg-information/

Le code suivant permet de remplacer les balises de type

<img src="monimage.svg">

par une balises svg.

L’avantage est de pouvoir garder un code html propre et de pouvoir appliquer du css pour changer la couleur du icon on mouse over par exemple.

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");
 
        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');
 
            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');
 
            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });
 
            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});

si vous voulez utiliser le css color, assurez-vous d’avoir une propriété fill=“currentcolor”

sinon vous devez utiliser un

#monimage path{
  fill: #fff;
}
#monimage{
  background-color:#000;
}

https://la-cascade.io/le-morphing-en-svg/

toutes les propriétés SMIL pour les animations qui ne semble pas compatible IE11 ⇒ https://la-cascade.io/guide-des-animations-svg/

Sinon une library existe compatible tout navigateur ⇒ http://thednp.github.io/kute.js/svg.html