Clean up SVG figures

[maxim-belkin]

We have quite a few figures in our repository and they have to be easy to maintain. Therefore, we need to clean them up so that they:

1. are minimal in size (don't have unnecessary information)
2. are well formatted (using 2- or 4-space indentation)

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
  <text x="10" y="20" stroke="none" fill="red">
    print("SWC SVG FTW")
  </text>
</svg>

3. don't use extra fonts
4. don't use jargon

Please feel free to submit PRs and reference this issue.
Each such PR should modify one figure only (not all at once).

[akeshavan]

hi @maxim-belkin : I've cleaned up 1 file in this PR #537 -- let me know if you like the new format, and I can do the remaining images.

[maxim-belkin]

Example SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="1500">
 <defs>
    <style type="text/css"><![CDATA[
      .gray { fill: rgb(220,220,220); stroke-width:0; }
      .white { fill: none; stroke-width:2; stroke: #000; }
      .text { fill: #000; font-size: 60px; text-anchor: middle;  }
    ]]></style>
 </defs>
 <rect width="300" height="100" class="gray" />
 <rect width="300" height="100" y="150" class="gray" />
 <rect width="300" height="100" x="400" class="white" />
 <rect width="300" height="100" x="400" y="150" class="white" />
 <text x="150" y="70" class="text">final</text>
 <text x="150" y="220" class="text">original</text>
 <text x="550" y="70" class="text">0.0</text>
 <text x="550" y="220" class="text">32</text>
</svg>

[maxim-belkin]

I wrote a Python program that can be used as the first step in cleaning up / optimizing SVG files:

fig/optimize_svg.py.

It can use svgcleaner, scour, and svgo. It also performs steps to clean up SVG figures generated with Matplotlib.

[vinisalazar]

Hi @maxim-belkin,

I tried running your script and got the following results (attached below):

Original repo size: 1665560 bytes (1.7 MB)
After optimizing: 1452196 bytes (1.5 MB)

I have rendered the lesson website locally and apparently all images are OK.

Best,

V

(base) Sverdrup ➜  fig git:(issue-494) ✗ du -b .; du -sh .
1665560	.
1.7M	.
(base) Sverdrup ➜  fig git:(issue-494) ✗ python optimize_svg.py -o all *.svg
Found 'svgcleaner' version 0.9.5
Found 'svgo' version 2.2.2
Found 'scour' version 0.38.2
Optimizing using: svgcleaner
Optimizing using: svgo
Failed to optimize 'inflammation-01-average.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'inflammation-01-group-plot.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'inflammation-01-imshow.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'inflammation-01-line-styles.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'inflammation-01-maximum.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'inflammation-01-minimum.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'lesson-overview.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-01.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-02.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-03.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-04.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-05.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-06.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-call-stack-07.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-function.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-overlapping-ranges.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-sticky-note-variables-01.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-sticky-note-variables-02.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-sticky-note-variables-03.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Failed to optimize 'python-zero-index.svg' with SVGO
error: unknown option '--enable={sortAttrs,removeStyleElement,removeScriptElement,removeOffCanvasPaths}'

Optimizing using: scour
(base) Sverdrup ➜  fig git:(issue-494) ✗ du -b .; du -sh .
1452196	.
1.5M	.

[vinisalazar]

I was wondering why I was getting these errors from SVGO. Turns out the --enable and --disable flags were removed in version 2.0.0. In the current version v2.2.2, they must be activated via the config file.