hugo-site/content/posts/building-svg.md

---
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 procedure 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 / dependency 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.

![example_kgt.svg](/images/example_kgt.svg)