Table of Contents
Custom SVG icons
Editors
You can create your custom multi-color SVG icons for your DokuWiki webpage using an SVG path editor of your choice. There are free online versions and installable ones. Here is a good introduction and overview, where I found some first hints:
I recommend the following online SVG path generator/editor for generating new icons:
Example
An SVG file of an icon may look like this simple example, in general:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="red" d="M 4 4 L 4 20 L 20 20 L 20 4 Z"/> <path fill="white" d="M 5 5 L 5 15 L 15 15 L 15 5 Z"/> <path fill="red" d="M 8 8 L 8 12 L 12 12 L 12 8 Z"/> <path fill="transparent" stroke="blue" stroke-width="1px" d="M 7 8 L 10 13 L 14 7"/> </svg>
Paths in this context means a continuous sequence of all path commands (coordinates) from all path element's d attributes from one SVG file (here from the example SVG above):
M 4 4 L 4 20 L 20 20 L 20 4 Z M 5 5 L 5 15 L 15 15 L 15 5 Z M 8 8 L 8 12 L 12 12 L 12 8 Z M 7 8 L 10 13 L 14 7
It is easy to see from the coordinates in the example above, that the first three paths are squares nested inside each other. The fourth item is a stroke (multi-line) and as such intentionally not closed with a Z. As this example shows, each path string in the sequence of paths stands for a single graphical element.
Workflow
Path editing
What SVG path editors basically understand, is such a continuous sequence of path strings. So, based on the above example SVG file, the above sequence of path strings is what you can paste into the editor of your choice. If you download SVG files with the intention to modify them, you might have to separate, clean up, sort and close open path strings before they can be edited in a somewhat convenient way. Some clean up might be done by the path editor automatically upon import of path strings. However, to be able to effectively work on your icon, it is a good practice to separate each single graphical element of your icon as a new path string starting with an M and to close each single path string with a Z to keep track of those graphical element's beginnings and endings in your whole sequence of paths in your editor. (One exception are open strokes like the last one in the example.) For all options of path creation and manipulation there are many online tutorials and Youtube videos.
After editing your paths, you need to convert the paths back to the SVG file format. It is a good practice to put each path element on a new line like in the example above. Save the file on disc to be able to view your SVG icon in your browser.
SVG editing
You can play with the SVG example, above. Just paste the code into a text file, name it test-icon.svg and open it with your default browser by double mouse click. As stated above, the example SVG is composed of three shapes, that are closed paths (or in other words: areas) which can be filled (flood filled) with a color. The open path (multi-line) can be given a line thickness (stroke-width) and stroke-color, as shown in the example SVG file above. Unfortunately, the path editors do not show those colors. However, when displayed in the browser, all of those paths are stacked upon each other in the order of which they are listed in the SVG file (with the last one on top), so sequential order does matter here! You can play with the example by changing the order of the paths in the file and refreshing your browser to see the result.
SVG styling
If you leave the fill color undeclared on the path elements, DokuWiki might set a certain color, e.g. menu specific. But, when you declare the fill color, those DokuWiki default colors will be overridden. On the other hand, if neighter DokuWiki nor you define the color, it will default to black (by the browser), which is not always pretty. So, most of the time, you will be better off, declaring path colors for each path according to your design ideas. You can also declare colors using the RGB notation, here for red:
fill="rgb(255,0,0)"
If your icon has a white symbol in front of a colored background, it's a good practice to declare a white fill or stroke color to the path of that front character. Because, if you leave it with no color or transparent, the white background color of the webpage might not shine through under all circumstances (e.g. dark mode of the browser). So, again, most of the time, you are better off declaring the white color on your prominent symbol character, explicitly.
Also you can further style your SVG as a whole by inserting a style attribute, like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="transform: rotate(90deg) scale(0.5) translate(-10%, -10%);">
Just make sure your icon does not slip out of the viewBox otherwise it will be invisible (overflow is hidden).
Note: Of course, all of this can be also done with Inkscape, which is open source, but that's a more complex workflow, with pros and cons. (biggest pro is the contour-to-path feature for automated path generation)