Title: Version without jQuery?
Last modified: August 11, 2017

---

# Version without jQuery?

 *  Resolved [mikeldev](https://wordpress.org/support/users/mikeldev/)
 * (@mikeldev)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/version-without-jquery/)
 * I realised that the site I am working with has jQuery enabled when I don’t use
   it at all, so [I disabled](https://gist.github.com/MikelArnaiz/e889f58f7eef040af043a6266ac79460).
   I found out everything worked but no inline SVG where added.
 * The SVG Support javascript `svgs-inline-min.js` located at `/wp-content/plugins/
   svg-support/js/min/svgs-inline-min.js` use jQuery functions.
 * What about providing an option to enable a jQuery free plugin version?
 * The final script would be bigger but still smaller than jQuery script.
 * The non minified code is:
 *     ```
       jQuery(document).ready(function ($) {
   
       	// Polyfill to support all ye old browsers
       	// delete when not needed in the future
       	if (!String.prototype.endsWith) {
       		String.prototype.endsWith = function(searchString, position) {
       			var subjectString = this.toString();
       			if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
       				position = subjectString.length;
       			}
       			position -= searchString.length;
       			var lastIndex = subjectString.lastIndexOf(searchString, position);
       			return lastIndex !== -1 && lastIndex === position;
       		};
       	} // end polyfill
   
       	// Another snippet to support IE11
       	String.prototype.endsWith = function(pattern) {
       		var d = this.length - pattern.length;
       		return d >= 0 && this.lastIndexOf(pattern) === d;
       	};
       	// End snippet to support IE11
   
       	// Check to see if user set alternate class
       	var target  = ( cssTarget !== 'img.' ? cssTarget : 'img.style-svg' );
   
       	$(target).each(function(index){
       		var $img = jQuery(this);
       		var imgID = $img.attr('id');
       		var imgClass = $img.attr('class');
       		var imgURL = $img.attr('src');
   
       		if (!imgURL.endsWith('svg')) {
       			return;
       		}
   
       		$.get(imgURL, function(data) {
   
       			// Get the SVG tag, ignore the rest
       			var $svg = $(data).find('svg');
   
       			var svgID = $svg.attr('id');
   
       			// Add replaced image's ID to the new SVG if necessary
       			if(typeof imgID === 'undefined') {
       			    if(typeof svgID === 'undefined') {
       					imgID = 'svg-replaced-'+index;
       					$svg = $svg.attr('id', imgID);
       				} else {
       					imgID = svgID;
       				}
       			} else {
       				$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 svg-replaced-'+index);
       			}
   
       			// Remove any invalid XML tags as per http://validator.w3.org
       			$svg = $svg.removeAttr('xmlns:a');
   
       			// Replace image with new SVG
       			$img.replaceWith($svg);
   
       			$(document).trigger('svg.loaded', [imgID]);
   
       		}, 'xml');
       	});
   
       });
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [mikeldev](https://wordpress.org/support/users/mikeldev/)
 * (@mikeldev)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/version-without-jquery/#post-9410679)
 * I did myself.
 *     ```
       // IE9+
       function onready(fn) {
       	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
       		fn();
       	} else {
       		document.addEventListener('DOMContentLoaded', fn);
       	}
       }
   
       onready(function(){
       	var target  = 'img.style-svg';
       	var images = document.querySelectorAll(target);
   
       	// IE9+
       	images.forEach(function(image, index){
       		var imgID = image.getAttribute('id'); // IE8+
       		var imgClass = image.getAttribute('class'); // IE8+
       		var imgURL = image.getAttribute('src'); // IE8+
   
       		if (!/.svg$/g.test(imgURL)) {
       			return;
       		}
   
       		// IE9+
       		var request = new XMLHttpRequest();
       		request.open('GET', imgURL, true);
   
       		request.onload = function() {
       			if (request.status < 200 || request.status >= 400) {
       				console.log('Target server reached but it returned an error');
       			} else {
       				// Get the SVG tag, ignore the rest
       				var svgWrapper = document.createElement("div");
       				svgWrapper.innerHTML = request.responseText;
       				var svg = svgWrapper.querySelector('svg');
   
       				// Add replaced image's ID to the new SVG if necessary
       				if(!imgID) {
       					var svgID = svg.getAttribute('id');
       					if(!svgID) { 
       						imgID = 'svg-replaced-'+index;
       						svg.setAttribute('id', imgID);
       					} else {
       						imgID = svgID;
       					}
       				} else {
       					svg.setAttribute('id', imgID);
       				}
   
       				// Add replaced image's classes to the new SVG
       				if(imgClass) {
       					svg.setAttribute('class', imgClass+' replaced-svg svg-replaced-'+index);
       				}
   
       				// Remove any invalid XML tags as per http://validator.w3.org
       				if (svg.hasAttribute('xmlns:a')) {
       					svg.removeAttribute('xmlns:a');
       				}
   
       				// Replace image with new SVG
       				image.outerHTML = svg.outerHTML; // IE8+
   
       				// Custom Trigger, IE9+
       				if (window.CustomEvent) {
       					var event = new CustomEvent('svg.loaded', [imgID]);
       				} else {
       					var event = document.createEvent('svg.loaded');
       					event.initCustomEvent('svg.loaded', true, true, [imgID]);
       				}
   
       				document.dispatchEvent(event);
       			}
       		};
   
       		request.onerror = function() {
       			console.log('There was a connection error of some sort');
       		};
   
       		request.send();
       	});
       });
       ```
   
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/version-without-jquery/#post-9410700)
 * Hi [@mikeldev](https://wordpress.org/support/users/mikeldev/),
 * I’m so sorry for the late reply! I didn’t get an email notification for some 
   reason.
 * I just got your email with the code attached though and as mentioned will be 
   looking into this for you as soon as I have time 🙂
 * Thanks so much for your support and suggestion.
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/version-without-jquery/#post-9469086)
 * Hi there,
 * After some deliberation, I’m still trying to decide whether including this is
   necessary. I like the idea, but it’s hard to tell how useful it will be for the
   extra code in the plugin package’s overall footprint.
 * I think the best thing to do would be how you’ve implemented it, registering 
   your own version of the script (although I would do it in a little custom plugin).
 *     ```
       function bodhi_svgs_enqueue_script_no_jquery() {
       	wp_deregister_script( 'bodhi_svg_inline' );
       	wp_register_script( 'bodhi_svg_inline', get_stylesheet_directory_uri() . '/js/inline-svg-no-jquery.js', null, null, true );
       	wp_enqueue_script( 'bodhi_svg_inline' );
       }
       add_action( 'wp_enqueue_scripts', 'bodhi_svgs_enqueue_script_no_jquery' );
       ```
   
 * For others interested in this, please note, that this function would require 
   you to add the new JS file in your child theme, inside a js directory for example:
   `
   wp-content/themes/yourchildtheme/js/inline-svg-no-jquery.js`. I would recommend
   using a plugin as this isn’t really theme related.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Version without jQuery?’ is closed to new replies.

 * ![](https://ps.w.org/svg-support/assets/icon.svg?rev=1417738)
 * [SVG Support](https://wordpress.org/plugins/svg-support/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/svg-support/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/svg-support/)
 * [Active Topics](https://wordpress.org/support/plugin/svg-support/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/svg-support/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/svg-support/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/version-without-jquery/#post-9469086)
 * Status: resolved