Over a million developers have joined DZone.

OmniGraffle SVG to Angular-HTML Workflow

DZone 's Guide to

OmniGraffle SVG to Angular-HTML Workflow

· Java Zone ·
Free Resource

OmniGraffle (possibly the best app on the Mac) makes reasonable SVG. I hope it gets better and better with each release, though. If I wanted to take its output and turn it into an interactive applications (like the previous two previous article) with Angular, I have a new problem – OmniGraffle won’t round-trip preserve my inlined Angular application code. You might want to increment the ‘root’ SVG source, AND preserve the Angular bits and pieces you’ve typed into it. Luckily, there’s an imperfect source-control solution that involved two branches, and merge. That’s what I’ll outline in this article.

Refer my Github repo to demonstrate this: https://github.com/paul-hammant/svg_merge_experiment

In Omnigraffle, I exported a crude Pacman image as SVG, and put that into a branch as_from_omnigraffle_but_formatted. As the branch name suggests I pretty printed it (which I think Omnigraffle should do by default). I used XMLlint to beutify it, and gave it a new suffix that’s inaccurate, but helps git do a merge later. The xmllint command:

xmllint --pretty 2 --noblanks -o pacman_pretty.html /from/wherever/you/saved/the/omnigraffle/svg/output.svg

It makes a strange format. One that, arguably makes diff and merge easier. Xml is, by default, a very hard case for merge. Here’s diff as Github sees it

Here’s what that looks like before the .html rename (SVG – sorry IE 6,7,8 users):

Then I made a second branch with_angular_and_html, and morphed to the file (by hand) to include:

1. html/head/body tags as outermost.
2. Angular import and a tiny model var of “blue”
3. usage of that model in a color ‘fill’ attribute.

I then ran xmllint over it again. This time, there’s a shortcoming in Xmllint that required remediation – it wants to write <script src="xxx" />, when browsers will only accept <script src="xxx" ></script>. I raised a feature request, but had to manually fix it after running xmllint.

Now it looks like:

Now, back on the first branch, as_from_omnigraffle_but_formatted. I’ve imported from Omnigraffle again (the source files for which I should, but don’t, have under source-control). I changed the circle to a star (still red). The diff. It looks like:

I pretty printed it again, with the xmllint tool, before checking it in.

Next merged that to the other branch (with_angular_and_html), with the following command to hint git to be forgiving about whitespace changes. Here’s the diff. The merge command:

git merge -Xignore-all-space as_from_omnigraffle_but_formatted

In case you couldn’t guess, that’s now a blue star courtesy of Angular:

All wasn’t so smooth. I really wanted the merge to be automatic, but I had to arbitrate over the following diff before committing it:

Automatic would have been preserving the original change highlighted in red, and changing <circle ... /> to <path ... /> appropriately.

Merge science gets better and better every year though so one day, it’ll automatically do what wanted before I started this article. Hopefully.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}