How to Use SVG Images on Website

For newbies, terms like SVG, png, gif, and all are references to image files. They see no difference between SVG and all other image formats and end up dumping their project with all kind of image elements. The fact is that the obvious difference is just a zoom away.

Why SVG is a good replacement in 2019?

The SVG files are small and are not based on pixels like every other image files. To be more precise, we have got two types of image files. Raster images and vector images. Raster images are based on pixels. They are large in memory when compared to SVG images, and also pixelate when we zoom in.

On the other hand, SVG images are based on shape and path algorithm, and never pixelate no matter how large their size is increased. They are relatively less in memory than raster images.

There are practically a plethora of advantages on using vector images in our projects, and even in our daily tasks like sending images over email.

In this article, let’s focus on using SVG on HTML sites, WordPress, and as icon fonts.

---

Using SVG on static HTML web pages

SVG is based on the XML markup language. The primary requisite to working on SVG will be the knowledge in HTML. You can simply add SVG image on HTML page by using img tag, for example:

<img src="brush.svg" alt="LineIcons Brush Icon">

As we know, static pages are meant to serve a single purpose (mostly) and are expected to load faster. What if you could hardcode images into the page, just like you code all the elements of the site. Using SVG on HTML web pages make it possible, and assure quality, and fast loading time.

The advantages include but not limited to – you could easily style the images using CSS, and even on javascript. But, there are some downsides too. The older browsers which, hopefully, you don’t use anymore do not support SVG files. Still, most of the modern browsers do not disappoint you on that.

If you would like learn more about using SVG on HTML pages, I would like to suggest this article by CSS-Tricks.

---

Using SVG on WordPress sites

Well, using SVG on WordPress might fall slightly above on the complexity scale. As we mentioned above, you are expected to have some good knowledge on HTML, CSS, and of course, WordPress.

Plugin Way:

The easiest way to SVG on WordPress is using SVG Support Plugin It supports importing and using SVG in WordPress media library without any hassles.

FTP Way:

You could upload SVG to your WordPress directly to the root directory if you have FTP access, and note the path so that you could include the image wherever you want. Again, it would require sound technical knowledge. After uploading you can embed SVG just like HTML img tag which is already shown.

Using SVG on WordPress has some security issues as anything can be dumped into the code that would turn out to be malicious. So, you cannot always rely on SVGs that doesn’t come from a reliable source. However, SVG can aid you in SEO as the text in these images is accessible. If you would like to learn more and step by step using SVG on WordPress you may follow this tutorial by WPbeginner.

---

Icon Fonts or SVG?

Well, icon fonts had been a great replacement for raster images to be used on websites. They added a great performance boost to the sites by contributing to the reduction of loading time.

However, they had their downsides. For example, the icon sets come with a lot of icons that are redundant and never used. They just take up space. Also, they make additional HTTP requests, and sometimes browser fails to interpret them. That’s where vector images prove to be a decent alternative. SVG icons can be added to the site inline for flexibility in customization instead of putting them within tag.

Though icon fonts are almost as flexible as SVG, vector images got some additional options like multi colored icons. Positioning the SVG is a piece of cake when compared to Icon Fonts that require a lot of aligning.

Likewise, there are a lot of reasons why SVG is quite a replacement for Icon Fonts and there is no wonder that developers are moving to SVG.

Still, Icon Fonts are not obsolete yet. SVG is not cached by browsers normally, but Icon Fonts are. Hence, the loading time is somewhat less when it comes to Icon Fonts.

If your site requires a lot of images, then it will be wise for you to go with Icon Fonts than SVG. Please follow our documentation to check step by step usage guide with examples of using icon fonts.

At the end of the day, it’s your requirement that matter. Everything comes with its own advantages and disadvantages.