SVG images in DokuWiki

<html>

</html>DokuWiki is a great tool for storing information. DokuWiki is text-based tool allowing users to create tables and format text in different ways. Even with extensive text formatting one image is worth more than thousand words. Images are even more important for engineers and scientists. Even small images make text much more attractive and easy to focus on.

SVG vs raster

Raster

Naturally DokuWiki allows user to upload raster image onto server and show it inside document. This default mechanism has some disadvantages:

Uploading images involves extra effort from the user.
Images have size much bigger than text.
Raster images cannot be scaled because of lose of quality.
Raster images cannot be easily edited.

SVG

SVG is relatively new standard (2006) but most commonly used modern web browsers support it. SVG files are based on XML and can be embedded directly into HTML. Below I show few steps/advices on how to create and them embed image into doku wiki page.

Steps

Preparation

This small article does not cover creation of images itself. I recommend using Inkscape. There are numerous tutorials available on how to use Inkscape.

Size

Image should not be too big nor too small. Images in one page should look similar. The default maximum width of DokuWiki template is 746 [px]. Left and right padding is 28 [px]. I assume usable width as 715 [px] This should reflect on your SVG image size. User can set Inkscape document size by clicking File → Document Properties under Custom size.

Oversized

</html>

Normal size

</html> Tip: In the Inkscape's Document Properties user can fit document size onto objects size plus custom margins.

Clean SVG

Instead saving file as SVG in Inkscape I save it as Clean SVG to remove all unnecessary code reducing size.

Single line SVG

I found very usefull to join all lines of SVG file. This way DokuWiki code is much more readable. I am doing it using Notepad++ and key combination Ctrl+J (followed by Ctrl+C).

Single spaces

Notepad++ can also replace double spaces with single ones. Select Search –> Replace and type in Find what field ([\s]+)([\s]+). In the Replace with field put space. Be sure that in Search Mode box Regular expression is selected. Finally press Replace All.

Embedding in DokuWiki

Method I propose does not depend on any plugins. The SVG is embedded directly into HTML.

<html>
<svg> ... </svg>
</html>

Notes

Use only web safe fonts
SVG cannot be copied just like raster images
SVG text can be copied
SVG can be extracted from HTML, re-used, re-edited
SVG will look different on different browsers due to different render engines
SVG will look good on print
SVG code can be bigger than raster code

Mental Workbench

Table of Contents