Paul Hammant's Blog: OmniGraffle SVG to Angular-HTML Workflow
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:
- html/head/body tags as outermost.
- Angular import and a tiny model var of “blue”
- 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 @@, when browsers will only accept @@. 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. One day it will automatically do what I wanted before I started this article. Hopefully.