From 960e4410f76801356ebd42801c914b2910a302a7 Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Mon, 18 Nov 2024 08:21:58 -0300 Subject: v0 migration to mkwb --- src/content/tils/2020/12/29/svg.adoc | 134 +++++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 src/content/tils/2020/12/29/svg.adoc (limited to 'src/content/tils/2020/12/29') diff --git a/src/content/tils/2020/12/29/svg.adoc b/src/content/tils/2020/12/29/svg.adoc new file mode 100644 index 0000000..54cca9a --- /dev/null +++ b/src/content/tils/2020/12/29/svg.adoc @@ -0,0 +1,134 @@ +--- + +title: SVG favicon + +date: 2020-12-29 + +updated_at: 2021-01-12 + +layout: post + +lang: en + +ref: svg-favicon + +--- + +I've wanted to change this website's favicon from a plain `.ico` file to a +proper SVG. The problem I was trying to solve was to reuse the same image on +other places, such as avatars. + +Generating a PNG from the existing 16x16 icon was possible but bad: the final +image was blurry. Converting the `.ico` to an SVG was possible, but sub-optimal: +tools try to guess some vector paths, and the final SVG didn't match the +original. + +Instead I used a tool to draw the "vector pixels" as black squares, and after +getting the final result I manually cleaned-up the generated XML: + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +The good thing about this new favicon +(at [`/static/lord-favicon.svg`](/static/lord-favicon.svg)) is that +a) it is simple enough that I feel +comfortable editing it manually and b) it is an SVG, which means I can generate +any desired size. + +With the new favicon file, I now had to add to the templates' `` a +`` to this icon: +```html + + + + ... +``` + +Still missing is a bitmap image for places that can't handle vector images. I +used Jekyll generator to create an PNG from the existing SVG: + +```ruby +module Jekyll + class FaviconGenerator < Generator + safe true + priority :high + + SIZE = 420 + + def generate(site) + svg = 'static/favicon.svg' + png = 'static/favicon.png' + unless File.exist? png then + puts "Missing '#{png}', generating..." + puts `inkscape -o #{png} -w #{SIZE} -h #{SIZE} #{svg}` + end + end + end +end +``` + +I had to increase the priority of the generator so that it would run before +other places that would use a `{% link /static/lord-favicon.png %}`, otherwise +the file would be considered missing. -- cgit v1.2.3