[Résolu] Stylisé une image avec une source en .svg

Bonjour.

Cela fait un moment que je rencontre des problème lorsque je souhaite apporté du style à mes images qui ont des sources en .svg

Par exemple j'ai cette image:

<img src="image.svg" class="svg" />

Maintenant dans mon fichier style.css j'aimerais faire ceci:

.svg
{
  fill: white;
}

Le problème est que le style ne s'applique pas.

En cherchant sur internet, j'ai mis la main sur un script jQuery qui permet de transformer mon svg en svg en ligne:

$().ready(function()
{
  $('img.svg').each(function()
  {
      var $img = $(this);
      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');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width'))
        {
          $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'));
        }

        // Replace image with new SVG
        $img.replaceWith($svg);
      }, 'xml');
  });
});

Une fois ce script ajouté, mon style css est bien appliqué à mon image mais le problème est que si j'ai d'autres images svg avec une classe différente de "svg", ca ne fonctionne plus...

Du coup j'aimerais savoir comment modifié le script pour qu'il fonctionne sur toutes mes images quelque soit leur classe voir même leur id ???

Merci d'avance !
Modifié par TooKi (21 Nov 2018 - 16:34)

salut,
je ne sais pas si c'est possible et j'ai des doutes mais pourquoi ne pas inclure directement ton SVG en PHP ?

C'est à dire ?

Tu veux dire placer directement la balise SVG dans mon fichier PHP ???

Si c'est le cas je ne souhaite pas procéder comme ça car les balises svg contiennent souvent beaucoup de lignes de code et ca alourdirai considérablement mon fichier PHP, c'est pour ca que je préfère passer par la balise img

Merci pour vos réponses effectivement en faisant un include PHP c'est niquel je n'y avais jamais pensé