Table of Contents
SVG-Edit Plugin
Compatible with DokuWiki
2017-02-26, frusterick, manners, rincewind, angua, Adora Belle, detritus, Frusterick Manners
Download and Installation
Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.
Changes
- Create FUNDING.yml (2020-04-28 20:04)
- Merge pull request #27 from AlanZheng/master (2018-10-17 13:36)
- correct svgedit class name (2018-10-17 13:18)
- fix link to svgedit homepage (2017-02-26 15:43)
- fix unupgradable (2017-02-26 14:32)
- fix contact info (2017-02-25 04:36)
- Merge pull request #26 from mprins/patch-1 (2017-02-25 04:30)
- use rawgit CDN (2016-12-27 15:53)
Syntax and Usage
If you want to see how awesome it is, look here: http://www.youtube.com/watch?v=M-QW6a1ZFHA (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.
Usage:
- embed svg using do=export_svg (recommended)
{{svg>page.svg}} {{svg>namespace:page.svg}}
- base64 encode svg directly (requires ~~NOCACHE~~ or &purge every time SVG changes)
{{SVG>page.svg}} {{SVG>namespace:page.svg}}
- 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="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <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"/> </g> </svg>
Basic Idea
- SVG is plaintext image format
- SVG-Edit is JavaScript SVG editor
- DokuWiki is great for collaboration and versioning on top of textfiles
- 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.
Files
Bugs (patches appreciated)
Please send your bugreports (and patches) to GitHub: http://github.com/Harvie/DokuWiki-Plugin-SVGEdit/issues
User experiences
Safari
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
Align
Seems it doesn't support aligning?
Relative Path
It would be nice, if it supports relative path. That makes easier to move documents.
Title
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
- download the master file linked above: Weatherwax-compatible fork
- unzip it
- edit
script.js
, uncomment the third line and comment the first one - Download the project .zip
- unzip it and place it in svegedit/svg-edit
Flush the cache, and it should work.
06/07/2017