WordPress img tag到svg tag

---

We can use SVG image in <img> tag but with that method, we cant use javascript animation or CSS style on that SVG. So the idea is we will put our SVG image as HTML image tag for example

<img src="logo.svg"/ >

MarkupCopy

And we will get out with a <svg> tag.

Before we get into it, wordpress dont allow upload svg file by defult. so we need to put a line of code on wp-config.php

wp-config.php

/* Allow Unfiltered Upload. /
define('ALLOW_UNFILTERED_UPLOADS', true);

PHPCopy

Now need put this code on functions.php

functions.php

/** add SVG to allowed file uploads **/
function agora_custom_mime_types( $mimes ) {
	// New allowed mime types.
	$mimes['svg'] = 'image/svg+xml';
	$mimes['svgz'] = 'image/svg+xml';
	$mimes['doc'] = 'application/msword';
	 
	// Optional. Remove a mime type.
	unset( $mimes['exe'] );
	 
	return $mimes;
}
add_filter( 'upload_mimes', 'agora_custom_mime_types' );

PHPCopy

Now the final part JavaScript

custom.js

/** Image to SVG **/
// chage img tag class to svg or other
$('img.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');

$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(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');

});

---