un-rat-bleu-website-blogz-svg

A repository to store my ASCII art rendered in SVG and displayed on my blog.

Directory structure

/posts/

The files for a single ASCII art are grouped by the URL slug of the name of the post in which they are shown for the first time.

This assumes that a post can have at most 1 ASCII art.

Rendering process

Inkscape

1. Copy the plain text into the content of an unframed <text> element in Inkscape.

2. Set its CSS properties to match the settings of the plain text editor used for the design.

   • font-family must be a monospaced font.
   • font-size can be the same as in the plain text editor, but it should be able to be scaled without issues.
   • font-style should be normal.
   • font-weight should be normal.
   • line-height should be between 1 and 1.2.

3. Make the page size fit the content.

4. Add a bit of margin between the page borders and the <text>.

   • Rounding up to the nearest 10 should be enough.
   • If the page is close to being a square, make it a square.
   • Align the <text> with the center of the page.

5. Convert the <text> to <path>s.

6. Export to plain SVG.

   • aria-label attribute should be checked to see if it actually has a helpful value.
   • The optimization dialog can be used, but the real optimization comes below.

SVGO

The online version can be used.

• Make sure Prefer viewBox to width/height is enabled.
• Download the optimized SVG file.

Last touch of style

If desired, a <style> node can be added to the <svg> root with the following content:

:root{color-scheme:light dark;fill:currentColor;}

This will allow the SVG to adapt to light and dark modes, even when used from a <img> element.

Git

• Push to this Git repository. No need to use Git LFS.