From b3eaeef899ff68b9f0eb9d3902de24f7e9aec1ca Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Tue, 29 Dec 2020 16:27:01 -0300 Subject: Add TIL on SVG favicon --- _tils/2020-12-29-svg-favicon.md | 124 ++++++++++++++++++ .../eo/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po | 143 +++++++++++++++++++++ .../fr/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po | 143 +++++++++++++++++++++ .../pt/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po | 143 +++++++++++++++++++++ scripts/spelling/international.txt | 3 + 5 files changed, 556 insertions(+) create mode 100644 _tils/2020-12-29-svg-favicon.md create mode 100644 locale/eo/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po create mode 100644 locale/fr/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po create mode 100644 locale/pt/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po diff --git a/_tils/2020-12-29-svg-favicon.md b/_tils/2020-12-29-svg-favicon.md new file mode 100644 index 0000000..42d17fa --- /dev/null +++ b/_tils/2020-12-29-svg-favicon.md @@ -0,0 +1,124 @@ +--- +title: SVG favicon +date: 2020-12-29 +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 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/favicon.png %}`, otherwise the +file would be considered missing. diff --git a/locale/eo/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po b/locale/eo/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po new file mode 100644 index 0000000..8c2caf8 --- /dev/null +++ b/locale/eo/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po @@ -0,0 +1,143 @@ +# +msgid "" +msgstr "" + +msgid "" +"title: SVG favicon\n" +"date: 2020-12-29\n" +"layout: post\n" +"lang: en\n" +"ref: svg-favicon" +msgstr "" + +msgid "" +"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." +msgstr "" + +msgid "" +"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." +msgstr "" + +msgid "" +"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:" +msgstr "" + +msgid "" +"\n" +"\n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +"\n" +msgstr "" + +msgid "" +"The good thing about this new favicon 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." +msgstr "" + +msgid "" +"With the new favicon file, I now had to add to the templates' `` a " +"`` to this icon:" +msgstr "" + +msgid "" +"\n" +" \n" +" \n" +" ...\n" +msgstr "" + +msgid "" +"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:" +msgstr "" + +msgid "" +"module Jekyll\n" +" class FaviconGenerator < Generator\n" +" safe true\n" +" priority :high\n" +"\n" +" SIZE = 420\n" +"\n" +" def generate(site)\n" +" svg = 'static/favicon.svg'\n" +" png = 'static/favicon.png'\n" +" unless File.exist? png then\n" +" puts \"Missing '#{png}', generating...\"\n" +" puts `inkscape -o #{png} -w #{SIZE} -h #{SIZE} #{svg}`\n" +" end\n" +" end\n" +" end\n" +"end\n" +msgstr "" + +msgid "" +"I had to increase the priority of the generator so that it would run before " +"other places that would use a `{% link /static/favicon.png %}`, otherwise " +"the file would be considered missing." +msgstr "" diff --git a/locale/fr/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po b/locale/fr/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po new file mode 100644 index 0000000..8c2caf8 --- /dev/null +++ b/locale/fr/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po @@ -0,0 +1,143 @@ +# +msgid "" +msgstr "" + +msgid "" +"title: SVG favicon\n" +"date: 2020-12-29\n" +"layout: post\n" +"lang: en\n" +"ref: svg-favicon" +msgstr "" + +msgid "" +"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." +msgstr "" + +msgid "" +"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." +msgstr "" + +msgid "" +"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:" +msgstr "" + +msgid "" +"\n" +"\n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +"\n" +msgstr "" + +msgid "" +"The good thing about this new favicon 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." +msgstr "" + +msgid "" +"With the new favicon file, I now had to add to the templates' `` a " +"`` to this icon:" +msgstr "" + +msgid "" +"\n" +" \n" +" \n" +" ...\n" +msgstr "" + +msgid "" +"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:" +msgstr "" + +msgid "" +"module Jekyll\n" +" class FaviconGenerator < Generator\n" +" safe true\n" +" priority :high\n" +"\n" +" SIZE = 420\n" +"\n" +" def generate(site)\n" +" svg = 'static/favicon.svg'\n" +" png = 'static/favicon.png'\n" +" unless File.exist? png then\n" +" puts \"Missing '#{png}', generating...\"\n" +" puts `inkscape -o #{png} -w #{SIZE} -h #{SIZE} #{svg}`\n" +" end\n" +" end\n" +" end\n" +"end\n" +msgstr "" + +msgid "" +"I had to increase the priority of the generator so that it would run before " +"other places that would use a `{% link /static/favicon.png %}`, otherwise " +"the file would be considered missing." +msgstr "" diff --git a/locale/pt/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po b/locale/pt/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po new file mode 100644 index 0000000..8c2caf8 --- /dev/null +++ b/locale/pt/LC_MESSAGES/_tils/2020-12-29-svg-favicon.po @@ -0,0 +1,143 @@ +# +msgid "" +msgstr "" + +msgid "" +"title: SVG favicon\n" +"date: 2020-12-29\n" +"layout: post\n" +"lang: en\n" +"ref: svg-favicon" +msgstr "" + +msgid "" +"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." +msgstr "" + +msgid "" +"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." +msgstr "" + +msgid "" +"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:" +msgstr "" + +msgid "" +"\n" +"\n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +" \n" +"\n" +msgstr "" + +msgid "" +"The good thing about this new favicon 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." +msgstr "" + +msgid "" +"With the new favicon file, I now had to add to the templates' `` a " +"`` to this icon:" +msgstr "" + +msgid "" +"\n" +" \n" +" \n" +" ...\n" +msgstr "" + +msgid "" +"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:" +msgstr "" + +msgid "" +"module Jekyll\n" +" class FaviconGenerator < Generator\n" +" safe true\n" +" priority :high\n" +"\n" +" SIZE = 420\n" +"\n" +" def generate(site)\n" +" svg = 'static/favicon.svg'\n" +" png = 'static/favicon.png'\n" +" unless File.exist? png then\n" +" puts \"Missing '#{png}', generating...\"\n" +" puts `inkscape -o #{png} -w #{SIZE} -h #{SIZE} #{svg}`\n" +" end\n" +" end\n" +" end\n" +"end\n" +msgstr "" + +msgid "" +"I had to increase the priority of the generator so that it would run before " +"other places that would use a `{% link /static/favicon.png %}`, otherwise " +"the file would be considered missing." +msgstr "" diff --git a/scripts/spelling/international.txt b/scripts/spelling/international.txt index 562c9b7..cf98212 100644 --- a/scripts/spelling/international.txt +++ b/scripts/spelling/international.txt @@ -86,6 +86,7 @@ NixOS Nixpkgs OOP OTP +PNG POSIX ParsecC Pastebin @@ -104,6 +105,7 @@ Reddit Redux SA SSD +SVG Screencast Screencasts ShellCheck @@ -157,6 +159,7 @@ eo euandre euandreh eval +favicon ffi fi fr -- cgit v1.2.3