Comment changer la couleur de l'image SVG en utilisant CSS (remplacement d'image jQuery SVG)?

Ceci est une auto-question d'un morceau de code pratique que j'ai trouvé.

Actuellement, il n'y a pas de moyen facile d'incorporer une image SVG et d'avoir ensuite accès aux éléments SVG via CSS. Il existe différentes méthodes d'utilisation des frameworks JS SVG, mais elles sont trop compliquées si vous ne faites qu'une simple icône avec un état de survol.

Voici donc ce que j'ai trouvé, qui est, je pense, de loin le moyen le plus simple d'utiliser des fichiers SVG sur un site Web. Il tire son concept des premières méthodes de remplacement de texte en image, mais pour autant que je sache, cela n'a jamais été fait pour les SVG.

Ceci est la question:

Comment incorporer un SVG et changer sa couleur en CSS sans utiliser de framework JS-SVG?

Tout d'abord, utilisez une balise IMG dans votre code HTML pour incorporer un graphique SVG. J'ai utilisé Adobe Illustrator pour créer le graphique.

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

C'est exactement comme si vous intégriez une image normale. Notez que vous devez définir l'IMG pour avoir une classe de svg. La classe «lien social» est juste à titre d'exemple. L'ID n'est pas requis, mais il est utile.

Ensuite, utilisez ce code jQuery (dans un fichier séparé ou en ligne dans la tête).

    /**
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

Le code ci-dessus cherche tous les IMG avec la classe 'svg' et les remplace par le SVG en ligne du fichier lié. L'avantage majeur est qu'il vous permet d'utiliser CSS pour changer la couleur du SVG maintenant, comme ceci:

svg:hover path {
    fill: red;
}

Le code jQuery que j'ai écrit porte également sur l'ID et les classes des images d'origine. Donc, ce CSS fonctionne aussi:

#facebook-logo:hover path {
    fill: red;
}

Ou:

.social-link:hover path {
    fill: red;
}

Vous pouvez voir un exemple de son fonctionnement ici: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

Nous avons une version plus compliquée qui inclut la mise en cache ici: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

Style

svg path {
    fill: #000;
}

Scénario

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

Vous pouvez désormais utiliser la propriété CSSfilter dans la plupart des navigateurs modernes (y compris Edge, mais pas IE11). Il fonctionne sur les images SVG ainsi que sur d'autres éléments. Vous pouvez utiliser hue-rotateou invertpour modifier les couleurs, bien qu'ils ne vous permettent pas de modifier les différentes couleurs indépendamment. J'utilise la classe CSS suivante pour afficher une version "désactivée" d'une icône (où l'original est une image SVG avec une couleur saturée):

.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Cela le rend gris clair dans la plupart des navigateurs. Dans IE (et probablement Opera Mini, que je n'ai pas testé), il est sensiblement atténué par la propriété d'opacity, qui semble toujours assez bonne, bien qu'elle ne soit pas grise.

Voici un exemple avec quatre classes CSS différentes pour l' icône de cloche Twemoji : originale (jaune), la classe "désactivée" ci-dessus, hue-rotate(verte) et invert(bleue).

.twa-bell {
  background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <span class="twa-bell"></span>
  <span class="twa-bell grey-out"></span>
  <span class="twa-bell hue-rotate"></span>
  <span class="twa-bell invert"></span>
</body>

</html>

Alternativement, vous pouvez utiliser CSS mask, la prise en charge du navigateur accordée n'est pas bonne, mais vous pouvez utiliser une solution de secours

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}

Si vous pouvez inclure des fichiers (PHP inclure ou inclure via votre CMS de choix) dans votre page, vous pouvez ajouter le code SVG et l'inclure dans votre page. Cela fonctionne de la même manière que le collage de la source SVG dans la page, mais rend le balisage de page plus propre.

L'avantage est que vous pouvez cibler des parties de votre SVG via CSS pour le survol - aucun javascript requis.

http://codepen.io/chriscoyier/pen/evcBu

Il vous suffit d'utiliser une règle CSS comme celle-ci:

#pathidorclass:hover { fill: #303 !important; }

Notez que le !importantbit est nécessaire pour remplacer la couleur de remplissage.

@Drew Baker a donné une excellente solution pour résoudre le problème. Le code fonctionne correctement. Cependant, ceux qui utilisent AngularJs peuvent trouver beaucoup de dépendance à jQuery. Par conséquent, j'ai pensé que c'était une bonne idée de coller pour les utilisateurs d'AngularJS, un code suivant la solution de @Drew Baker.

AngularJs façon du même code

1. Html : utilisez la balise ci-dessous dans votre fichier html:

<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>

2. Directive : ce sera la directive dont vous aurez besoin pour reconnaître la balise:

'use strict';
angular.module('myApp')
  .directive('svgImage', ['$http', function($http) {
    return {
      restrict: 'E',
      link: function(scope, element) {
        var imgURL = element.attr('src');
        // if you want to use ng-include, then
        // instead of the above line write the bellow:
        // var imgURL = element.attr('ng-include');
        var request = $http.get(
          imgURL,
          {'Content-Type': 'application/xml'}
        );

        scope.manipulateImgNode = function(data, elem){
          var $svg = angular.element(data)[4];
          var imgClass = elem.attr('class');
          if(typeof(imgClass) !== 'undefined') {
            var classes = imgClass.split(' ');
            for(var i = 0; i < classes.length; ++i){
              $svg.classList.add(classes[i]);
            }
          }
          $svg.removeAttribute('xmlns:a');
          return $svg;
        };

        request.success(function(data){
          element.replaceWith(scope.manipulateImgNode(data, element));
        });
      }
    };
  }]);

3. CSS :

.any-class-you-wish{
    border: 1px solid red;
    height: 300px;
    width:  120px
}

4. Test unitaire au karma-jasmin :

'use strict';

describe('Directive: svgImage', function() {

  var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data;

  beforeEach(function() {
    module('myApp');

    inject(function($injector) {
      $rootScope = $injector.get('$rootScope');
      $compile = $injector.get('$compile');
      $httpBackend = $injector.get('$httpBackend');
      apiUrl = $injector.get('apiUrl');
    });

    scope = $rootScope.$new();
    element = angular.element('<svg-image src="/icons/icon-man.svg" class="svg"></svg-image>');
    element = $compile(element)(scope);

    spyOn(scope, 'manipulateImgNode').andCallThrough();
    $httpBackend.whenGET(apiUrl + 'me').respond(200, {});

    data = '<?xml version="1.0" encoding="utf-8"?>' +
      '<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->' +
      '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
      '<!-- Obj -->' +
      '<!-- Obj -->' +
      '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
      'width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">' +
        '<g>' +
          '<path fill="#F4A902" d=""/>' +
          '<path fill="#F4A902" d=""/>' +
        '</g>' +
      '</svg>';
    $httpBackend.expectGET('/icons/icon-man.svg').respond(200, data);
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should call manipulateImgNode atleast once', function () {
    $httpBackend.flush();
    expect(scope.manipulateImgNode.callCount).toBe(1);
  });

  it('should return correct result', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    expect(result).toBeDefined();
  });

  it('should define classes', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    var classList = ["svg"];
    expect(result.classList[0]).toBe(classList[0]);
  });
});

Je réalise que vous voulez accomplir cela avec CSS, mais juste un rappel au cas où ce serait une petite image simple - vous pouvez toujours l'ouvrir dans Notepad ++ et changer le chemin / le remplissage de l'élément:

<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
    ...
    C412.843,226.163,402.511,211.451,394.854,205.444z"/>

Cela pourrait sauver une tonne de scripts laids. Désolé si c'est hors de la base, mais parfois les solutions simples peuvent être négligées.

... même l'échange de plusieurs images svg peut être plus petit que certains extraits de code pour cette question.

J'ai écrit une directive pour résoudre ce problème avec AngularJS. Il est disponible ici - ngReusableSvg .

Il remplace l'élément SVG après son rendu et le place à l'intérieur d'un divélément, ce qui rend son CSS facilement modifiable. Cela permet d'utiliser le même fichier SVG à différents endroits en utilisant différentes tailles / couleurs.

L'utilisation est simple:

<object oa-reusable-svg
        data="my_icon.svg"
        type="image/svg+xml"
        class="svg-class"
        height="30"  // given to prevent UI glitches at switch time
        width="30">
</object>

Après cela, vous pouvez facilement avoir:

.svg-class svg {
    fill: red; // whichever color you want
}

TL / DR: ALLEZ ici-> https://codepen.io/sosuke/pen/Pjoqqp

Explication:

Je suppose que vous avez quelque chose en HTML comme ceci:

<img src="/img/source.svg" class="myClass">

Certainement aller la route du filtre, ce est à dire. votre svg est très probablement noir ou blanc. Vous pouvez appliquer un filtre pour qu'il soit de la couleur que vous voulez, par exemple, j'ai un svg noir que je veux vert menthe. Je l'inverse d'abord pour qu'il soit blanc (qui est techniquement toutes les couleurs RVB sur le plein), puis je joue avec la saturation de teinte, etc. Pour bien faire les choses:

filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);

Encore mieux, vous pouvez simplement utiliser un outil pour convertir l'hex que vous voulez en un filtre pour vous: https://codepen.io/sosuke/pen/Pjoqqp

Voici une version knockout.jsbasée sur la réponse acceptée:

Important: il nécessite également jQuery pour le remplacement, mais j'ai pensé qu'il pourrait être utile à certains.

ko.bindingHandlers.svgConvert =
    {
        'init': function ()
        {
            return { 'controlsDescendantBindings': true };
        },

        'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
        {
            var $img = $(element);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            $.get(imgURL, function (data)
            {
                // Get the SVG tag, ignore the rest
                var $svg = $(data).find('svg');

                // Add replaced image's ID to the new SVG
                if (typeof imgID !== 'undefined')
                {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if (typeof imgClass !== 'undefined')
                {
                    $svg = $svg.attr('class', imgClass + ' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        }
    };

Ensuite, appliquez simplement data-bind="svgConvert: true"à votre tag img.

Cette solution remplace complètement la imgbalise par un SVG et toute liaison supplémentaire ne serait pas respectée.

Voici un code sans framework, uniquement des js purs:

document.querySelectorAll('img.svg').forEach(function(element) {
            var imgID = element.getAttribute('id')
            var imgClass = element.getAttribute('class')
            var imgURL = element.getAttribute('src')

            xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var svg = xhr.responseXML.getElementsByTagName('svg')[0];

                    if(imgID != null) {
                         svg.setAttribute('id', imgID);
                    }

                    if(imgClass != null) {
                         svg.setAttribute('class', imgClass + ' replaced-svg');
                    }

                    svg.removeAttribute('xmlns:a')

                    if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
                        svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
                    }
                    element.parentElement.replaceChild(svg, element)
                }
            }
            xhr.open('GET', imgURL, true)
            xhr.send(null)
        })

Il existe une bibliothèque open source appelée SVGInject qui utilise l' onloadattribut pour déclencher l'injection. Vous pouvez trouver le projet GitHub sur https://github.com/iconfu/svg-inject

Voici un exemple minimal utilisant SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

Une fois l'image chargée onload="SVGInject(this), l' <img>élément déclenchera l'injection et l' élément sera remplacé par le contenu du fichier SVG fourni dans l' srcattribut.

Il résout plusieurs problèmes avec l'injection SVG:

1. Les SVG peuvent être masqués jusqu'à la fin de l'injection. Ceci est important si un style est déjà appliqué pendant le temps de chargement, ce qui provoquerait sinon un bref "flash de contenu sans style".

2. Les <img>éléments s'injectent automatiquement. Si vous ajoutez des SVG dynamiquement, vous n'avez pas à vous soucier d'appeler à nouveau la fonction d'injection.

3. Une chaîne aléatoire est ajoutée à chaque ID dans le SVG pour éviter d'avoir le même ID plusieurs fois dans le document si un SVG est injecté plusieurs fois.

SVGInject est Javascript simple et fonctionne avec tous les navigateurs qui prennent en charge SVG.

Avertissement: je suis le co-auteur de SVGInject

Si nous avons un plus grand nombre de ces images svg, nous pouvons également prendre l'aide de fichiers de polices.
Des sites comme https://glyphter.com/ peuvent nous obtenir un fichier de police à partir de nos svgs.

Par exemple

@font-face {
    font-family: 'iconFont';
    src: url('iconFont.eot');
}
#target{
    color: white;
    font-size:96px;
    font-family:iconFont;
}

Vous pouvez utiliser data-image pour cela. en utilisant data-image (data-URI), vous pouvez accéder au SVG comme en ligne.

Voici un effet de survol en utilisant du CSS pur et du SVG.

Je sais que c'est désordonné, mais vous pouvez le faire de cette façon.

 .action-btn {
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
    height: 40px;
    width: 60px;
    display: inline-block;
 }

.delete {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#FB404B' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
     border-color:#FB404B;
     
 }
 
 .delete:hover {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#fff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");        
     background-color: #FB404B;
    }

<a class="action-btn delete">&nbsp;</a>

Vous pouvez convertir votre svg en URL de données ici

1. https://codepen.io/elliz/full/ygvgay
2. https://websemantics.uk/tools/svg-to-background-image-conversion/

Puisque SVG est essentiellement du code, vous avez juste besoin de contenu. J'ai utilisé PHP pour obtenir du contenu, mais vous pouvez utiliser ce que vous voulez.

<?php
$content    = file_get_contents($pathToSVG);
?>

Ensuite, j'ai imprimé le contenu "tel quel" dans un conteneur div

<div class="fill-class"><?php echo $content;?></div>

Pour définir enfin la règle sur les enfants SVG du conteneur sur CSS

.fill-class > svg { 
    fill: orange;
}

J'ai obtenu ces résultats avec une icône matérielle SVG:

1. Mozilla Firefox 59.0.2 (64 bits) Linux

2. Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux

3. Opera 53.0.2907.37 Linux

La solution sélectionnée est parfaite si vous voulez que jQuery traite tous les éléments svg de votre DOM et que votre DOM soit de taille raisonnable. Mais si votre DOM est volumineux et que vous décidez de charger des parties de votre DOM dynamiquement, cela n'a vraiment aucun sens d'avoir à réanalyser l'intégralité du DOM juste pour mettre à jour les éléments svg. Utilisez plutôt un plugin jQuery pour ce faire:

/**
 * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
 *
 * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
 *
 * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
 * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
 * any styles in a style class instead.
 */
(function ($) {
    $.fn.svgLoader = function () {
        var src = $(this).attr("src");
        var width = this.attr("width");
        var height = this.attr("height");
        var cls = this.attr("class");
        var ctx = $(this);

        // Get the svg file and replace the <svg> element.
        $.ajax({
            url: src,
            cache: false
        }).done(function (html) {
            let svg = $(html);
            svg.attr("width", width);
            svg.attr("height", height);
            svg.attr("class", cls);
            var newHtml = $('<a></a>').append(svg.clone()).html();
            ctx.replaceWith(newHtml);
        });

        return this;
    };

}(jQuery));

Dans votre html, spécifiez un élément svg comme suit:

<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>

Et appliquez le plugin:

$(".mySVGClass").svgLoader();

pour: les animations d'événement de survol, nous pouvons laisser les styles à l'intérieur du fichier svg, comme un

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <style>
  rect {
    fill:rgb(165,225,75);
    stroke:none;
    transition: 550ms ease-in-out;
    transform-origin:125px 125px;
  }
  rect:hover {
    fill:rgb(75,165,225);
    transform:rotate(360deg);
  }
  </style>
</defs>
  <rect x='50' y='50' width='150' height='150'/>
</svg>

vérifiez ceci sur svgshare