====== 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.

<code javascript>
$(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');
    });
});
</code>

si vous voulez utiliser le css color, assurez-vous d'avoir une propriété fill="currentcolor"

sinon vous devez utiliser un
<code css>
#monimage path{
  fill: #fff;
}
#monimage{
  background-color:#000;
}
</code>

===== Animation =====

==== Morphing ====

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