Learn about DokuWiki
Learn about DokuWiki
Compatible with DokuWiki
Under the “Configuration Settings” page in the admin panel, the plugin has a section with a few values:
|Setting name||Description||Default value|
|max_svg_width||Maximum width for SVG file size if no sizes are specified in the wiki page.||1024|
|default_width||Default fall-through width of an SVG file.||300|
|default_height||Default fall-through height of an SVG file.||150|
See below for discussion about how these values interact with your SVG file for display.
As of this writing, DokuWiki does not allow you to upload SVG files by default. This plugin will only embed SVG files that are uploaded to the wiki via the Media Manager for security's sake. To do this, you may need to create or edit the
mime.local.conf file for your wiki by adding this line:
Once this line is added, you should be able to upload SVG files.
Upload an SVG (Scalable Vector Graphics) file via the Media Manager; external SVG files will not be handled by this plugin for security reasons. Once you have done that, link it as you would any other image or media file, e.g.,
The SVG will be placed into your wiki page via an
<embed> tag rather than an
<img> tag. This allows for things such as elements with hyperlinks in the SVG to be clickable, etc., whereas embedding SVG as an image does not. (Note that this depends on support in your browser.)
When you specify a width and height for your image in your media link in the wikitext, it should do its best to render at that size, as long as the width is the same or less than the maximum set for SVG files. If it is greater than the defined maximum then it will render the SVG file with the maximum width and scale the height proportionally.
will render the file at 800×600, although the height may vary based on requirements passed by the SVG rendering engine to keep the aspect ratio correct.
If you do not specify any size information in your media link the SVG file will be inspected to determine the dimensions (subject to scaling if above the maximum width, as above).
heightattributes are set, then those will be used for the image.
viewBoxattribute is set then it will be parsed to get the dimensions.
will render the file using the embedded dimensions, but with a maximum width configured by the admin. If the SVG file does not have dimensions in it that can be determined it will use default values specified by the admin.
If you specify only a width (as you can for an image) in your media link this actually sets a new maximum width for that embedding of the SVG file only. It will determine the size to render at from the SVG file as above.
will render the file using the embedded dimensions, but with a maximum width of 2000 pixels.
The SVG file isn't just an image, it's another document, and it's contained within the tag that embeds it into the page. As such, if you open a link in your SVG file without a target specified, it will open in the bounds of the embedded SVG document. This is by design.
If you want a link to open full-page, you should specify the
target attribute on your links in your SVG file. In particular, if you specify the
_top target then your links will open in the current page at the top level.
If your SVG file does not have dimensions specified in
viewBox attributes then it can still be rendered, but scaling is handled by the browser's engine. In most cases this means that whatever dimensions are set in the wikitext or calculated by the plugin only renders a viewport on the file so it may be clipped in undesirable ways.
You may be able to fix this by loading the file into an SVG-capable editor (such as Inkscape) and setting a size or even saving the file and letting it impose one on it.
<object>tag rather than an
<embed>tag, and use
<embed>as a fall-through. Should support more browsers and give more options to style or extend in the future.
Great plugin! But I have two points that could be optimized:
When printing a page with SVG file, the SVG image is greatly reduced in size.
The section edit function gets a bit confused when this section contains an SVG image.
— Juergen_aus_Zuendorf 2019-11-25 16:13 I see your issues you submitted on the github page. Thanks for the heads up!
What browser are you using? Are you setting width and height on the SVG images? I don't have the problem with scaling when printing if I set a width and height on the image in Chrome or Firefox.
I have confirmed your other issue reported on github regarding flickering when you try to edit a section; that one is confusing, I'm going to have to look into that one some more. I have seen it with some other plugins and certain stylesheet alterations, too.
— Michael Bowers 2019-11-25 19:11 I think these issues are fixed in my latest commit. Please update and test.
— Michael Bowers 2019-11-26 01:55
One more thing: The media manager indicates that the SVG file is not in use. Therefore, there is a certain danger that it will be accidentally deleted.
— Juergen_aus_Zuendorf 2019-11-26 12:54