Giter Club home page Giter Club logo

diffsvg's Introduction

diffsvg
=======

`diffsvg` determines the differences between two SVG images.

Motivation
----------

Many very useful tools for collaborative software development have evolved over the years. The `diff` tool is a good example because it is important during software development to be able to automatically determine differences between two versions of the same source code file. In principle, one can use `diff` on a vector image defined as an SVG image since all of the image data is encoded as plain text XML markup. Practically speaking, this approach won't work because two SVG documents could be logically identical while bearing little syntactical resemblance to one another. The purpose of this project is to produce a `diff` tool that works at the appropriate level of abstraction to determine differences between two SVG files. This tool will be useful to people who work on SVG graphics in the same way that the traditional `diff` tool is useful to people who write source code. For single users who are creating SVG graphics using version control, `diffsvg` will allow them to quickly spot differences between revisions. For groups of users that collaborate on making SVG graphics, `diffsvg` will easily expose changes that different team members have made to the same file.

Design
------

The SVG file format is a fairly complicated [XML definition](http://www.w3.org/TR/SVG11/). Furthermore, different programs produce varying levels of quality of SVG. For the sake of simplicity, it is easiest to think of an SVG file as having two main parts: the metadata section, and the data section. The metadata section is not rendered graphically, but contains information such as the author, title, software used to create the file, rights, and so on. The data section holds containers and elements. Containers are things like layers and groups and can contain other containers or elements. Elements are things like lines, polygons, text, etc. and are displayed when the SVG is rendered. The `diffsvg` tool should look at all fo the metadata items and all of the elements and containers in order to create the diff. For the sake of the alpha release, we will assume that the SVG was created with [inkscape](http://inkscape.org/) and all of the elements have a unique identifier ("id" property in the XML). For later revisions, we will need to consider less well structured SVG files. In that case, the location and type of element will likely have to be considered in order to successfully diff the files.

The `diffsvg` will have a command line utility in the spirit of the unix philosophy: "Do one thing and do it well." This tool will also be a package; it should be importable into other programs. From the command line, the user should be able to select from two output choices:

1. Pretty-print a digest of differences to `stdout`.
2. Write an SVG file containing the differences to the filesystem (or serialize the XML to be piped someplace else).

The default behavior will be to pretty-print to `stdout`. Under the hood, the diff engine will likely create some kind of SVG XML of the diff and only at the last step parse it for pretty-printing. The pretty-printed digest will be the default because it will likely fit in with the workflow the user is currently experiencing: the user has just fetched some changed from a git remote and just wants to know what parts of the SVG file have changed. He shouldn't have to switch over to the mouse, just pipe the results to less and use the j/k keys to step through the result. For example, perhaps the user's collaborator just changed some text description in the SVG's metadata. The output would read something like:

    +++ old-version.svg
    --- freshly-fetched-version.svg
    
    Metadata:
	    Element: Description
	    +++ "This is a good graphic."
	    +++ "This is the AWESOMEST graphic ever!"
	
As for SVG file output from the diff tool, there are several options. Here is a list of possibilities:

* Output an SVG file of the elements that are common between the two input files.
* Output an SVG of ONLY the elements in A.svg that do not exist in B.svg.
* Output an SVG of ONLY the elements in B.svg that do not exist in A.svg.
* Output an SVG of ONLY the elements in A.svg that are different in B.svg.
* Some combination of the above.

In all cases of the SVG file output, a message should print to `stdout` informing the user of any changes to parts that aren't rendered: e.g. metadata, etc.

Since the (oversimplified) input into this tool is SVG that comes out of inkscape, every element/group/layer/etc. will have a unique ID. The task is to parse the XML, match the ids of the elements/groups/layer/yaddayadda in A.svg to the things in B.svg and see if there is a difference. For example, perhaps there is a new layer in B.svg. Maybe some elements in A.svg were grouped and moved to a new layer in B.svg. Perhaps the color or size of an element changes from A.svg to B.svg. The unique ids are the key to determining the differences.

diffsvg's People

Contributors

jrsmith3 avatar nicksloan avatar luispedro avatar

Stargazers

Sam Huang avatar Nguyen Vu Cuong (Ralph) avatar Candous avatar Ergative avatar  avatar Nic Newdigate avatar Pankaj Patel avatar James Chan avatar Jeremy Douglass avatar Spacial avatar Alexandre B A Villares avatar Lukas Jurk avatar yuning avatar Alexei Kokhnovich avatar Daniel Sam avatar Andrew Potter avatar Lennart Rudolph avatar Michael Jett avatar Thomas Guesnon avatar Adrien Vetterli avatar Jeffrey Warren avatar Christian Boyle avatar Alex Bigelow avatar Marc Köhlbrugge avatar Mitch avatar Dima Zhgenti avatar John Peloquin avatar David Luu avatar Igor Moiseev avatar  avatar Jonathan Baby avatar Javier Olaechea avatar Nigel Thorne avatar Massimo Menichinelli avatar Lars Pastewka avatar  avatar  avatar Jesse avatar

Watchers

 avatar James Cloos avatar  avatar  avatar Jonathan Baby avatar  avatar

diffsvg's Issues

not able to parse svg file

M trying to parse the svg file, but cant able to parse it, its showing the error,

>>> tree = ET.parse('Sub.svg')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/usr/lib/python3.5/xml/etree/ElementTree.py", line 1184, in parse
    tree.parse(source, parser)
  File "/usr/lib/python3.5/xml/etree/ElementTree.py", line 596, in parse
    self._root = parser._parse_whole(source)
xml.etree.ElementTree.ParseError: mismatched tag: line 34, column 117

No example usage

Hey,
Is there anywhere a command I can run where I can actually see output?
All I see in the repo is a library and a collection of test with a solution.py that can't really be run.

Output XSLT stylesheet that can do the diff ?

It would be super useful if this could output XSLT stylesheets that could transform one doc into the other.

If it output both forward + backwards. Using these you could easily turn one doc into the other - this could be useful for animation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.