Analyzing Scalable Vector Graphics Images

Pranav Lal

updated August 10, 2011

Introduction

This article will outline one way by which blind people can analyze complex SVG (Scalable Vector Graphics) images. You can produce tactile diagrams by using technology such as IVEO but how do you know what set of commands correspond to what shapes? In addition, you may always not have your tactile embosser at hand. Yes, they have become smaller but are not portable. Finally, this approach has the side benefit that the tools it uses are freely available.

Note:

The illustration at the end of this article deals with the most complex case of all, namely a situation when you have unstructured SVG. Structured SVG is easier to analyze since objects will be labeled adequately.

The problem of buffered coordinates

SVG is easy to read since many commands encode shape information. See the below command that draws a rectangle.

The above rectangle is centered at 92,86 and is 22 units long and 314 units wide. There is a bunch of style information but that is not relevant to the extraction of shape information therefore is not discussed here. The challenge lies in visualising each shape in the diagram and relating to other shapes in the correct order. More over, when the <path> element is used, you need to decode it and visualize what shape the coordinates represent.

Towards a solution

One approach to tackling this problem is to extract commands from the file and print the set you are interested in. this generates a lot of paper.

I have investigated the possibility of executing a SVG file like you do when debugging a program. The advantage of this approach is that you can see the effect of each command and see how the image is built. I have not found any accessible tools to do this.

My Solution

Prerequisites

· The Ivio viewer or Ivio Creator. You can try a browser like Firefox, Intenet Explorer 9 or even Chrome. However, a Browser’s interface is more cluttered so interpretting the vOICe’s soundscapes is that much harder.

· The vOICe from http://www.seeingwithsound.com.

· Your favorite text editor. It will help if it can handle multiple documents.

Solution steps

Warning: Please ensure that your XML is valid and that you close all tags correctly.

1. Open the image in IVEO or in whatever SVG viewer you are using.

2. Set the vOICe to active window or active window client sonification. Active window client sonification is better since it eliminates screen clutter in certain circumstances.

3. Examine the complete image. Look for distinguishing features. For example, if you are looking at a bar graph, try to locate the bars. Try separating what is in the foreground and what is in the background. Negative video may help here.

4. Set a goal. For instance, you want to see just the lines in a line graph excluding the legend text, axes etc.

5. Skim the |text of the SVG image in your text editor. Do a rough pattern analysis of the image. For instance, are there blocks of rectangles together? Are there bunch of ellipses appearing one after another?

6. Take a set of contiguous commands and paste them into a new text document. Ensure that you complete the SVG XML by adding the root node and the closing SVG tag (</svg>) tag to the relevant parts of the file.

7. Open the file in IVEO and use the vOICe to see what the image looks like.

8. Repeat the above process until you are familiar with the image.

Illustration

See the below bar graph. The graph consists of clustered bars.

Note:

To skip to the end of the image, search for “</svg>” without the quotes.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>

<text x="255" y="32" font-family="Verdana" font-size="14" font-weight="bold" fill="rgb(0,0,0)" text-anchor="middle" style="baseline-shift:-25%">Sheet1 Chart 4</text>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<text x="448" y="195" font-family="Verdana" font-size="12" font-weight="bold" fill="rgb(0,0,0)" text-anchor="middle" style="baseline-shift:-25%">Legend</text>

<text x="434" y="212" font-family="Verdana" font-size="12" fill="rgb(0,0,0)" style="baseline-shift:-75%">Series1</text>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

Analysis

I just want to see the bars and reduce the clutter in the image. When I view the image using the vOICe, I can hear a set of horizontal bars and distinct clicking noises as the soundscape pans from left to right. That is probably the graph paper. There are no significant changes in height. There is something at the top left and a small something at the bottom right. These could be legends and or title text. I am not interested in them. The chart is made up of rectangle, line and text elements. Let us see what happens if we extract all the rectangles before the lines start.

The above elements will not parse correctly so we need to complete the SVG file by adding the root node and the end tag for svg.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>

</svg>

When I sonify the completed image, I realize that there is something missing. The rectangles are too flat and dull. Therefore, I study the original SVG image and add the <defs> tag with its attributes and text back into the file. I now extract all the line elements in the chart and see what happens.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>

</svg>

I do get the graph paper if I keep the styles. The graph is still not as clean as I like. I start examining the lines very closely. I look for lines that have similar set of coordinates which will tell me that they belong to the same visual feature. The first thing I spot is that there are a bunch of lines with x=”99”. Let us see what happens when we remove them.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<defs>

</filter>

</defs>

</g>

<text x="448" y="195" font-family="Verdana" font-size="12" font-weight="bold" fill="rgb(0,0,0)" text-anchor="middle" style="baseline-shift:-25%">Legend</text>

<text x="434" y="212" font-family="Verdana" font-size="12" fill="rgb(0,0,0)" style="baseline-shift:-75%">Series1</text>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

This result is better but we are still not there. I continue the exercise but I switch to checking for the y coordinates since the x1 coordinates are changing rapidlly. I follow the same procedure as above. I am trying to simplify the image by starting from the bottom of the coordinate space. You can start from the top, It makes no difference. The reason I start from the bottom is that I want to isolate the high thin line in the graph. I finally have the following image.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>

</svg>

This is good enough since I can now hear the highpitched line clearly.

References

Item	Link
Scalable Vector Graphics	http://www.w3.org/Graphics/SVG/
The vOICe	http://www.seeingwithsound.com
IVEO from Viewplus Technologies	http://www.viewplus.com/products/software/hands-on-learning/

Return to home page

This work is licensed under a Creative Commons Attribution 3.0 Unported License