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.
Naturally DokuWiki allows user to upload raster image onto server and show it inside document. This default mechanism has some disadvantages:
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.
This small article does not cover creation of images itself. I recommend using Inkscape. There are numerous tutorials available on how to use Inkscape.
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.
Tip: In the Inkscape's Document Properties user can fit document size onto objects size plus custom margins.
Instead saving file as SVG in Inkscape I save it as Clean SVG to remove all unnecessary code reducing size.
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
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.
Method I propose does not depend on any plugins. The SVG is embedded directly into HTML.
<html> <svg> ... </svg> </html>