mirror of
https://github.com/lleene/hugo-site.git
synced 2025-01-23 12:02:22 +01:00
93 lines
2.9 KiB
Markdown
93 lines
2.9 KiB
Markdown
---
|
|
title: "Building With SVG"
|
|
date: 2021-08-28T11:53:54+02:00
|
|
draft: false
|
|
toc: true
|
|
tags:
|
|
- svg
|
|
- xml
|
|
- hugo
|
|
- golang
|
|
---
|
|
|
|
# SVG Tools and Hugo Integration
|
|
|
|
SVG is generally the image container of choice having used it for illustrations,
|
|
chip or device specifications, and visual outputs generated by code. SVG is
|
|
plain xml that is structured with some top level object/properties followed by
|
|
standardized objects that draw lines and shapes.
|
|
The hope here is that we can call a predefined go proceedure that parses
|
|
some section of markdown source code and instantiates the corresponding svg file
|
|
under our static folder that is then referenced.
|
|
|
|
``` go
|
|
{{/* a comment */}}
|
|
```
|
|
|
|
## KGT: Kate's Grammar Tool
|
|
|
|
KGT is a pretty neat starting point to experiment with this kind of function.
|
|
It is relatively self contained and produces compact SVG objects from simple
|
|
statements.
|
|
|
|
### Build Instructions
|
|
|
|
Building `libfms` and `kgt` from source was not too much of a hassle although
|
|
the build / dependancy documentation could be better. This was build with my
|
|
WLS-Ubuntu environment.
|
|
|
|
``` bash
|
|
apt install clang pmake
|
|
git clone --recursive "https://$libfsm_REPO/libfsm"
|
|
pushd libfsm; CC=clang PREFIX=$HOME pmake -r install; popd
|
|
git clone --recursive "https://$KGT_REPO/kgt"
|
|
pushd kgt/src; CC=clang PREFIX=$HOME pmake -r install; popd
|
|
```
|
|
|
|
The main issue is noticed
|
|
is the SVG being generated uses `path {rouded}` in its style definition which
|
|
the svg rasterizer from `librsvg2 2.40.20` complained about. Getting the latest
|
|
build however is quite involved requiring the latest cairo and proppler
|
|
libraries as well. Ideally generating pngs or rasterizing won't be needed.
|
|
|
|
### Example
|
|
|
|
Just to show a typical use case for making an illustration using the KGT tool,
|
|
below I generate the svg for one of the examples included by it's repository.
|
|
|
|
``` bash
|
|
KGT_DEF="<personal-part> ::= <first-name> | <initial> \".\" "
|
|
echo "$KGT_DEF" | kgt -l bnf -e svg | awk -vf1="$(<style.svg)" -f replace_style.awk > example_kgt.svg
|
|
```
|
|
|
|
The style is automatically introduced in the xml header section which is mostly
|
|
plain black. This has some legibility issues for dark themes so a short `awk`
|
|
script is used to replace the style with one that we define for this theme.
|
|
|
|
``` awk
|
|
BEGIN{style_flag=0}
|
|
/<style>/{style_flag=1}
|
|
{if(style_flag == 0) print $0}
|
|
/<\/style>/{style_flag=0;print f1}
|
|
```
|
|
|
|
For completeness we include the style definition below but this could be
|
|
added directly to KGT as a feature in future releases.
|
|
|
|
``` xml
|
|
<style>
|
|
rect, line, path { stroke-width: 1.5px; stroke: white; fill: transparent; }
|
|
rect, line, path { stroke-linecap: square; stroke-linejoin: rounded; }
|
|
path { fill: transparent; }
|
|
text { fill: white; font-family:'Trebuchet MS'; }
|
|
text.literal { }
|
|
line.ellipsis { stroke-dasharray: 1 3.5; }
|
|
tspan.hex { font-family: monospace; font-size: 90%; }
|
|
path.arrow { fill: white; }
|
|
</style>
|
|
```
|
|
|
|
The final result is shown below.
|
|
|
|
|