Even though leading web designers have declared the current year the year of the SVG format, many still have some lingering questions. Why SVG, and why now (2018)? How is it supposed to prove itself, and what’s the point of it all? In other words, the trend is clearly here, but the understanding of its meaning and purpose is still lacking for most. Meanwhile, SVG has actually been used in web design for quite a while, to varying degrees of frequency, and has often been more in demand than any other vector graphic format. But as is often the case in the world, every phenomenon eventually reaches a peak in popularity and recognition. It’s believed that 2018 marks the peak of development and application of SVG in the online space.

The SVG format is convenient when building a unified project for users with both high-resolution and standard displays. In that case, ensuring fast loading graphics in the proper quality is hard without SVG. That said, switching to SVG… isn’t particularly hard. You don’t have to replace existing images. You just need to add new ones in this format.

But is it really worth spending the time and effort? Should SVG be used in every web design project? And if the answer is “yes,” then how? That’s exactly what we’ll talk about today — just like we previously covered the also widely-used formats WebP and WebM.

SVG and the Web

In short, according to Mozilla’s documentation, SVG is a markup language for describing vector graphics, similar to how HTML describes content — only here we’re marking up shapes and visual effects. The beauty of SVG is that you can code a simple graphic in a plain text editor, and for more complex work, use Adobe Illustrator or Photoshop. In terms of rendering, all modern browsers now support SVG just fine.

Sounds simple and elegant, right? But in reality, working with SVG can be quite time-consuming and complex. And just imagine if someone is still using outdated versions of Windows or browsers — that's a headache of its own.

We’re not going to dive into hands-on instructions on how to work with SVG. Instead, we’ll explore the broader context. And yes, we’ll touch on Photoshop a bit — but lightly. Examples will also be minimal.

Why Should a Web Designer Use SVG?

With SVG, designers can create all sorts of useful things: logos, textured backgrounds, animated icons or images, static icons — basically, any image on a site can be made in SVG format if it’s acceptable to switch it to vector. This eliminates the need for PNG, JPG, or GIF, and delivers superior visual quality regardless of the screen resolution.

For example, the project onedesigncompany uses SVG exclusively for its icons, logos, and homepage animations. Pay attention to how quickly the site loads — each page individually. Even with high-speed internet, the performance difference compared to an average website is striking.

The site bjango features an animated top menu made with SVG + CSS. It looks smooth and unobtrusive.

When it comes to SVG backgrounds and textures, check out cleverbridge, where the logo, backgrounds, and arrows are all SVG. Other noteworthy examples include authenticff, mepally, pixels, momkai, amoracoffee, creddy, and many more (over 700 listed on Awwwards).

So yes, this format has already been widely used for quite some time — it’s just that designers don’t really “shout” about it or emphasize it. And that’s perfectly fine. After all, the job of a web designer and front-end developer is to make the site user-friendly, functional, and fast — the tools used to get there rarely matter to the end user.

SVG in Practice

Thanks to its scalability and resolution independence, more and more designers are likely to adopt SVG in their workflows. And that’s a big win, because all visuals on a site will look sharp and consistent across devices.

It’s also easy to work with and doesn’t require any dramatic changes to your workflow. There is one caveat, though: Photoshop isn’t fully optimized for SVG or vector work in general. Even though the latest version improved the Pen tool and vector functionality, Photoshop still isn’t ideal for working with SVG. You can export vectors, you can place SVG into a PSD, but for full control, Illustrator is much better.

That said, even with modern versions of Photoshop, you may still need to clean up the code (though less often now). There’s an excellent multilingual SVG guide that covers these topics in detail. You’ll find everything you need to understand SVG code and syntax there.

To demonstrate, here’s how you can insert SVG into Photoshop. Many longtime readers will remember our landing page design for "tajem", which had lots of creative details. It also included SVG icons, so you can see how they appear in real projects.

The icons are stored in an external folder and inserted into the PSD via File → Place Linked or Place Embedded. You can then resize them or apply effects if needed.

Starting with Photoshop CC 2017, you can also go to File → Open and select an SVG file directly.

If you have a raster image and want to export it as SVG, go to File → Export As, wait for the export window to load, and choose SVG from the format list. If the window doesn’t load, your copy might be a modified or incomplete version of Photoshop — just being real with you.

Here’s a file size comparison between three formats:

The advantage of SVG over PNG here is its scalability and consistent quality.

SEO Love

But beyond better image quality, SVG offers several search engine perks. Since the file is just formatted text, search engines can crawl it — just like they crawl regular HTML.

This means SVG files can contribute to better SEO visibility and be indexed even when embedded directly into HTML code. Given the ever-increasing number of websites globally, standing out in search results — even on pages 1 or 2 — is critical.

SVG and Simple Content

Unlike many other vector formats that also offer fast load times, SVG is pure code — short, clean, and understandable (see above).

If you’re seeing an SVG file with a massive size, check what exactly you saved. PNGs get bigger when transparency is added. SVGs grow with more paths, layers, and filled shapes. That’s why SVG is best used for simple elements like logos, icons, or repeating textures. If the SVG file is too large, consider exporting in a different format.

You might think we’re contradicting ourselves here: promoting SVG but also suggesting alternatives. But in real life, designers use mixed formats in a single project depending on the situation. What’s changing is that SVG is no longer neglected — it's becoming the default. PNG, JPG, and GIF still have their place — nobody’s getting rid of them.

SVG Animation

Few vector formats can handle both static and animated content like SVG does. That’s why web designers love it: no need for heavy GIFs or MP4s.

Online SVG Resources

Designing your own SVGs — static or animated — is great and creative, but some people are faster at it. Plus, sometimes you don’t know what you need until you see it ready-made.

SVG Icons Animated — a weather icon pack with open access to HTML/CSS code.

SVG CSS3 Menu / Burger Button — a fun interactive hamburger menu. You can click it live in the preview window.

Clock Widget — cool and fully working, even uses JS.

On CodePen, you can find tons of SVG-related code examples — animations, labels, shapes, and more.

Freepik has SVG collections, both free and paid, and SVG Studio offers curated vector libraries.

Flaticon has SVG icons with customizable color and format. Some are free; others require a subscription.

Pixabay also hosts SVGs: borders, birds, plants, butterflies — more detailed illustrations.

All-Free-Download offers detailed, colorful vector illustrations. Archives usually include both JPG and SVG files (often ~800KB). We’ve already explained why the file size might be large.

Advanced Animations and Interactivity

If you just need a static SVG, you can make one easily in Illustrator or Photoshop. Even simple animations are manageable. But if you want something truly advanced, you’ll need JavaScript libraries — like those used in VR or interactive site tours.

Bonsai.js — a lightweight library. A few lines of JS code add animations instantly. It comes with demo mode and code previews.

Raphael.js — a toolkit for complex vector graphics based on VML.

Snap.svg — a simple JS library to learn SVG manipulation and animation online.

Conclusion

These are some of the key advantages of SVG and reasons why its popularity continues to rise each year. This explains why SVG is now considered to have reached its peak in relevance and utility.

If your users have high-resolution displays or you're building a project with such screens in mind, vector images are the obvious choice. No pixelation, just clean lines and smooth gradients. Logos, icons, backgrounds, animations — all look better. Add to that fast loading, small file sizes, and easy learning curve.

SVG is truly a convenient and effective format for web design — and the many successful case studies are proof of that.