Графіка у форматі 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”
