ericgrivilers / design-with-git

Visually walk through and compare svg file commit history in a git repository

Design with Git

"Design with Git" is a tool to help graphic designers visualize the differences between two versions of the same SVG file. The SVG files are grabbed from a github repository and their commit history displayed on a timeline. After selecting two versions, the user is able to compare them in different ways:

• viewing them Side by side
• one on top of the other with a sliding mask, an opacity slider or by toggling rapidly between both
• viewing the pixel difference between both SVG (Classic style: black meaning there is no difference. Pippin's style: where changed pixels are marked in bright red)
• by displaying and navigating the differences between the SVG (XML) trees

This tool is to be understood as a kind of "proof of concept" and runs on client-side in the browser (tested in Firefox and Chrome). It is presented here to encourage discussion about the usefulness of such tools for graphic designers and to be extensively tested with your own SVG repositories.

All suggestions, remarks and/or improvements are more than welcome.

This project has been started at Medialab-Prado between the 15th and the 27th of April 2013, during Interactivos?'13.

Try it online here

Extensive notes about the project: http://w.xuv.be/projects/design_with_git

Credits:

Julien Deswaef, Øyvind (pippin) Kolås, Capo lorea.org, Edu Merchán, Dave Crossland, Ed Tewiah.

Special thanks:

Femke Snelting, Ricardo Lafuente, Ana Isabel Carvalho, Jennifer Dopazo, ginger coons, Maria Solé Bravo, all the Interactivos? participants and the whole Medialab-Prado crew.