Benefits of SVG Vector Graphics

An SVG, or scalable vector graphic, is a format for rendering two-dimensional images, most commonly used for such things as icons, logos and illustrations (our logo is!). The use of SVGs has become more widespread as the design trend continues to move in the direction of vector-based art. Developers can also embrace the trend as all modern browsers currently support the format, which wasn’t always the case; a fallback image was required, otherwise nothing would load and the site or section where it was used would appear broken. There are loads of other reasons designers and developers alike can rejoice in the use of SVGs. Let’s start by taking a look at the pros and cons (yes, there are always a few) and then delve into some more advanced stuff.

SVG Info

PROS

  • SVGs are rendered in XML (Extensible Markup Language) so the file size is really small; it’s just code. This provides a boost in load time and performance.
  • SVGs are fully scalable (hence the name) meaning you can scale it up and down without sacrificing image quality; JPG, PNG and GIF will all start to pixelate if stretched beyond the original size, distorting the quality and depreciating the website. The images will also render crisp on all retina devices; other image formats require an alternate or larger image size to achieve the same thing.
  • Because SVGs are just code, it’s an ideal format for animation. This could mean animating the entire image as a whole or just individual parts; loads of potential for really creative individuals and teams.
  • SVGs can be manipulated with CSS or Javascript, meaning you can target the different areas through classes, divs or tags (remember, it’s just code) and set different styles and behavior. (It is worth noting, this is only possible if you use the <svg> or object tags.)
  • Popular image editing software like Photoshop, Sketch and Affinity can export images as SVG so no coding knowledge is required.

CONS

  • It only works with two-dimensional images, so photographs do not work — basically anything you would capture with a camera.
  • There is a bit of a learning curve to understanding the code behind it and understanding how to properly display it on the web (cross-browser responsiveness can be tricky), but this is relative to how deep you want to delve, whether you want to learn how to animate it or manipulate the output. A complicated SVG can also produce a lot of code that’s difficult to sift through.

In my opinion, the pros far out way the cons — learning a new skill is hardly a con.

SVGs in WordPress

By default, WordPress does not allow you to upload SVGs to the media library for security reasons. Because it is outputted as XML code, this makes it liable to security in the same manner as other code. This is not to say you can’t use SVGs on your WordPress site; you just have to tell it to. To enable this, I recommend adding this plugin: WP SVG; it takes care of all the legwork for you. After that, you are free to upload SVGs in the media library.

Displaying SVGs

As I briefly touched on above, there are a few different ways of displaying SVGs on the web. The first three are no different from any other image format, but the last one is specific to SVGs.

  • Image tag –  <img src="icon.svg">; used in the same way as any other image format and the output cannot be manipulated, it’s just considered static.
  • Background Image – .icon { background-image: url(../images/icon.svg); }; same as above — cannot animate or alter the output with CSS.
  • Object Tag – <object type="image/svg+xml" data="icon.svg"></object>; adds embedded element and can be manipulated with CSS.
  • SVG Tag – <svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg> (this example renders a red circle with a three-pixel wide border); can be manipulated with CSS. Uses different markup than what you may be used to like <circle>, <rect>, <path> and <text> and also different attributes to manipulate with CSS like stroke and fill.

There is a lot to cover with regards to SVG and the SVG tag in particular. This is only intended to provide an overview. See below to learn more about SVGs and how to use them.

Some of my favorite SVG resources: