All about SVG (+ a quick how-to on using SVG with WordPress)

I’ve recently started working with a lot of SVG files in my personal website, and I’m excited to use the format in projects with clients, too. Here you can find a quick overview of SVG: what it is (and what vector graphics in general are), when to use it, and how to use it with WordPress.

Skill level for this article

This is intended to be a very basic guide for those completely new to SVG. If you don’t know or aren’t sure what vector graphics are, this is probably a good starting point for you.

If you’re looking for more advanced articles on SVG usage, I recommend Sara Soueidan’s articles on SVG as an excellent starting point to really delving into the capabilities of SVG.

What is SVG?

SVG stands for Scalable Vector Graphics. We’re talking about vector graphics here, versus raster graphics (JPG and PNG are examples of raster graphics). Let’s step back a second and look at the difference between vector and raster graphics.

According to the Wikipedia article on raster graphics:

raster graphics image is a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats

And the Wikipedia article on vector graphics states:

Vector graphics are based on vectors, which lead through locations called control points or nodes. Each of these points has a definite position on the x and y axes of the work plane and determines the direction of the path; further, each path may be assigned various attributes, including, but not limited to, such values as stroke color, shape, curve, thickness, and fill

…did you follow all that? Don’t panic if you didn’t!

Let’s take a look at a visual example comparing a raster and vector image. In the examples below, the smiley face on the left is at its default size; the smiley on the right shows you what it looks like zoomed in 200%:

Smiley face resized as a raster image
Resizing a PNG (raster) file
Smiley face resized with SVG
Resizing a SVG (vector) file

The difference is (hopefully) more understandable here. When you zoom in on a raster image, individual pixels are displayed as squares (creating a blurry look that becomes more and more pixelated the further you zoom in); vectors, on the other hand, use things called “control points” and “nodes” to render the image at any resolution — without losing any image quality in the process.

I find it helpful to think of SVG as being composed of shapes. These shapes are technically primitive objects, so if it helps you to think of SVG in terms of a programming language and its data types, that works great! If not, don’t despair. Let’s just stick with the idea of shapes — an SVG file may be composed of: circles, squares, lines, polygons, etc. Even a more complex SVG illustration is going to be made up of these shapes and more layered and placed on top of one another. The nice thing about these shapes is that, because of how SVG is written behind the scenes, the code can be translated to different sizes without losing any of its quality.

Illustration of a house made in SVG
SVG illustration

The representation of shapes in SVG doesn’t depend on the dimensions of the object, but rather can be represented at different dimensions dynamically. And this is great for:

1) The web – responsive web design prepares a site for a multitude of different screen sizes, often which can’t be entirely predicted, and are constantly changing. SVG allows your site icons, logos, and other graphics to be viewed at an infinite possibility of sizes, without losing any quality in the process

2) Print – vector art is ideal for printing, since the art will print very crisp even when resized

Why should I use SVG?

The main thing that drew me into exploring SVG more in-depth was that, as discussed above, SVG resizes crisply so you get the same high quality image at any screen size. Here are my other top reasons for using SVG in projects and suggesting its use to others:

1) Tends to be smaller in file size than raster images

2) Supports accessibility; see the W3C documentation on accessibility in SVG for more info

3) Elements/attributes in SVG can be animated – I won’t delve into animations with SVG in this article, but it’s definitely a file type that plays well with modern capabilities in CSS3

When should I use SVG?

SVG is great for simple shapes and icons. It works well for logos and certain illustrations. Here are some examples of SVG icons/illustrations I made and am currently using on my site:

SVG icon of computer monitor and phone        SVG icon for HTML5, CSS3, and JavaScript        SVG icon of girl

SVG isn’t so great when it comes to highly textured images, or photographs.

How do I create/save/edit SVG?

Not every image editor supports SVG. (Technically, you can create/edit SVG in any text editor, but depending on your skill level and needs, this route may be a bit more advanced than necessary for your project.)

Adobe Illustrator is a well-known program for working with SVG, but if you’re working on a budget or just want to try out some free options before investing in an Adobe license, there are alternatives out there.

Inkscape is an open source vector graphics editor of professional quality available for free download. It works with Windows, Mac OS X, and Linux.

Gravit is another free option. Unlike Inkscape, however, Gravit isn’t available for download, but instead runs in the browser. If you’re interested in trying out some vector design work for free and don’t want to deal with downloading and installing a program, Gravit might be a good fit.

For clients and those new to SVG and vector graphics in general, I generally recommend Inkscape. It’s great quality for being free software, and the open source nature of the project is something I really like as well. Pretty much everything you need to get started with SVG is available in Inkscape, and there’s plenty of documentation if you’d like to learn more about the program.

Using SVG on WordPress

Now that you have a good sense of what exactly SVG is and what it can do, let’s switch gears and look at using SVG on WordPress.

WordPress turns SVG off by default, since it can be a security risk if you have multiple users that upload media files. The reason for this is SVG’s text-based nature; someone with malicious intent could potentially embed some dangerous code into an SVG file, and then upload it to your site.

If you’re the only person uploading media files to your site, or you trust any other authorized users, enabling SVG through a plugin shouldn’t really be a problem.

If you would like to enable SVG on your WordPress.org site*, the easiest method is probably to install a plugin that allows you to upload SVG files with WordPress’s native Media uploader. Searching WordPress plugins for SVG brings up several results. Currently, I’m using SVG Support. When looking for any  WordPress plugin, I always check to see how many current users there are. With 20,000+, SVG Support has a wide userbase. I also check to see when the plugin was last updated, and at the time of this writing, SVG Support was updated 7 days ago, which gives me confidence that the plugin developer is keeping up-to-date to make sure their plugin is compatible with current version of WordPress and any other issues that might arise.

With SVG Support, it’s simply a matter of activating the plugin, and then SVG files can be uploaded just like any other image file to the WordPress Media library! Once you’ve got your file uploaded, you’re ready to start putting it into posts, pages, or wherever you’d like on your WordPress site.

* Please note: these instructions are for sites using WordPress.org; I am not familiar with WordPress.com and how it may or may not handle the usage of SVG files.

Leave a Reply

Your email address will not be published. Required fields are marked *