Engineering

Using Scalable Vector Graphics (SVG)

Posted Ovidiu Lucian CONEAC

Scalable Vector Graphics, or SVG for short, is a 2D vector image format based on the XML syntax.

The main advantage of SVG over raster image formats, like .jpeg .gif .png, etc, is the lossless quality of images on the web.

Of course, there are other advantages as well, but this is not the point of this discussion.

We are going to use the following SVG in our examples:

Good Android
Good Android

 

You might have already noticed that this is actually a PNG file, clicking on it will take you to the actual SVG file and you can download it from there. The reason for this is, that SVG is considered a security risk by WordPress, and you cannot upload SVG images to WordPress without hacks. You can find out more about why SVG is considered a security risk here Cross-site Scripting (XSS) with Scalable Vector Graphics.

So let’s see the approaches in using SVG with HTML.

 

Inline SVG
<!DOCTYPE html>
<html>
<body>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="max_width__x2F__height" display="none">
	<path display="inline" d="M499.001,1v498H1V1H499.001 M500.001,0H0v500h500.001V0L500.001,0z"/>
</g>
<g id="androd">
	<path fill="#9FBF3B" d="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199
		L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41
		c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272
		c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298"/>
	<path fill="#FFFFFF" d="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08
		c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438"/>
	<path fill="#FFFFFF" d="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08
		c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438"/>
	<path fill="#9FBF3B" d="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09
		c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z"/>
	<path fill="#9FBF3B" d="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744
		c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744
		c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489
		H140.396z"/>
	<path fill="#9FBF3B" d="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09
		c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z"/>
</g>
</svg>

</body>
</html>

 

Object SVG
<object type="image/svg+xml" data="https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg">
    Your browser does not support SVG
</object>

 

Background SVG
<div style="width: 500px; height: 500px; background: url(https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg);"></div>

 

Img SVG
<img src="https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg" alt="Android">

 

Iframe SVG
<iframe src="https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg" width="500" height="500" sandbox>
    <img src="https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg" alt="Android">
</iframe>

 

Puting it all together

 

Lessons learned

So what is the best way to use SVG in your web pages? As usual, it depends on what you want to achieve.

From a performance perspective, inline SVG is the best way to use this image form in your web pages, to a certain degree of course. To many inline SVG in the same HTML page will slow down the loading of the page, and also you have to consider that the browser can not cache inline SVGs, so basically everytime you request the page, all SVGs will be “downloaded” again.

With inline SVG you have the advantage of fewer HTTP requests, and you can also take advantage of the power of the DOM, meaning you can style the SVGs, parts of the SVGs, you can even use JavaScript to manipulate them. Pretty awesome, right?

The disadvantage is clutter. An SVG can have a lot of content, and a lot of SVGs in the same HTML file will seem like a lot of useless stuff interfering with the actual development process. They are also more difficult to maintain.

If clutter becomes an issue, then the HTML <img> approach, or background image approach can be the solution. Of course, using too many external SVGs can slow down your page because of too many HTTP requests. Also, keep in mind that you do not have the same flexibility as with the inline SVGs.

The web suggests object SVGs to be the best approach, whatever the case, you have to clearly understand the requirements, the constraints, and find the best approach suitable for your particular need.

There are also other ways to use SVGs, like iframe and embed, but these techniques are limited and better to be ignored.

So just consider using the object, inline, <img> and image background approaches.

Spread the knowledge