2.9 KiB
| title | date | draft |
|---|---|---|
| Building With SVG | 2021-08-28T11:53:54+02:00 | true |
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.
{{/* 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.
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.
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.
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.
<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; }
text.literal { font-family: monospace; }
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.
