67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
# un-rat-bleu-website-blogz-svg
|
|
|
|
A repository to store my ASCII art rendered in SVG and displayed on
|
|
[my blog](https://blogz.zaclys.com).
|
|
|
|
## 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](https://inkscape.org/).
|
|
|
|
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](https://svgomg.net/) 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:
|
|
|
|
```css
|
|
: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](https://git-lfs.com/).
|