Hugo: Add image.Trace method that produces an SVG

Created on 21 Aug 2019  路  3Comments  路  Source: gohugoio/hugo

In the series "bep gets totally distracted", I'm about to add a image.Trace method.

There are several examples of this work in progress here:

https://temp.bep.is/hugotest/section1/trace/

A quick note: Some of the more detailed traces have bigger file sizes than their source, but they compress great (the gzipped version is < 40%) and of course scales better when you go bigger ...

There will be default options and options in config.toml. With the full set of options the usage will be something like this:

{{ $opts := dict "filter" "previtt" "color" "orange" "low" 30 "high" 100 "turdSize" 50 }}
{{ $traced := $img.Trace $opts }} // => SVG resource

I think the default filter will be luma (brightness), which is also the fastest.

/cc @regisphilibert and gang

Enhancement

Most helpful comment

R茅gis my use case will be some lazy loading for my s**tload photos with small small svg but better looking than the flat grey I use for now.

Great feature bep. Thanks

All 3 comments

Looks great! Don't have a concrete use case on my mind but designers must already do!

In the series "bep gets totally distracted".

Distraction is good, building pages from data source is __great__. 馃槢

R茅gis my use case will be some lazy loading for my s**tload photos with small small svg but better looking than the flat grey I use for now.

Great feature bep. Thanks

There are several use cases. Maybe someone wants to create a "monochrome blog", where they can possibly also get away with "wget randomcopyrightedimage.jpg" ...

Was this page helpful?
0 / 5 - 0 ratings

Related issues

VoidingWarranties picture VoidingWarranties  路  3Comments

crash-dive picture crash-dive  路  3Comments

tjamet picture tjamet  路  3Comments

vielmetti picture vielmetti  路  3Comments

kaushalmodi picture kaushalmodi  路  3Comments