Posts with tag svg

Common Pitfalls when Serving SVGs and How to Solve Them

Optimizing SVGs is great for performance, but can we go beyond? In this post I will show some common issues with inlined and responsive SVGs applied to a real website.

Scalable Vector Graphics (SVG) are ideal to show logos and drawings on the web due to their small size. SVGs also have other useful applications, such as placeholders for lazy loaded images and animations. In a past post I also explained how to optimize a SVG with several tools that remove unneeded code and simplify shapes.

Even if we optimize our SVG assets, we can still make mistakes delivering those to the browser. In this post I am going to explain some issues I found on Spotify’s website, where the same SVG is inlined several times and where a responsive SVG logo could save additional network requests.

Spotify SVG logo showing its arcs and points

Continue reading about Common Pitfalls when Serving SVGs and How to Solve Them...

Sketchy SVGs with RoughJS

I love hand-drawn graphs and I have always fantasized about applying it to vector images. That’s why I was very happy to find out about RoughJS, a library that draws SVG primitives like lines, curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn style.

Continue reading about Sketchy SVGs with RoughJS...

How to use SVG as a Placeholder, and Other Image Loading Techniques

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

Example of a SVG generated using 10 and 100 triangles based on a bitmap image

Generating SVGs from images can be used for placeholders. Keep reading!

Continue reading about How to use SVG as a Placeholder, and Other Image Loading Techniques...

Duotone using CSS blend modes

In a past post I explained how to use SVG and a feColorMatrix filter to apply a duotone effect to an image. This time I’m going to show how to achieve a similar effect with only CSS.

Continue reading about Duotone using CSS blend modes...

More examples of Progressive Image Loading

In a past post I dissected a technique used by Medium to display images, transitioning from a blurry image to the final one. Since then I have found some more sites following a similar approach. Let’s see how Quora, Quartz and Clicktorelease do it.

Continue reading about More examples of Progressive Image Loading...

Spotify's new brand identity using feColorMatrix SVG filters

This is a short post where I show how to use SVG and a feColorMatrix filter to apply a duotone effect to an image.

Continue reading about Spotify's new brand identity using feColorMatrix SVG filters...

SVG Optimisation using SVGOMG and FontForge

Lots of websites have started replacing their icon fonts and small icons with SVGs. They support CSS manipulations, animations and are great for responsive sites. But it is important to keep an eye on their size.

Continue reading about SVG Optimisation using SVGOMG and FontForge...