This is an old revision of the document!
Scalable Vector Graphics
Scalable Vector Graphics (SVG) are supported by all modern browsers and are often to prefer when displaying iconography. DokuWiki's internal systems are slowly migrating to make use of SVG instead of PNG graphics.
DokuWiki makes heavy use of the community managed Material Design Icons. If you provide your own icons, make sure their style somewhat matches that style.
Inlining SVG into HTML is best for small, single color icons that can be easily styled using CSS. The inlining can be done using the
By default, the function will only inline files smaller than 2kb - so be sure your images are smaller than that.
When providing SVG images to be inlined, it is recommended to trim them down to an absolute minimimum:
- omit the XML declaration and DocType
- omit unnecessary namespaces
- ommit all styles and fill attributes
In addition to ensure the embedded image can easily be styled via CSS ensure the following:
- the SVG should contain a single, fillable path
- prefer viewBox over width and length attributes
The Lean-SVG website can help trimming and fixing existing SVGs.
Note: The dev Plugin can help with downloading and cleaning SVG files.