Posts with tag svg

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.

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.

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.

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

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.

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.

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

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.