Графика в формате svg — довольно удобный и широкоиспользуемый формат изображения. Например в svg с помощью стилей css мы можем менять его цвет. И как мы знаем — данную процедуру мы можем проделать только если на странице присутствует разметка svg. А что делать если такое изображение подключено к странице с помощью тега img. В таком случае нам на помощь придет следующий код:
(function($ = jQuery) {
$('img.svg').each(function() {
let img = jQuery(this);
let imgID = img.attr('id');
let imgClass = img.attr('class');
let imgURL = img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
let 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, 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');
});
})();
- Берем его и помещаем в файл со скриптами. (Обращаю внимание, что данный код будет работать только при условии подключенного jquery.)
- Затем на нужной нам странице находим тег img изображение которого хотим развернуть и добавляем к нему класс «svg»
