Использование иконок SVG

Question

Я использую свои собственные значки SVG и пытаюсь найти наилучший способ их использования.

Я хотел бы сохранить цвет, но также настроить его, если необходимо, для соответствия теме илипри использовании наведения.

Я пытался использовать следующий сценарий, который превращает следующее во встроенный SVG, но когда я загружаю свои сценарии внизу моего HTML-документа, я получаю ужасный эффект прыжка.

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

        // Check if the viewport is set, else we gonna set it if we can.
        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');

});
});

svg {width: 350px; height: 350px;}
svg path {fill: #000 !important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" />

Затем я попытался встроить SVG, скопировав код из Illustrator, но единственный способ изменить цвета - это удалитьони в html doc, так как мой css не переопределит их.

Как лучше всего удерживать их от прыжков?

Answer 1

Встроенные SVG лучше всего подходят для ИМО.

Экспорт SVG-файлов с помощью Illustrator (если у вас возникли проблемы, следуйте этому превосходному руководству Колина Лорда).

Затем удалите цвета из кода SVG и установите их только с помощью CSS. Если у вас возникли проблемы с переопределением цветов, вы можете указать свои идентификаторы SVG для уточнения.

Answer 2

Если вы идете по встроенному маршруту (что является моим предпочтительным вариантом) - вам на самом деле не нужно большинство HTML-кода, который обычно выдает Illustrator.

Вот пример вашей SVG с минимальным кодом, тогда вы можете просто использовать CSS, чтобы изменить цвета, как вы хотите: -)

svg {
  width: 350px;
  height: 350px;
}

svg path {
  fill: #000;
  transform-origin: 0 0;
  transform: scale(3)
}

#svg3 path {
fill: turquoise;
}

#svg3:hover path {
fill: green;
}

<svg id="svg2">
  <path d="m0,12.402,35.687-4.8602,0.0156,34.423-35.67,0.20313zm35.67,33.529,0.0277,34.453-35.67-4.9041-0.002-29.78zm4.3261-39.025,47.318-6.906,0,41.527-47.318,0.37565zm47.329,39.349-0.0111,41.34-47.318-6.6784-0.0663-34.739z" id="path4"/>
</svg>


<!-- Another exmaple below using CSS to change the colours -->
<svg id="svg3">
  <path d="m0,12.402,35.687-4.8602,0.0156,34.423-35.67,0.20313zm35.67,33.529,0.0277,34.453-35.67-4.9041-0.002-29.78zm4.3261-39.025,47.318-6.906,0,41.527-47.318,0.37565zm47.329,39.349-0.0111,41.34-47.318-6.6784-0.0663-34.739z" id="path4"/>
</svg>