DokuWiki

It's better when it's simple

User Tools

Site Tools


Sidebar

Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community


Follow us on Facebook, Twitter and other social networks.

Our Privacy Policy

devel:svg

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.

Style

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.

Note: The dev Plugin can help with downloading and cleaning SVG files.

devel/svg.txt · Last modified: 2021-12-02 15:45 by bactram