Draw -> SVG

I may have just reinvented the wheel, but I often find it’s quicker to reinvent the wheel than to search the literature for a possible existing version.

What I’ve done is written a little app that you drop a drawfile onto, and it chucks a “Flat XML odg file” (.fodg) (now .html – shortly to be .svg) back at you, which you can then import into LibreOffice (shortly to be also Inkscape). It ignores sprites and text – but happily handles text converted to path – and ungroups any existing groups, but groups everything into a single group; all of which is fine if you’re doing all your editing in !Draw and just want nice vector graphics on your Mac or PC.

It currently ignores dash patterns or arrowheads on lines, but those will come – shout if you want them sooner rather than later. Or edit the facility in yourself… It does handle stroke widths, stroke colours and fill colours.

If anyone might find this useful, it’s freely available at http://clive.semmens.org.uk/RISCOS/XP1Dr2SVG.html – there are four other apps there that I’ve mentioned on here before. If anyone tried to download those and had trouble, why didn’t you say? They’re now self-extracting and there’s an explanation of what to do on the page.

Thanks for the tool. It’ll be useful for me :)

You’re very welcome! It’s good to hear it’s useful to someone else. Does the lack of arrowheads, rounded ends, or dash patterns matter to you? They’re on my to-do list, but not urgent for me at the moment. At the moment I’m not even thinking about duplicating the way things are grouped in the original – it doesn’t affect the actual appearance, but it could be a real pain if you want to edit on another platform.

I’ll see. To have time is on my to-do list too :)

How hard would it be to go from SVG to Draw?

Relatively difficult – there are so many different ways of skinning a cat in SVG. Not so much difficult as just a hell of a lot of work! Not something I have any need for, certainly not at the moment and indeed I’m pretty sure I never will have, so not something I’m likely to undertake unless someone offers me a LOT of money to do it!

Even the Draw → SVG I’ve done isn’t complete. I’ll probably complete the handling of paths sometime, so it copies group structures rather than flattening them, and so it copies dash patterns and arrowheads etc rather than rendering all lines as unbroken and butt-ended, but I’ve no intention of doing anything about text (use Convert to Path) or sprites (too much work, and I don’t need them at the moment, or probably ever).

It doesn’t stop Dr2SVG working if you have text or sprites in your Draw file – it just renders everything else and omits them. It doesn’t omit lines that have dash patterns or arrowheads (or other non-butt ends), but it renders them as solid lines with butt ends.

I’ve enhanced this quite a bit:

• it now handles dotted and dashed lines, reproducing the dot and dash patterns (all the standard !Draw ones, and any others you might’ve got from other software such as !XP1ReDraw) rather than rendering them as solid lines.

• it now does arrowheads (triangular endcaps on lines) – but this is fairly basic, for details see http://clive.semmens.org.uk/RISCOS/XP1Dr2SVG.html

• it now chucks a html file back at you, rather than a fodg file – same SVG inside it, but can now be imported into LibreOffice Draw or used directly as (or cut and pasted into) web pages.

- and I’ve fixed a bug. Bounding boxes were up the wall, sometimes didn’t matter but sometimes did!

Likely to enhance it further soon, details same place.

This lot took me longer than I expected because I couldn’t figure why my arrowheads weren’t working as per the SVG spec – until I loaded the generated SVG into Firefox and there they were, large as life! And in Safari. It’s just LibreOffice that doesn’t understand the SVG “marker” element…I assumed it did, because you can generate arrowheads on lines in LibreOffice perfectly beautifully. But a quick look at the SVG it generates when you save as SVG gives the game away: it just produces arrowhead shaped filled paths, it doesn’t generate them properly at all :-(

Finding LibreOffice Draw a bit frustrating on the Mac (various bits of SVG (groups, arrowheads) it doesn’t accept on input, that Safari and Firefox are perfectly happy with) I’ve got hold of Inkscape – and hey presto, things are working much better. I’ll update !XP1Dr2SVG to make better use of SVG very shortly. Has anyone tried to use this yet? Any experience with other packages on Mac or PC?

It’s on my short term todo list :)

A bunch of improvements in the works atm – I’ll post when they’re done and uploaded.

Done and uploaded – output is now .svg files, that I’ve tested with Inkscape, Safari, Firefox, LibreOffice Draw, and The GIMP. Does what it says in the help file & in the blurb at http://clive.semmens.org.uk/RISCOS/XP1Dr2SVG.html.
Things I still intend to do: better handling of arrowheads, basic text conversion (only fit for simple stuff – you’ll still want to “convert to path” for fancy stuff), and handling jpegs. It may take me a while to get around to these now the things I need immediately are working well.

What is different from just ‘File/Save/SVG’ ?

You have a version of !Draw that has “Save AS” SVG??

I have version 2.27 (09-Jan-2004) which offers a work area menu with File → Save → SVG as well as File → Save → File (the latter saves a Draw file, the former an SVG file). That is on Virtual Risc PC though.

You have a version of !Draw that has “Save AS” SVG??

ROLtd.

That is on Virtual Risc PC though.

Which absolutely guarantees that the OS version isn’t RO5.x and rather suggests that it is an ROL release (4.yx where y is higher than 0) which has an updated version of Draw and some OS level file translation.

All in all of little interest to Clive

I use the a9home !Draw without problems. Works with all my newer hardware and can save SVG.

I use the a9home !Draw without problems. Works with all my newer hardware and can save SVG.

OK it’s all built into the application then. The fact remains that copying the ROL version onto RO5.xx is not an option for people who don’t have a copy of the ROL OS…

I’ve got hold of Inkscape – and hey presto, things are working much better. I’ll update !XP1Dr2SVG to make better use of SVG very shortly. Has anyone tried to use this yet? Any experience with other packages on Mac or PC?

You can add Intaglio and Affinity Photo on the Mac to your list of successes, at least from a brief test.

Cheers, Fred & Steve! Good to know it works on other apps as well as on the ones I’ve got.

As for !Draw and “save as SVG”, I didn’t know there were versions that could do that. All I’ve got is a Pi 1 B running RISC OS 5.21. I used to have a couple of Risc PCs (running RISC OS 3.7 iirc) but retired them once I’d got the Pi up and running nicely.

I’d be quite interested to know how well “save as SVG” does on compatibility tests – how accurately does the SVG produced match !Draw’s rendering of a line with different caps on each end? Or of a dashed line with various combinations of endcaps? The SVG spec doesn’t actually allow for some of !Draw’s combinations (and vice versa) but of course they could be simulated (in both directions) with appended filled paths (which is what LibreOffice Draw does for all arrowheads) – but that way lies amazing file bloat if you transfer from app to app repeatedly.

As for !Draw and “save as SVG”, I didn’t know there were versions that could do that.

The option to save as SVG was added at some point during ROL’s Select Scheme, it is present in OS4.39 and later ROL ROMs. It is ‘save only’, the SVG file cannot be loaded back into !Draw.

how accurately does the SVG produced match !Draw’s rendering of a line with different caps on each end?

As a simple compatibility test two lines were drawn. The first had round endcaps at both ends and the second was an arrow with a round endcap at one end and a triangle at the other. The SVG save lost all of the endcaps.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Constructed by RISC OS Draw -->
<path style="fill-rule:evenodd;stroke-width:12.5;stroke:#000;fill:none;" d="M 6.25 87.53125 L 353.25 87.53125 " />
<path style="fill-rule:evenodd;stroke-width:12.5;stroke:#000;fill:none;" d="M 9.96875 6.25 L 356.96875 6.25 " />
</svg>

Cheers David too! So I’m doing a bit better…and intend to do better still. I should eventually be able to do triangular endcaps completely properly on plain lines, and sensibly (if not quite the way !Draw does them) on dashed lines. Round and square endcaps have to be the same on both ends in SVG (unless one bodges something LibreOffice style) but otherwise are like !Draw on dashed lines) but there’s a reasonably decent workaround for different endcaps on non-dashed lines. Will implement eventually, but don’t hold your breath. Working on other stuff just now.

…the SVG file cannot be loaded back into !Draw.

Thats right. But you can load with !Netsurf and “Export Object as a !Drawfile”.

As for !Draw and “save as SVG”, I didn’t know there were versions that could do that.

Are you writing your tool in C? If so, would there be some mileage in considering implementing it as a ‘Save As’ option for the ROOL Draw, rather than a standalone app?

I’d be quite interested to know how well “save as SVG” does on compatibility tests – how accurately does the SVG produced match !Draw’s rendering of a line with different caps on each end?…

Rather than reinvent the wheel do you have a test Draw file with most of the objects you want to test in, that you could upload somewhere?