SVG images are the s***, but they can also be a little confusing at first. Let me clear things up, shed some light on their brilliance, and examine the pros and cons to the different approaches to using them.
What Are SVG Images?
SVG stands for Scalable Vector Graphics. They are an XML-based vector image format for two-dimensional graphics. The SVG specification was developed by the W3C and has been around since 1999. All modern web browsers support SVG images.
XML What?
XML (Extensible Markup Language) is the heart of SVG. “Wait, what? Isn’t XML a coding language?” Yes it is. SVG are vector images created with code and rendered into existence by the browser. Effin’ cool, I know. This also means that SVG can be scripted, compressed, animated, and edited just like any other code. They can be created in any text editor or with any vector graphics software such as Adobe Illustrator.
SVG Benefits
Incredibly, SVGs are still under-utilized on the web even though they have been around for nearly two decades. Their popularity and use have increased though, now that responsive design and mobile devices are ubiquitous. The reason for this is simple: SVG are vector images with small file sizes that are capable of infinitely scaling in size without loss of image quality on any resolution device. Do you need more convincing?! No, no you really don’t.
All of the above being said, SVGs are not meant for use with photographs and other similar raster images with many colors and gradients. That’s where .jpgs and .pngs come into play. It’s not necessarily a limitation of SVG images, it’s just the simple fact that raster and vector images are two entirely different methods for creating images.
Image credit: wikimedia.org
SVG Creation
If you’re not up for creating your own images, there are many free online resources and icon libraries that export to SVG. If you’re feeling adventurous and have the time, it’s gratifying to create your own images. You’ll also have a final product that is custom and unique to you.
You can use any vector graphics software, but the most common way to create images is with Adobe Illustrator. With Illustrator, you’ll create your custom vector graphic then click File > Save As. You’ll choose SVG from the format dropdown and click Save. From there you’ll see an SVG Options popup window with a plethora of options that are too in-depth to cover here, but the default options are fine for most situations. At this point you have the option to export your image as SVG code or export as an image with a .svg filename extension. Both have their pros and cons, so let’s delve in.
SVG as an Image File
The easiest way to use SVG is to export it from your vector editing software as an image with a .svg filename extension. From there you would simply use it as an <img> tag in your HTML, just like you would with a .jpg or .png.
PROS
- Ease of use. Export, throw in an
<img>tag, drink a beer. - Ability to cache SVGs when used in an
<img>tag, lending to faster page load speed. - All the inherent benefits of SVG mentioned beforehand.
CONS
- Lack of support in IE8 and older. In the year 2017, that shouldn’t be a problem for developers, aside from a rare few who deserve raises for having to still deal with that crap.
- Inability to edit the SVG image in the code.
SVG as Code
While using SVG as code is a bit more involved, it’s by no means difficult after you’ve done it a few times. There are a couple ways to extract the SVG for your image.
Using Vector Graphics Software
The awesome thing with using vector software is that you can create your own image or open an existing vector file or .svg file and extract its SVG code. Each software if different, but with Adobe Illustrator for example, you’ll see a popup window titled SVG options when you export as a .svg. Click the “SVG Code” button and you’ll see your glorious SVG code. Simply copy and paste it into your text editor.
PROS
- Ease of use. Copy and paste code. Done.
- Code can be edited, making it easy to update your image in your text editor.
- Code can be animated, scripted and styled with CSS and JS.
- Code can be compressed and optimized with free online tools.
- All the inherent benefits of SVG mentioned beforehand.
CONS
- Inability to cache SVG code. This can be a problem if you have lots of SVG images on your page and are concerned with page load speed. In this case, it may be better to use SVG as an image file.
- It’s a little more work to export and optimize code, but not that much more. More on optimization below.
Using Online Tools to Extract SVG Code
Free online tools like Peter Collingridge’s SVG Optimizer allow you to upload your vector image file, which can be an existing file or one that you created, and extracts the SVG code for you. Again, you simply copy and paste it into your text editor and call it a day.
SVG Code Optimization
In addition to extracting SVG code from vector image files, online tools like SVG Optimizer also allow you to compress and optimize your SVG code. The code exported from your vector graphics software typically isn’t compressed and optimized, so tools like SVG Optimizer can help to make your SVG code or file size lean and mean. With SVG Optimizer, you simply upload or .svg file or copy/paste your SVG code, choose your output options, preview your optimized image, then download the optimized file or copy/paste the optimized code. Pretty awesome.
SVG Code + CSS + JS
SVG code can be styled, animated, and scripted with CSS and JS. This is a beautiful thing and makes SVG that much more powerful. As previously mentioned, SVG code is comprised of XML tags. CSS classes can be added to these tags just like HTML. These CSS classes can then be used as hooks for state changes, animations, or whatever CSS/JS functionality you can dream up.
Image credit: thismovie.net
Now Go Forth Young Grasshopper
Now that you know how powerful SVG images are and how easy they are to work with, get to SVG’ing. Once you get it down, you won’t be turning back. SVG is just that awesome. Your projects and the web will be better for it.
