The case for SVG, Inkscape and Git

SVG is a becoming a wildly used format. Most modern browsers can display it. The format has been around for quite a while and many (if not all) graphic softwares support it. It's also quite an easy human readable format.

Inkscape is also becoming a well respected graphic tool in the open source design community. It can import and export multiple graphic file formats. The interface is quite easy to apprehend and it uses SVG as a base file format. Inkscape is also extendable and uses python as scripting language. Inkscape is a tool used by webdesigners, illustrators, font designers and graphic designers in general.

Git is the trending version control system of today. His popularity (with websites like Github or Gitorious) and distributed capabilites make it a tool of choice for every designer concerned with efficient production workflow and collaboration.

As stated, SVG and Inkscape are already well interdependent. It seems obvious and almost trivial to integrate the features of git to this already excellent tool.

• Have the basic git commands integrated in the GUI (like init, add, commit, branch, push pull,…)
• Have the commit history displayed as a list or graph so the designer can go back in time and recall older versions.
• Have a special viewer that can display the differences between two commits in different ways.

Very cool project!

As a “getting started” idea for a graphical diff of two commits, here's a way to use ImageMagick's “compare” tool via git-difftool.

First, a python script (e.g compare.py) to render the two SVGs to bitmaps via Inkscape and then do the final diff via ImageMagick:

#!/usr/bin/env python
import sys, os
 
inkscape = "inkscape"
 
local = sys.argv[1]
remote = sys.argv[2]
tempdir = "/home/markv/gittemp/"
localpng = tempdir+"local.png"
remotepng = tempdir+"remote.png"
 
if(not (remote.endswith(".svg") and (local != "/dev/null"))):
    os.system("xxdiff %s %s" % (local, remote))
else:
    os.system(inkscape+" "+local+" --export-png="+localpng+" -w600 -h900 -C -bffffff -y1.0")
    os.system(inkscape+" "+remote+" --export-png="+remotepng+" -w600 -h900 -C -bffffff -y1.0")
    os.system("compare "+localpng+" "+remotepng+" - | display")
    os.remove(localpng)
    os.remove(remotepng)

Then add a hook like this to your .gitconfig:

[difftool "compare"]
        cmd = "/home/markv/bin/compare.py $LOCAL $REMOTE - | display"

Then “git difftool -y -t compare” will display bitmaps of changed SVGs, one at a time, highlighting changed regions in red.

Hope this helps,

–Mark

Thx Mark. Will look into that. If you want to give a hand during the worshop, you're welcome. — Ju 2013/02/07 01:25