May 03, 2018 · SVG · Diagramming · Web

How We Ate Our Own Dog Food and Used ONLY SVG on Our Website

It all began when we have a small problem, we wanted a small icon on our Google signup button, everything looks perfect, except when we view our website on high resolution or retina displays, and began to see pixelation:

Google sign up button with pixelated G
Google sign up button with pixelated G

Why? For the very simple fact that we made the icon using a size of 16 x 16 pixels. When it’s shown on a high resolution displays, the icon is resized to more than 2 times its original, and therefore causing the pixelation.

Can’t we just use a 24 x 24 pixels icon? Sure, but what about out other graphics on our website? They will be blurry as well. Although we can always upload a higher resolution image to ensure it displays crisply on all screen sizes, then what about their file sizes? Will it slow down our site? Lets look at a typical image we used on our website:

A Simple size comparison

A typical image on vecta.io
A typical image on vecta.io
PNG (1x)PNG (2x)PNG (3x)SVGSVG (Embedded fonts)
Size21KB48KB94KB8KB14KB
Compressed7KB14KB24KB5KB11KB
GZip7KB14KB24KB2KB7KB

It is clear, that SVG file sizes are much smaller and comes in at 8KB without font embedding, compared to 21KB for PNG with 1X resolution, with much bigger file size when resolutions are higher.

When compressed (we used tinypng.com for compression), PNG file sizes are much smaller at 7KB for 1X resolution, but SVG can also be compressed (we use our very own nano to compress SVG) and the results are not bad, coming in at 11KB for an SVG file with fonts embedded.

If you are embedding images on your website, chances are you're using GZip as transport compression, where the images are GZipped from the server to be deflated by the browser. Because PNG formats are already gzipped, they offer no significant reduction in file size, meanwhile, SVG images lends itself very well to GZip compression and comes in at just 7KB even with fonts embedded.

The conclusion is clear, using PNG images require a complex workflow that produces multiple images, extra work to compress them, and results in high file sizes that slows your website, especially for high resolution displays. The higher the resolution, the higher the penalty.

Meanwhile, SVG images even with fonts embedded, results in image sizes that are no bigger than equivalent 1X PNG resolution, simple workflow with just a single image, no penalty and looks great on all resolutions, in addition to keeping system font optimizations (fonts are optimized on various systems to display clearly), since the text in an SVG images are kept as fonts.

Work flow

We have a small team, so we have always collaborated on everything, which is part of the reason why we built Vecta initially. A decision is made for what to put up on our website, with bullet points. Copy writing is done by multiple team mates, each doing a small part. The designer drafted a proposal for the graphics, and discussions were made as to their relevancy and then finalized.

We created a team in Vecta where everyone has access to the drawings, and then created folders, for example, Website Artworks to store all images. We then sub divide each page into their own folders, to store images for index page, benefits page and so on.

Team dashboard in Vecta.io
Team dashboard in Vecta.io

Each team mate gets to access drawings made immediately without the need for back and forth emails and differing versions of the drawing. Notifications allow everyone to stay informed about what others are doing, detecting problems early, and leverage on communication and collaboration.

Notifications on Vecta.io
Notifications on Vecta.io

When the need arise, we used Vecta’s built in chat system to engage, brain storm, review or just banter. :)

The build in chat box on Vecta.io
The build in chat box on Vecta.io

After finalizing, the images are then exported and saved into a folder, where our build system will insert a cache busting hash, so our images gets cached at client side indefinitely for speedy loading of our website.

Inserting cache busting hash in our build process
Inserting cache busting hash in our build process

To ensure everything is sharp, Vecta do most of the heavy lifting, except when you have no strokes or even strokes on shapes, you will have to adjust X and Y position by 0.5. To understand more, do read A guide to getting sharp and crisp SVG images on screen.

Sometimes changes are unavoidable, and we could easily make changes and redeploy, since everyone has access to the files, and the process is simple.

The Results

All our images now loads quickly, have a small size footprint, and is used everywhere on our website including support pages. Even when viewed in mobile pages, whereby users might zoom in and expect a responsive page, our images stay crisp and sharp, no matter what zoom percentage is applied.

This is how Vecta has helped us to get things done faster, and we do hope the same for you.

Like this article? Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

RELATED POSTS

July 20, 2018 · SVG · Web · Diagramming

You can now use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choos...

May 27, 2018 · SVG · Web · PNG

Making SVG easier to use (Why we build Nano)

There are a multitude of ways to embed SVG, each of them fraught with gotchas and compromises. In our quest to make SVG easier to use, we looked at different approaches and this is the story on why we build Nano.

May 26, 2018 · SVG · Web · PNG

Comparing SVG and PNG file sizes

You may have heard that SVG have the lowest size while offering the best quality. Is it true? Why are developers still using srcset and generating PNG @ 1x, 2x and 3x resolution? Can you save any bandwidth with using SVG instead of PNG?

Sign up for a FREE Vecta account and start
creating your diagram online.

Create a Free Account