Scalable Vector Graphics, or SVG, is a vector image format for 2D graphics that supports interactivity and animation. SVG images can be created and edited with drawing software or in any text editor. But why are they so important in UI design?
What is SVG format?
Scalable Vector Graphics, or SVG, is a vector image format for 2D graphics based on Extensible Markup Language (XML). It supports interactivity and animation. SVG images can be created and edited with drawing software or in any text editor. Without entering into complicated definitions, let’s say that SVG makes up images out of math. I bet you didn’t expect that. This format has been in development since 1999; nowadays, all the major web browsers support it.
SVG format uses text to define the image, letting you scale it in size without losing quality. It is resolution-independent, which encourages usage of SVG format in web design as it can be changed to fit variations in the future. Another advantage is that SVG can be easily compressed with a GZIP compression, making the file from 50 to 80 percent smaller without losing any information.
Software-wise, SVG files can be created and manipulated with many programs. These include Adobe Illustrator, other Adobe programs, Microsoft Visio, and CorelDraw. If you want to stay on the open (and free) side of the world, you can use Inkscape and GIMP, two excellent options to work with SVG files. As it is a text file, you could open it up in any text editor. A warning: unless you are Rain Man, you won’t see any pictures that way.
Bitmap and SVG
Bitmap images-most of the pictures you see on the internet-are made of a fixed set of pixels. On the other hand, vector images are made of a fixed set of shapes. While the scaling reveals the pixels in a bitmap, vector images maintain their quality in any size, giving SVG images an edge on the internet as many icons, logos, and page backgrounds can be designed with this technology and then forget about resolutions. This is especially so in a market that serves a wide variety of viewports.
Another big difference between bitmap and SVG is how these handle the multiple resizing of an image when editing. While SVG images keep all the information after being resized, bitmap images lose information and look pixelated when enlarging again.
If you need to convert your SVG to PNG or JPG, or vice versa, there are plenty of tools out there. You have Lifewire, Zamzar, Autotracer, and many others. A quick Google search (or Duck Duck go if you are feeling secretive) will put you on your tracks.
While SVG seems to have an advantage over bitmap format, it is not so simple. There is a reason why they both coexist. SVG is an excellent tool for simple images, but it simply can’t rasterize a complex picture. So if you were thinking of compressing all your vacation photos to lightweight text, forget about it. We are not at that level yet. Bitmap still has an advantage over SVG for complex images, and that is okay. There is a proper tool for each situation.
User experience vs. user interface: a case for SVG
SVG has gained a lot of attention with the current state of the web. Generalizations tend to be inaccurate, but you have probably noticed that the internet is getting more and more bloated. The amount of third-party cookies, trackers, ads, javascript, and unnecessary code has a considerable impact on speed, especially when internet providers are not the top 10 nicest companies.
That is why SVG comes as a relief for the daily web user. As Sarah Drasner puts in her talk, SVG can do that?!, loading page time can drastically decrease with SVG implementation and proper optimization. If you are a front-end developer, I strongly recommend her talk: she brilliantly explains the strengths of SVG and shows great implementation examples.
How are SVG, user experience (UX), and user interface (UI) related? Well, as you have probably experienced before, having to wait more than five seconds is not on the menu these days for your average human: even less on the internet. If you don’t want a massive bounce rate, you must consider the user experience: waiting is not a positive trait, and this can heavily depend on your user interface. As the web becomes more and more complex, sites can become bloated, not only because of geological layers of code but also for the size of the images.
Many designers and developers use PNG, JPG, and GIF for loading screens and landing pages, and that might be okay sometimes. But if you have the chance to replace those with lightweight SVG, you might see an improvement in loading time, performance, and, most important, user experience.
What is Figma?
If you already are a regular reader of our blog, then you know us (or me at least), and you know what Figma is and that we use it for our projects. To the newcomers, welcome! We have an article about it. To summarize: Figma is an online design tool that lets you wireframe, prototype, and design in a collaborative way with your team.
While SVG presents the advantages we talked about before, it still has some problems with standardization, especially in how to convert SVG markup to pixels on the screen. Luckily, Figma presents an export option that allows you to do it with minimal markup and results in small SVG files. This correspondence between Figma and SVG enables our design team to create a fitting UI that reflects the user experience we want for our clients. Only by articulating the user interface with performance and quality development our project thrives.
At Awkbit, it is simple: all our site is in SVG. T his decision allowed us to provide a neat design without compromising speed and responsiveness. While taking this decision was the foundation of our project, you can still take this path even with a site that is already running. If your site suffers from lengthy loading times and has no cross-device optimization, you might need a touch of SVG magic. Let us know. We can help!
Originally published at https://awkbit.com on May 28, 2021 as What is SVG format: the best for UI design.
