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:
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.
<!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 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>
<div style="width: 500px; height: 500px; background: url(https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg);"></div>
<img src="https://www.ovidiuconeac.ro/non-wp/posts/using_scalable_vector_graphics/android.svg" alt="Android">
<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
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.
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.