From 570ec471d1605318aeefb030cd78682ae442235b Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Mon, 31 Mar 2025 21:51:40 -0300 Subject: src/content/: Update all files left to asciidoc --- src/content/tils/2020/12/29/svg.adoc | 50 +++++++++++++++--------------------- 1 file changed, 20 insertions(+), 30 deletions(-) (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 index 54cca9a..2022c83 100644 --- a/src/content/tils/2020/12/29/svg.adoc +++ b/src/content/tils/2020/12/29/svg.adoc @@ -1,32 +1,21 @@ ---- += SVG favicon -title: SVG favicon - -date: 2020-12-29 - -updated_at: 2021-01-12 - -layout: post - -lang: en - -ref: svg-favicon - ---- +:favicon: link:../../../../img/favicon.svg 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 +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. +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 +[source,xml] +---- @@ -89,27 +78,28 @@ getting the final result I manually cleaned-up the generated 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. +The good thing about this new favicon (at {favicon}[`/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 + +[source,html] +---- ... -``` +---- -Still missing is a bitmap image for places that can't handle vector images. I +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 +[source,ruby] +---- module Jekyll class FaviconGenerator < Generator safe true @@ -127,7 +117,7 @@ module Jekyll 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 -- cgit v1.2.3