What is an SVG File Used For and Why Developers Should be Using Them
The adoption and adaptation of SVGs is without a doubt one of my favorite things to happen to the design and developer community in recent years.
As a designer, they were the aspirin to many a headache that always occurred during the development handover.
Today I’ll be taking a look at what SVGs are and why you should start using them, and how to get started even if you’re not a designer yourself.
And in case you want to get straight to the good stuff, here are the main reasons why you should be using SVGs if you’re not already.
7 Reasons Why You Should Be Using Scalable Vector Graphics
- SVGs are scalable and will render pixel-perfect at any resolution whereas JPEGs, PNGs and GIFs will not.
- SVGs are vector images and therefore are usually much smaller in file-size than bitmap-based images.
- Embedded SVGs can be styled using CSS.
- They are SEO friendly allowing you to add keywords, descriptions and links directly to the markup.
- SVGs can be embedded into the HTML which means they can be cached, edited directly using CSS and indexed for greater accessibility.
- They are future proof. SVGs can be scaled indefinitely meaning that they will always render to pixel-perfection on newer display technologies such as 8K and beyond.
- SVGs can be animated directly or by using CSS or JavaScript making it easy for web designers to add interactivity to a site.
What Is SVG and What Is SVG Used For?
Let’s get technical for a second. SVG stands for “Scalable Vector Graphics” and is an XML based, vector image format.
SVG images are predominantly found on the web, and while they have comparable uses to JPEG, PNG and WebP image types, their DNA is extremely different.
In its simplest form, this is what an SVG file looks like under the hood:
<svg xmlns="http://www.w3.org/2000/svg"> <rect width="250" height="250" fill="#0000FF"/>
</svg>
That SVG file would render a 250 pixels wide, blue square.
So how are SVGs different?
Well, traditional image types like JPEG, PNG and GIF are bitmap-based (or raster-based), meaning they consist of a set amount of pixels. Typically, this means that as soon as you start to increase or decrease an image of this type, you are presented with jagged lines, blurry artifacts and a pixelated mess.
We also have the more recent image type of WebP, developed by Google which aims to supersede the JPEG, PNG and GIF file formats altogether as a singular more flexible solution. I feel as if discussing WebP would make this article more confusing than helpful as it’s a different subject altogether which I’d be happy to consider in another article.
In short, the WebP image type was created to generate much smaller file sizes and eliminate the need to use different image types on the web. It is currently unsupported by Safari and is yet to gain significant traction on the web.
You can find out more about WebP via the Google Developers site or read this article by our very own Ian Jones which discusses WebP compression in a bit more detail as well as how to serve WebP images using WP Offload Media.
Right, back on track…
So how does the SVG format differ to bitmap-based images? They are vector-based meaning that they are resolution independent. Rather than consisting of pixels, SVG images consist of shapes. This means that they can scale indefinitely without a reduction of quality. Magical.
Okay, so enough about what they are. Why should we use them?
The Awesome Advantages of SVGs
Pixel-Perfect Scaling!
I elaborated on this already, but we should quickly reflect on perhaps the biggest advantage to using an SVG over a PNG or JPEG image.
SVG graphics will scale indefinitely and will remain super sharp at any resolution.
Food for thought: Despite this fact, small SVGs that contain a little amount of detail such as a navigation bar icon may look out of place or too simplistic if blown up to be used on a storefront banner or a billboard. Every case is different, but context and a good eye is important when deciding whether to scale an SVG.
Smaller File Sizes
This is another substantial advantage. Due to the nature of vector images, the data that determines the file size are the layers, effects, masks, colors, and gradients used.
In comparison, bitmap-based images record each and every pixel in the image as well as the quantity of colors used. Admittedly, it’s a little more complicated than that, but the thing to take away from this is that for the most part, a bitmap-based image file will be more expensive than an SVG counterpart.
On top of this, you can minimize the size of your SVG files by compressing them with gzip. This means that fewer bytes need to be sent from the server or CDN if gzip compression is enabled.
You Can Style an SVG Using CSS
That’s right. And this means that you don’t need to know your way around any design software to make a small modification like a color change. In fact, if you’ve done any sort of web design or front-end development you’ll have no difficulties adding a gradient to a shape or increasing the thickness of a stroke.
SEO Friendly
As I indicated at the start of this post, SVGs are XML-based signifying that keywords, descriptions and links can be included making the content more recognizable for search engines and improving overall accessibility.
With bitmap-based images, you only have the “title” and “alt” attributes at your disposal for SEO.
SVGs Can Be Embedded Into HTML
Unlike other image types that have to be downloaded from the server as an external resource, SVGs can be embedded into the HTML code. So why is this advantageous?
It means that they can be searched and indexed which is great for accessibility. You can also modify the styling of that SVG using CSS. Also, if you are caching your HTML pages then this means the embedded SVGs will automatically be cached too.
SVGs Are Future Proof
I think this is something that is considerably overlooked, particularly when it comes to scalability. I remember a time before SVG when pixel density was a hot topic in the design community as new cell phones and tablets came on the scene with beautifully rich displays.
This all was wonderful. But it meant that most of the JPEG or PNG images used on websites were not of a high enough resolution anymore and looked like garbage on handheld devices.
The solution? Generate another instance of the image at double the resolution and label it “@2x”. Now the image looked lovely and crisp on the latest iPhone.
If you were sensible, you also detected the user’s resolution in advance and only served the “@2x” image if required as doing so was more expensive in terms of file size.
I’m digressing, but newer screens with higher pixel densities were creating additional headaches for both designers and developers. The very nature of an SVG meant that this no longer created complications as high-end devices reach resolutions of 8K and beyond.
They Can Be Animated
This is where SVGs really excel. Having the ability to edit SVGs directly with a text editor means they can be animated, making it super easy to inject some interactivity into your site. These animations can be as simple or as complicated as you prefer. Similar to HTML, SVGs are also represented by the DOM (document object model) meaning that they can be manipulated with JavaScript too.
If you’re interested in animating SVGs, I covered this subject in another article along with a guide on how to use Airbnb’s popular Lottie animation framework to bring your SVGs to life.
Here’s an example animation I made for that particular article based on our branding for WP Migrate DB Pro.
See the Pen
MDB Bird Animation by deliciousbrains (@deliciousbrains)
on CodePen.
The best part? The file-size is a minuscule 11 Kilobytes!
The Disadvantages of SVG
Nothing is perfect. And there are a couple of instances where you should potentially opt for raster images over SVGs.
Complex Imagery
If you’re dealing with photographs, then you should undoubtedly opt for a bitmap-based image. There are not many instances, if any, where you would encounter an SVG photograph anyway so it’s improbable you’d ever have to make this decision.
Similarly, there are some instances whereby a complicated SVG contains so many shapes, colors, gradients and masks that it actually starts to outweigh a JPEG or PNG equivalent in filesize. I haven’t encountered this too often, but it is a definite possibility.
If you need to use a bitmap image, remember to use PNG if your image contains transparency, JPEG if it does not. JPEG images do not support transparency and are therefore better suited to photographs. Alternatively, as discussed briefly at the beginning of this article, you can simplify the above by using WebP for all bitmap-based images.
Optimization
This relies on some TLC when creating SVGs in a design application such as Adobe Illustrator or Inkscape. Empty group folders and unused, redundant layers can append unnecessary junk to the overall file size. Additionally, older SVGs generally contain an abundance of garbage in the markup and are considerably more expensive than necessary. I run all my SVGs through a minifier when I export during the design process to avoid such complications.
There are several optimization tools out there including a Node.js tool for optimizing SVG files. And thank you to Jordan, who shared this non-node solution called SVGOMG in the comments.
SVGs can massively outweigh a counterpart PNG if not created or optimized in the correct fashion. But usually, the file size will be smaller. Just don’t be put off if you encounter an individual SVG to be double the file size of a PNG equivalent.
Browser Support
This is not so much of a problem like it used to be. But, if for some reason you’re anti Chrome or Firefox, or need to support super outdated web browsers like Internet Explorer, then you may encounter some compatibility issues with SVG.
That being said, you can still use SVGs and avert this complication by implementing JPEG or PNG fallbacks as a failsafe.
SVG Icons Are Your Friend
Icons are where all of the advantages of this file format really become apparent. No longer are multiple icons in several colors and sizes required which massively simplifies the design and development process. To articulate this further, I wanted to revisit what life used to be like before SVGs came along…
A Trip Down Memory Lane
Before SVGs were a thing, icons were honestly a bit of a pain for both designers and developers. More often than not, a product would feature 20+ icons and each icon would require an active state (usually the primary color), an inactive/disabled state and occasionally additional states too (such as a hover state).
As discussed previously, bitmap images are not editable using CSS so each icon state required its own file.
I also mentioned that when higher pixel density screens became a thing, we also had to generate a “@2x” and “@3x” version of our image assets for higher resolution displays.
I had no intention of doing anything practical with this information, but while writing this section I decided to examine how much file size I could recoup using an icon set of SVGs over bitmap versions.
I have a heart SVG icon from the Material Design that I require in 3 different colors. These are an active state, an inactive state and a disabled state.
Using the active state of our icon, we can also produce the other 2 icon states by adjusting the CSS styling. So we only need one SVG file to generate all 3 icons!
To create bitmap versions of these icons, we will need an independent file for each icon state.
Additionally, to guarantee the bitmap versions look sharp on all types of devices, we need to generate a set of these icons at double and triple the dimensions of the baseline resolution (“@2x” and “@3x” respectively).
That leaves us with 9 PNG icons to manage as opposed to the single SVG file we can use to achieve identical results.
The SVG amounts to a single kilobyte whereas all of the PNG icons calculate up to 29KB.
Sure, 29KB doesn’t sound considerable, but this is in reference to a single icon. If we had 30 icons to use, the difference in file size becomes more of a complication…
SVG: 1KB * 30 = 30KB.
PNG: 29KB * 30 = 870KB.
That’s a 2900% increase over the single SVG. Of course, these are averages, but it’s a tremendous increase in size nonetheless.
I hope this has demonstrated just how much simpler SVGs are to use and manage, particularly with icon sets.
From experience, you can generally expect at least a 50% reduction in overall file-size when opting for SVG icons instead of PNGs. Particularly if you are optimizing your SVG icons and want them to render perfectly on any type of resolution or display.
SVG Sprites
We use a whole bunch of SVGs on both deliciousbrains.com and spinupwp.com, and have been using a neat SVG workflow to generate a sprite from a folder of SVG files, which can be loaded only once on a page load, instead of an HTTP request for each SVG file. We use this Gulp task as part of our asset build task to assemble all SVGs in a folder, remove them of unnecessary cruft, and formulate one big SVG in a PHP file, with each individual SVG as a <symbol>:
gulp.task( 'svg', function() { return gulp.src( 'assets/svg/*.svg' ) .pipe( svgmin( { plugins: [ { removeViewBox: false }, { removeUselessStrokeAndFill: true }, { removeEmptyAttrs: false }, { removeUnknownsAndDefaults: false }, { cleanupIDs: false }, { removeUselessStrokeAndFill: true } ] } ) ) .pipe( rename( { prefix: 'icon-' } ) ) .pipe( svgstore( { inlineSvg: true } ) ) .pipe( rename( 'svgs.php' ) ) .pipe( gulp.dest( 'template-parts' ) );
} );
We then include the svgs.php file that this task outputs at the beginning of the <body> tag in our theme:
add_action( ‘wp_body_open’, function() {
get_template_part( ‘template-parts/svgs’ );
});
And hide the gigantic SVG with CSS, so it’s completely hidden until called into action:
body > svg { display: none;
}
Now to the fun part. For example, we have our logo as an SVG as /assets/svgs/logo.svg which gets attached to the sprite as <symbol id="icon-logo">, so to render the logo we can simply add this to our HTML in our theme’s template files:
<svg><use xlink:href="#icon-logo" /></svg>
It’s pretty amazing!
Where to Get Free SVG Icons
Here are several different sources that I use to acquire SVGs and icon sets. Some require you to credit the author depending on how the icon is utilized, so be conscious of that.
Flaticon
Material Design Icons
Icons8
FreeIcons
IconStore
Recap
Hopefully, by this point, I’ve presented considerable evidence as to why you should be thinking about using the SVG file type if you’re not already. They’re easier to manage, will improve the load speed of your web pages and won’t require an update every time a new resolution display splashes onto the market with a higher PPI (pixels per inch).
Additionally, you can animate and make modifications to the styling of your SVGs without needing or knowing how to use a design application like Photoshop or Sketch (Or CorelDRAW if you’re a vector OG).
Got any other cool tips or uses for SVG you would like to share? Have any other design questions you’d like me to discuss in a future post? Let us know in the comments section below.
Source: https://deliciousbrains.com/svg-advantages-developers/
