Creating SVGs for SimpleD with Affinity Designer

September 30, 2016

As you probably know by now, you can import SVG shapes into SimpleDiagrams, either directly into your diagram or into a custom library. I posted a video on YouTube awhile back with some hints on using Adobe Illustrator for this very purpose. Those of you using Affinity Designer might have tried something similar.

However, if you are using Affinity Designer to create your SVGs, you might see the exported SVG clipped a bit when you bring import into SimpleD...or perhaps the handles aren't placed correctly over the shape when you try to move it around your diagram.

Fear not. Turns out there's an easy fix (thanks to the friendly user who emailed me about this yesterday).

After you create your shape, go to File --> Export --> SVG in the menu. On the following dialog that appears, the press More button.

Then, towards the bottom of the next dialog you'll see a Set viewBox checkbox. Make sure it's unchecked.

Then click Close.

Back on the main export dialog, click Export.

So now when you import that SVG into SimpleD (by just dragging it onto a custom library) and then start using it in a diagram, the shape should be fully visible without clipping and the handles should be placed correctly.

Affinity Design users, give that a shot and let me know how it goes.