diff options
| author | EuAndreh <eu@euandre.org> | 2025-03-31 21:51:40 -0300 |
|---|---|---|
| committer | EuAndreh <eu@euandre.org> | 2025-03-31 21:51:40 -0300 |
| commit | 570ec471d1605318aeefb030cd78682ae442235b (patch) | |
| tree | 51e17eabe37c6689f8799b55e6875c3480329a2c /src/content/tils/2020/12/29 | |
| parent | Makefile, mkdeps.sh: Derive index.html and feed.xml from more static "sortdat... (diff) | |
| download | euandre.org-570ec471d1605318aeefb030cd78682ae442235b.tar.gz euandre.org-570ec471d1605318aeefb030cd78682ae442235b.tar.xz | |
src/content/: Update all files left to asciidoc
Diffstat (limited to 'src/content/tils/2020/12/29')
| -rw-r--r-- | src/content/tils/2020/12/29/svg.adoc | 50 |
1 files changed, 20 insertions, 30 deletions
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] +---- <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path d="M 0 8 L 1 8 L 1 9 L 0 9 L 0 8 Z" /> @@ -89,27 +78,28 @@ getting the final result I manually cleaned-up the generated XML: <path d="M 14 11 L 15 11 L 15 12 L 14 12 L 14 11 Z" /> <path d="M 14 12 L 15 12 L 15 13 L 14 13 L 14 12 Z" /> </svg> -``` +---- -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' `<head>` a `<link>` to this icon: -```html + +[source,html] +---- <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> ... -``` +---- -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 |