====== SVG-Edit Plugin ====== ---- plugin ---- description: A nice way to create, store, edit, and embed SVG images in DokuWiki author : Tomas Mudrunka email : harviecz--gmail-com type : syntax, action lastupdate : 2017-02-26 compatible : 2017-02-26, frusterick, manners, rincewind, angua, Adora Belle, detritus, Frusterick Manners depends : conflicts : similar : graphviz, math2, draw, ditaa, gnuplot, graphgear, format, jsmath tags : svg, editing, draw, vector, graphics, paintbrush, sketch, pencil, images, media downloadurl: https://github.com/Harvie/DokuWiki-Plugin-SVGEdit/archive/master.zip bugtracker : https://github.com/Harvie/DokuWiki-Plugin-SVGEdit/issues sourcerepo : https://github.com/Harvie/DokuWiki-Plugin-SVGEdit donationurl: http://pledgie.com/campaigns/10862 screenshot_img: https://trello.com/1/cards/6442e548d2eefdea00ef5e29/attachments/6442e580425d031ea38c1890/download/dokuwiki-plugin-svgedit.png ---- ===== Download and Installation ===== Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually. ==== Changes ==== {{rss>https://github.com/Harvie/DokuWiki-Plugin-SVGEdit/commits/master.atom date}} ===== 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...) ...code... 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: Layer 1 ===== 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 [[http://svg-edit.googlecode.com/|svg-edit]] (you can try [[http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html|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 ===== Moved to https://github.com/Harvie/DokuWiki-Plugin-SVGEdit ===== Bugs (patches appreciated) ===== Please send your bugreports (and patches) to GitHub: https://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 [[https://github.com/ambienthack/DokuWiki-Plugin-SVGEdit/archive/master.zip | Weatherwax-compatible fork]]. --- [[user>rikblok|Rik Blok]] //2013/07/05 00:49// ==== How I get it to work on Frusterick Manners ==== * download the master file linked above: [[https://github.com/ambienthack/DokuWiki-Plugin-SVGEdit/archive/master.zip|Weatherwax-compatible fork]] * unzip it * edit ''script.js'', uncomment the third line and comment the first one * go to [[https://github.com/SVG-Edit/svgedit|the SVG-Edit github project]] * Download the project .zip * unzip it and place it in svegedit/svg-edit Flush the cache, and it should work. 06/07/2017