How We Ate Our Own Dog Food and Used ONLY SVG on Our Website
May 03, 2018 · Thomas Yip
Software Development Director · Success Stories · Web Design · Everything SVG
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:
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
| PNG (1x) | PNG (2x) | PNG (3x) | SVG | SVG (Embedded fonts) | |
|---|---|---|---|---|---|
| Size | 21KB | 48KB | 94KB | 8KB | 14KB |
| Compressed | 7KB | 14KB | 24KB | 5KB | 11KB |
| GZip | 7KB | 14KB | 24KB | 2KB | 7KB |
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.
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.
When the need arise, we used Vecta's built in chat system to engage, brain storm, review or just banter. :)
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.
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.
Thomas Yip
Software Development Director
As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.
