Render SVG in HTML

Hey guys.

As many of you know, SVG icons have become more popular than PNG or JPG icons due to their high resolution and the ability to customize and animate them.

Users aren’t advised to use PNG icons in their web applications due to many reasons. Some of these reasons are:

1. The icons resolution gets corrupted when the size of the icon changes such as in responsive designs
2. When the user is required to change or customize the icon (as an example its color), he needs to use a graphical editing tool in order to change all the icons

Replace png/jpeg images with svg

The first thing you need to do is to replace the png/jpeg icons with svg icons. You can create your own svg icons using Adobe Illustrator, or you can use this site to download some for free. The flaticon site contains a large collection of icons.

Add the images to Your project

Once the icons have been created, they should all be placed in one folder. The user doesn’t have to use the background-image attribute in styelsheets to insert the icons. Moreover, svg icons are source vector images, so the user doesn’t have to worry about the original size of the icon as they can be customized later on using stylesheets if needed.

Referring to the post of dynamic-jquery mapping, we used the “data-” prefix to dynamically map predefined values to their corresponding html controls. So here we will do something similar.
We added an empty span element (you can use the div element instead) with a couple of attributes like “data-svg” for the image location, and the “data-class” for the styling of the image.

<span id="img1" class="dynamic-svg" data-svg="https://www.theplrstore.com/wp-content/uploads/2017/05/download.svg?x=23" data-class="style1" data-width="60px" data-height="60px"></span>
<span id="img2" style="position:absolute;top:100px" class="dynamic-svg" data-svg="https://www.theplrstore.com/wp-content/uploads/2017/05/download.svg?x=432" data-class="style1" data-width="60px" data-height="60px"></span>
<span id="img3" class="dynamic-svg" data-svg="https://www.theplrstore.com/wp-content/uploads/2017/05/download.svg?x=54" data-class="style2" data-width="60px" data-height="60px"></span>

The icons will still have to be styled using css stylesheets. For example, the “fill” attribute allows us to easily color the SVG icons.

	.style1{
		fill:red !important;
	}
	.style2{
		fill:green !important;
	}

The rendering of the icons will be done using jquery. We will select all the controls having the classname “dynamic-svg” and iterate through them all. Each icon will be rendered asynchronously to speed up the loading process.

	var list = $('.dynamic-svg');
	for(var i = 0, len = list.length; i < len; i++){
		var item = $(list[i]);
		var svgUrl = item.attr('data-svg');
		var svgClass = item.attr('data-class');
		var width = item.attr('data-width');
		var height = item.attr('data-height');
		renderSVG(item, svgUrl, svgClass, width, height);
	}

The render method called on each icon’s span element will add a new (svg) element within the span. We will not replace the span element by the svg because we don’t want to change the design implemented on the span element (position, alignment, etc…). Therefore, this method adjusts the width, height and style (in this case the color) of the svg element.

	function renderSVG($item, svgUrl, svgClass, width, height) {
		jQuery.get(svgUrl, function(data) {
			var $svg = jQuery(data).find('svg');
			$svg.find('path').removeAttr('fill');
			$svg.find('g').removeAttr('fill');
			if ($item.attr('id')) {
				$svg = $svg.attr('id', $item.attr('id'));
			}
			if (svgClass) {
				$svg = $svg.attr('class', svgClass + ' svg-added');
			}
			$svg.attr('width', width);
			$svg.attr('height', height);
			$svg = $svg.removeAttr('xmlns:a');
			$item.append($svg);

		}, 'xml');
	}