Last Updated: February 25, 2016

Inline SVG with html5

We all know the advantages of Scalable Vector Graphics. Graphics are defined in xml format which causes smaller file size while the image can be scaled to any size without degradation.

But if you use a lot of graphics on a web page, the number of http queries could increase greatly which may also increase the page loading time. With Inline SVG technique you can put your graphics directly in your html source code, so there is no need to load any external files.

Just imagine loading your html code and all the graphics in the same http request. Yes, it sounds good, and it's easy as pie:

<!DOCTYPE html>
<html>
<head>
<title>My Inline SVG</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px"
 height="50px" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<g>
<polygon fill="#212121" points="0,46.334 32.5,22.833 54.5,39.834 79.333,19.333 74,14.5 100,6.667 91.667,29.334 86.167,25 
    55.5,50 32.167,29.334"/>
</g>
<g>
<polygon fill="#3EE02B" points="36.975,7 39.042,25.959 50,34.078 47.935,7"/>
<polygon fill="#3EE02B" points="49,0 51.881,35.335 54.636,37.59 61.838,30.951 59.208,0"/>
<polygon fill="#3EE02B" points="61.939,12.05 63.305,29.861 73,21.933 73,12"/>
</g>
</svg>
</body>
</html>

In my sample above I just inserted a simple svg logo (generated with Adobe Illustrator) into my html code. No img tag, or any css background tricks needed, just the plain svg code.

I hope this helps you too to solve some performance issues on heavy load web applications!