<?php
// replace every svg with its inline code
function replace_img_if_svg_with_inline_svg() {
?>
<script type="text/javascript">
(function($) {
$('img').filter(function() { return this.src.match(/.*\.svg$/); }).each(function(){
var imgSVG = $(this);
var imgURL = $(this).attr('src');
var imgAlt = $(this).attr('alt');
var imgTitle = $(this).attr('title');
var imgClass = $(this).attr('class');
$.get(imgURL, function(data) {
var svg = $(data).find('svg');
// Remove invalid XML tags - but most svgs need that setting
// svg = svg.removeAttr('xmlns xmlns:xlink');
// add replaced image's alt tag to the inline SVG
typeof imgAlt === 'undefined' || imgAlt === '' ? (svg = svg.attr('alt', 'Replaced Image')) : (svg = svg.attr('alt', imgAlt)) ;
// add replaced image's Title tag to the inline SVG
typeof imgTitle === 'undefined' || imgTitle === '' ? (svg = svg.attr('title', 'A SVG Image replaced by its inline code')) : (svg = svg.attr('title', imgTitle));
// Add replaced image's classes to the new SVG and add replaced-svg as new class
typeof imgClass === 'undefined' || imgClass === '' ? (svg = svg.attr('class', 'replaced-svg')) : (svg = svg.attr('class', imgClass+' replaced-svg'));
// check where the logo is placed : left or right or centered in the header
if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_left')) {
svg.attr('preserveAspectRatio', 'xMinYMid meet');
};
if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_right')) {
svg.attr('preserveAspectRatio', 'xMaxYMid meet');
};
if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_center')) {
svg.attr('preserveAspectRatio', 'xMidYMid meet');
};
// Replace image with inline SVG Code
imgSVG.replaceWith(svg);
}, 'xml');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'replace_img_if_svg_with_inline_svg');
Comments
0 B
|👍
/👎