Compressing SVG

Empowering the future of education in science and technology with Nano

July 06, 2019 ·  Vince Wong · Success Stories · Everything SVG · Compressing SVG

When Phil wanted to inspire kids to indulge in the world of science and technology, he looked no further than to pique their interests with colorful stories in his online magazine at stargaze.science.

Stargaze.science provides fun content for kids to learn
Stargaze.science provides fun content for kids to learn

SVGs was his go-to for illustrating these stories. Drawing his content in Adobe Illustrator, things seem fine and it was smooth sailing.

That is, until he uploaded them to his website.

Keep reading.....

Revolutionizing and changing people's lives for the better with Nano

March 26, 2019 ·  Yi Qian · Success Stories · Everything SVG · Compressing SVG

Brusnika is one of the largest housing developers in Russia, building and selling over 5,000 apartments for Russian families annually. They redefined how low cost housing should look like, by introducing architectural and urban innovations that used to be found only in elite housing projects in central Moscow.

Novatorov Residential Quarter, Yekaterinburg
Novatorov Residential Quarter, Yekaterinburg

The team embarks on a journey of changing people's lives for the better by offering quality accommodation at affordable pricing. By prioritizing on quality, the rest - innovations and reliability falls into place.

Staying lean while upholding quality, Brusnika transforms the way houses are sold conventionally by showcasing houses and floor plans on their website, to give their prospects a better idea of the houses before purchasing.

Keep reading.....

Improving mobile page speed by 200% using SVG and Nano

March 09, 2019 ·  Thomas Yip · Web Design · Everything SVG · Compressing SVG

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation to your revenue.

Optimizing images is crucial for performance

Average bytes per page by content type on average website
Average bytes per page by content type on average website

Depending on who you ask, images constitute 68% of an average website, if there is such a thing as an average website. In terms of performance and speed, optimising images is the lowest hanging fruit, and it makes sense for this post to focus on optimising images.

Serving an image in three sizes using SRCSET has generally been accepted as the norm, but since our website and blog contains mainly illustrations, meaning most of our images can be replaced with vector-based images using SVG, the big question is, can SVG improve page load time, and if so, by what margin?

Keep reading.....

Making SVG easier to use and the reason we built Nano

May 27, 2018 ·  Thomas Yip · Everything SVG · Compressing SVG

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.

When we produce a PNG image, we use an <img> tag or a css background, and that's about it. It is dead simple and guaranteed to work.

PNG is way simpler to use than SVG in HTML
PNG is way simpler to use than SVG in HTML

Unfortunately, the same cannot be said for SVG, despite it's many advantages. Although you're spoilt for choice when using SVG in HTML, it really boils down to inline, <object> and <img>, all with serious gotchas and trade offs , see The best way to embed SVG on HTML (2020).

Keep reading.....

How Nano compresses SVG

May 08, 2018 ·  Thomas Yip · Everything SVG · Compressing SVG

Wanted to know how Nano compresses SVG? Of course you do, so let's have a look at the long list of techniques we used to compress your SVG.

Please do note that these techniques are not exhaustive, and we will further improve nano with more techniques to ensure even smaller sizes.

Optimizing fonts

The entire SVG will be scanned for used text elements. If none is used, no fonts will be embedded. If text are used, only used fonts are embedded, to ensure smallest of file size.

Keep reading.....

vecta.io BETA