Output SVG derived from image

[0ct00]

So this might be a crazy idea but I'll try to explain.

The idea is that you can use &output=svg and it will give a minimal SVG image with the average colour of the image, like this:

<svg xmlns="http://www.w3.org/2000/svg" width="1967" height="2421" style="background: #56637d;"/>

You can then do something like this:

<img src="https://wsrv.nl/lichtenstein.jpg" style="background: url(https://wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&output=svg);" width="1967" height="2421" loading="lazy" alt="Lichtenstein"/>

And it will show the colour of the image before the full image loads.

Going further you can also create a gradient with the top and bottom / left or right, or with 4 quadrants of the image.

For example taking lichtenstein.jpg the average colours of the 4 quadrants are:

• Top left: #7186ac
• Top right: #517ac4
• Bottom left: #433832
• Bottom right: #524f4e

You also need the average colour of the whole image (#56637d) and then combine them like this:

<svg xmlns="http://www.w3.org/2000/svg" width="1967" height="2421" style="background: linear-gradient(45deg, #433832, #56637d00, #517ac4), linear-gradient(-45deg, #524f4e, #56637d00, #7186ac) #56637d;"/>

Note that #56637d00 is 100% transparent but the base colour has to be the same as the background for some browsers to display the gradient correctly.

Alternatively you could use SVG gradients instead of CSS but I think the file would be larger.

Here's a data URL you can copy and paste to see how it looks:

data:image/svg+xml,<svg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221967%22%20height%3D%222421%22%20style%3D%22background%3A%20linear-gradient(45deg%2C%20%23433832%2C%20%2356637d00%2C%20%23517ac4)%2C%20linear-gradient(-45deg%2C%20%23524f4e%2C%20%2356637d00%2C%20%237186ac)%20%2356637d%3B%22%2F>

Going further maybe it would also be nice to create a pixelated version with SVG, although of course there comes a point where the SVG would be larger than the regular image.

[andrieslouw]

I do like the idea, as it makes sense on slower connections. But it would need to be served quicker to the client than the original requested image, or it would not make much sense. Do you want the hex color(s) returned as JSON, or just a (definable?) matrix of (SVG) pixels?

[0ct00]

As you can see in my example the SVG image is a CSS background-image and the img element has loading="lazy". This means that the SVG will be loaded when the page loads and the full image will be loaded at a later point.

I'm not sure I understand your question? The example SVG images I gave would be what's returned for &output=svg, but in addition it could include the derived colours in &output=json as well.

Pixelated images would be more complicated since you would need an algorithm to store pixels (something like this). The main idea is just up to 4 colours with gradients at first.

[kleisauke]

What you're describing sounds a lot like BlurHash (or ThumbHash). There's an interesting article that explains it in detail:
https://www.mux.com/blog/blurry-image-placeholders-on-the-web

This will probably be dependent on libvips/libvips#2058.