HTML Img Tag To HTML SVG Tag [WordPress] | Code For Developers

HTML img tag to HTML SVG tag [WordPress]

Image to SVG for WordPress. Generate svg code from image file

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"/ >

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

/* Allow Unfiltered Upload. /

Now need put this code on 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' );

Now the final part JavaScript

/** Image to SVG **/
// chage img tag class to svg or other
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
$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

}, 'xml');


That’s all. Make sure you have svg class on your img tag or chnage your JavaScript code


Previous Code

WP Post Query with variable item column size

TweetShareSharePin0 Shares ...

Next Code

Conditional statement to show pagination

Conditional statement to show pagination on WordPr ...

Leave a Reply

Your email address will not be published. Required fields are marked *

If you find it useful

Buy me a coffee









WP Plugin Dev

Remove Website field from WordPress comment & Change cookies remember text

Remove Website field from WordPress comment & Chan ...

Add Custom element item in wp nav menu

Add Element on last item of wp nav menu ...

WordPress .htaccess code for redirect www to non www url

Remove www from url or redirect ...

Protected: WP user Login Notification

This code is Protected. Contact Admin for password

WooCommerce Mostly used Shortcode

Most use shortcode for popular eCommerce plugin Wo ...