It's better when it's simple

User Tools

Site Tools


SVG-Edit Plugin

Compatible with DokuWiki

2017-02-26, frusterick, manners, rincewind, angua, Adora Belle, detritus, Frusterick Manners

plugin A nice way to create, store, edit, and embed SVG images in DokuWiki

Last updated on
Syntax, Action

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to ditaa, dokudrawingboard, draw, format, gnuplot, graphgear, graphviz, jdraw, jsmath, math2, sketchcanvas

Tagged with draw, editing, graphics, images, media, paintbrush, pencil, sketch, svg, vector

Download and Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.


Syntax and Usage

If you want to see how awesome it is, look here: (the video is from the beta version. It works better now.)

The biggest problem with this plugin is that it needs a modern browser. At this time it works best with WebKit-based browsers (Chromium, Chrome, Safari and Epiphany).

Create new image or embed existing.


  • embed svg using do=export_svg (recommended)
  • base64 encode svg directly (requires ~~NOCACHE~~ or &purge every time SVG changes)
  • base64 encode inline svg directly (originaly for internal use, but have fun if you like it…)
    <svg args...>...code...</svg>

Now you can also embed SVG directly to the page like this, but it's only by-product and editing of such images will not be supported:

<svg width="100" height="100" xmlns:xlink="" xmlns="">
 <!-- Created with SVG-edit - -->
  <title>Layer 1</title>
  <ellipse ry="34" rx="31" stroke-width="5" stroke="#000000" fill="#ff0000" id="svg_2" cy="55" cx="63"/>
  <rect stroke-width="5" stroke="#000000" fill="#000080" id="svg_1" height="39" width="45" y="11" x="12"/>

Basic Idea

  1. SVG is plaintext image format
  2. SVG-Edit is JavaScript SVG editor
  3. DokuWiki is great for collaboration and versioning on top of textfiles
  4. Why we are not using DokuWiki to take care about our images

I had created this proof of concept version and I am copylefting whole source and I hope that community will improve this plugin

I am using DokuWiki to taking notes in school and I was missing simple way to add sketches, graphs and mathematical formulas. So I've installed math2, graphviz, but still there was nothing really usable to create sketches, so I've decided to write my own plugin.

At the beginning, I've found cool software called svg-edit (you can try demo) which can edit SVG images directly in browser using JavaScript. And I've got idea to embed SVG-edit to DokuWiki WYSIWYG and store svg files same way as other documents, so everybody will be able to collaborate on single SVG file even with using diffs and any other cool DokuWiki stuff.


Bugs (patches appreciated)

Please send your bugreports (and patches) to GitHub:

User experiences


Recommend using {{svg>namespace:imagename.svg}}. This will initially put two objects on the wiki page, one a blank image object and the other a linked line, “svg@namespace:imagename.svg”.

  • Select the second, the first time you do this a topic doesn't exist yet page pops up.
  • Select “create this page”. You should see a button labeled “SVG” next to your other edit buttons in the edit window.
  • Select “SVG”. An embedded svg-edit window shows up.
  • Create your image. You probably want to edit the document properties (hitting 'i' should bring it up) and set the canvas to fit the contents (or otherwise set the canvas).
  • Once satisfied, select the “SVG-SAVE” button at the bottom.

Now you should have the image showing up. For further editing, select “svg@namespace:imagename.svg” link, “edit”, and “SVG”. I assume the situation is similar for other browsers that work (this does not include Firefox).

Offline usage

To use the editor offline, simply extract all content of svg-edit-*.zip from the main site on googlecode in ./lib/plugins/svgedit/ and rename extract folder in svg-edit. Open ./lib/plugins/svgedit/script.js with an editor and comment first line and uncomment third. That all! Very thanks Thomas! — vinnie 30/03/2011 17:04


Seems it doesn't support aligning?

Relative Path

It would be nice, if it supports relative path. That makes easier to move documents.


How about using first line of svg file as it's title rather than svg@page_path. I mean the title text showing on pages like below. Thanks for your wonderful job.

(svg image shows here)

[TITLE shows here]

Weatherwax compatibility

Currently, the original svgedit in the download link doesn't work on Weatherwax. Thanks to ambienthack for providing a Weatherwax-compatible fork. — Rik Blok 2013/07/05 00:49

How I get it to work on Frusterick Manners

Flush the cache, and it should work.


plugin/svgedit.txt · Last modified: 2023-04-21 21:36 by Aleksandr

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