Enhanced SVG Comparison with XML Compare 14.1: Introducing Z-Index Change Highlighting, Animated Changes and more

Posted6 July 2023
byTristan Mitchell

In November last year, we launched our new SVG Compare feature in XML Compare 12.0. It has since been added to our DocBook and DITA Compare products and we’ve had loads of great feedback from customers who are using it to find changes in their technical drawings, charts and graphs.

We always planned to extend the feature set and we did just that in our latest release. We’re really pleased to include some improvements and features suggested by customers. It’s always great to receive feedback and you can read about how we integrate feedback into our roadmap here. The updates in XML Compare 14.1 include five main features: an animated output format, highlighting of z-index changes, the ability to ignore ‘small’ changes, creating external SVG result files, and standalone SVG comparison.

Animated Changes output format

While marking SVG changes using bounding boxes around shapes provides a clear view of changes in all media, we have created a novel output format to be used in dynamic publications such as HTML. Instead of bounding boxes, changes are highlighted by animating the image result to ‘phase’ each image in and out alternately. It’s a technique that has been applied to great effect by those trying our spot-the-difference competitions at trade shows, so why not put it into the product?

Part of the image is appearing and reappearing to illustrate an animated result.

Example of an animated result

z-index change highlighting

In addition to highlighting changes to the attributes (size, style, position etc) of an SVG object, we now detect and display where there have been changes to their z-index. Like other changes, this is marked using a bounding box, but the box style is unique to a z-index change. It’s worth noting that a z-index change doesn’t always cause a visual change in the image but when it causes object overlap to change it’s critical to highlight it.

Example of a highlighted z-index change

Ignore ‘small’ changes

It’s now possible to ignore certain changes if they are considered small. What small means is up to you but we’ve added parameters to specify it in terms of a fixed number of pixels, or a percentage of the image size as a whole. Where changes to an object’s attributes fall within this definition of small, e.g. very small repositioning or resizing, they can be optionally ignored.

External SVG references now generate an external result

In our first iteration of SVG comparison, we converted external SVG references into inline SVG and compared them in situ, leaving the comparison result inline in the final result document. While in most cases, this is completely valid, it makes sense to keep the SVG compare result in the same form as the source i.e. if both inputs have external references, the result should also be an external reference. This is now the default behaviour.

Standalone SVG comparison

The above feature now means that SVG files can be compared directly using XML Compare. Two input SVG files will result in a single SVG result that highlights the changes between them in whatever output format you specify.

Try it out now

We’re really excited to hear your feedback on the latest SVG comparison features. If you’d like to try them out, upgrade to the latest version or register for an evaluation.