replace-svg

<?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');