Scalable Vector Graphics

Scalable Vector Graphics (SVG) are supported by all modern browsers and are often preferred 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 inlineSVG() function.

echo inlineSVG('/path/to/my/file.svg');

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.

Notes:

• The dev Plugin can help with downloading and cleaning SVG files.
• Also see the Tips&Tricks wiki page on creating your own multi-color SVG icons.