It's better when it's simple

User Tools

Site Tools


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.

Embedded SVG

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.


devel/svg.txt · Last modified: 2023-09-16 00:58 by Klap-in

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki