What Are SVG Images And Why Should You Use Them?

You may have seen images on the internet that have an .svg extension. But what are they? We’ll talk about that, but first I need to tell you something about the images you’re already familiar with.

Bitmapped Images

Most of the image types you’re probably familiar with on the web are JPG, PNG, GIF, and WebP. These image types are called “bitmapped” images, because every single pixel is assigned a color. This means when you zoom in, or make an image larger, those pixels simply get larger. 

Here’s an example.

The result is that images look blurry. This happens regardless of whether you use an image editor to enlarge an image or use CSS (or HTML) to enter larger dimensions than it really has.

Vector Graphics

SVG stands for Scalable Vector Graphics, so lets talk about what vector graphics are.

A vector graphic identifies coordinates in the image and says “color everything inside this space red” for example.  This will give a square 4 points, and everything inside is red.

This means that instead of being a binary file, like a bitmapped image, SVG files are text files.

The text inside is a form of XML, and simply describes what areas of the image should be what color.

So what’s with the S, for Scalable? 

When you enlarge a bitmapped image, the individual square pixels just get bigger, making their edges more visible and causing the image to look blurry or blocky.

A vector image, on the other hand, is made using mathematical formulas, so it can be resized to any size while keeping sharp, clean lines. This means a vector image that’s originally 200 pixels wide can be displayed at 1200 pixels wide without losing any quality. Below is the same image, but in SVG format, which is a type of vector image.

Note that all three of those are actually the same file, but rendered at different sizes

When Should I Use SVG?

SVGs are useful when you need the same image in different sizes. For example, you can use your logo as a large image in the header, a smaller version in the footer, and in various sizes on your media page – all from the same file.

SVGs are also great for print work! Remember Adobe Illustrator? Quark? or even Inkscape? They’ve been around for decades making vector graphics for print work. 

If your website logo is SVG then you can use the exact same file to send to your printer for T-Shirts, billboards, business cards, etc.

Incidentally, Flash was all vector, and many animated television shows are still all vector. This allows them to look great at any resolution TV screen. Old CRTs at 320×200? Looks great! 4k? 8k? They still look great!

In summary, SVG is ideal for logos and icons.

When Should I NOT Use SVG?

When the image is very complicated.

Keep in mind that an SVG file is a text file.  An image of a square with one color inside is a VERY small file.  Four of five lines of code, max. A circle has hundreds or thousands of points, but might still only be a few dozen lines of code.

A logo with text has an enormous number of points, but maybe only one color, which still isn’t too bad.

As an example, the WebP version of the MediaForge logo is 7.7Kb, but the SVG is 35Kb! Much bigger!

That said, as far as images go, 35K isn’t terrible, and you gain the advantage of scalability. Also, since it’s the same image everywhere on my site, it is only downloaded and cached once.

Photos are not good for SVG. Nearly every pixel is a different color, and needs to be marked out and colored, which could lead to thousands of lines of code. This would very quickly make your file size much too large for the web.

You also shouldn’t use an SVG for anything that can be done with CSS. SVGs can do color gradients very well, but not better than CSS. Therefore on the web, you should use CSS.

Dangers!

Because SVGs are text files, it’s possible to hide malicious code inside of them.

This is one of the reasons they’re not supported in WordPress.  The media library has many functions to validate binary images, but nothing at all to validate SVG files and make sure they’re safe.

If you made the file, you can be certain that there is no hidden malicious code, but if you find an SVG on the web, it COULD be an attack vector.  (see what I did there?)

If you find an SVG you want to use, but aren’t sure it’s safe, you can open it in a text editor (this won’t hurt even if there’s bad code in there), copy all of the code and then paste that code into the SVG Sanitizer. 

Unless the SVG is very dangerous, you should get a clean version of the image, even if the original was malicious.

Fun fact – the demo that you see when you first load the SVG Sanitizer is full of malicious code, so you can see what it might look like.

How To Use SVG In WordPress

Plugins

It’s true WordPress doesn’t have native support for SVG, but that doesn’t mean you can’t use them.  There are quite a few plugins that enable SVG uploads in the media library.

These plugins have the required code to inspect the contents of the file and look for malicious code and make sure that they’re safe to use.

Raw Code

If you open an SVG file in a text editor you can copy all the code and paste it into an HTML block in the Gutenberg editor and it’ll render as an image, no plugins required.  This method gives you fewer options though. 

When you use a plugin with the Media Library, insert an Image block, and you have all the options for sizing, borders etc. 

Anything you insert directly into an HTML block is going to render how the XML says it should, which might not be what you want.

How To Make SVG Images

In my opinion the easiest way is to use a tool like Canva. Anything you make in Canva can be saved as an SVG and then simply used.

If you already make a lot of SVGs (you may not even know it!) with Adobe Illustrator or Inkscape, then you probably already have the skill to make advanced SVGs.

If you would like to go deeper into SVGs, I recommend looking at Inkscape. It’s a cross platform, open source application, that’s been around a long time. It also comes with a lot of documentation.

Bonus Round!

SVGs can be animated! (Again, remember Flash?) 

Check these out. Canva may be your friend here as well, they have some wonderful tools for animating elements in their editor, and like I said above, anything made there can be exported as SVG.

Summary

SVGs are perfect in the right context, providing infinite scalability and small file sizes. They can even have transparency. But if they’re super complex the file size can become unwieldy, and you lose many of the advantages.

The post What Are SVG Images And Why Should You Use Them? appeared first on Performance Hub.