The Future of UX Design Part 6

Part 6 - SVG's

You might have heard the term used but are not quite familiar with it. Was is an SVG? A Scalable Vector Graphics file, simply put, is a vector file (an image that’s easier to change) that will work on a website. That may not seem like that big of a deal but really it is a significant thing. If you’re not too familiar with website designs then the best way to put it is that the less code you can deliver to a users computer (especially mobile) then the better experience they will have on your website which means they could recommend it to others or come back themselves.

That’s just a basic sentiment behind why SVG’s are great but instead of just leaving it there, I’ll list a few reasons and why they’re so great.

Size of Files

Probably the best reason for these files are that you can make them small, while retaining the best quality, and since they are vector files you can resize them any way you choose. This is especially great for logos since those tend to have the most resizing possible (favicons, headers, etc.).

Size of Code (Files) Delivered

I mentioned it earlier, but another great feature is the fact that since these files are so small they make for a lot less code (size of a file) to be delivered to a visitor. This means that when someone comes to your site then the site is loading a lot faster and there’s less information for their computer to hold on to (less space consumed on their end) so they can return and have the information load even faster.

Easy Changes Made

Because these files come in a vector format that means redoing them or making changes is going to be easy being that they are broken down into components. This is a distinct advantage because quick changes won’t take too long (unlike other pictures where you might have to isolate certain parts manually).

Mobile Adaptive

Being that these images are in a vector format then that means they are going to be far easier in adjusting their size than regular images (making them smaller or bigger with the loss of quality). Given the emphasis Google has placed on mobile for sites on the internet this is the perfect image type for creating images on your site that will easily adjust to a screen becoming smaller and not losing it’s quality (so as not to ruin a user’s experience with your site).

All and all, there are many distinct advantages to using SVG files for pictures. I’m sure not all the possible advantages are listed here. To figure them all out will require you to do a bit of self-exploration with using SVG’s but from what you’ve read there’s certainly many abilities of SVG’s that make them advantageous when it comes to designing graphics (or a site in general).

Check out the rest of our series:

Tag Team Design

Next The Benefits of Using Video Branding »

Previous « What You Need to Know About Google RankBrain