Extracting coordinates of a path from an SVG file

Question

I'm trying to find percise coordinates from a path in Adobe Illustrator to use in an HTML image map and someone suggested I save the path as an SVG file, however when I open the SVG in note pad, I get the following:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300.96px" height="248.16px" viewBox="0 0 300.96 248.16" enable-background="new 0 0 300.96 248.16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M81.6,152.64c7.519,0,15.041,0,22.56,0
    c-0.64,2.88-1.28,5.76-1.92,8.64c-0.16,2.4-0.32,4.8-0.48,7.2c-0.16,0-0.32,0-0.48,0c0,2.56,0,5.121,0,7.68
    c-0.659,2.333,0.264,6.49-0.48,9.12c-0.16,0-0.32,0-0.48,0c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0
    c-0.584,2.076,0.248,5.349,0.48,6.72c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0c-0.364,1.869,0.809,1.523,0.96,1.92
    c0.56,1.47-0.759,3.551-0.96,4.32c0.16,1.12,0.32,2.24,0.48,3.36c0.16,0,0.32,0,0.48,0c0.488,1.604-0.283,3.241-0.48,4.32
    c-0.96-0.16-1.92-0.32-2.88-0.48c-0.48,1.44-0.96,2.88-1.44,4.32c0,0.8,0,1.6,0,2.4c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36
    c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36c-0.16,0-0.32,0-0.48,0c0.16,2.24,0.32,4.48,0.48,6.72c-0.16,0-0.32,0-0.48,0
    c0,0.64,0,1.28,0,1.92c-0.16,0-0.32,0-0.48,0c0,0.32,0,0.64,0,0.96c-0.32,0.16-0.64,0.32-0.96,0.48c0,0.32,0,0.64,0,0.96
    c-0.32,0.16-0.64,0.32-0.96,0.48c-0.451,1.146,1.519,3.296,0,4.32c-0.32,0-0.64,0-0.96,0c-1.875,2.142-4.972,1.148-7.2,0.48
    c-2.72,0-5.44,0-8.16,0c-0.933-1.886-1.007-2.403-3.84-2.4c0-0.48,0-0.96,0-1.44c1.326-0.347,1.074-0.134,1.44-1.44
    c0.16,0,0.32,0,0.48,0c0-0.64,0-1.28,0-1.92c0.16,0,0.32,0,0.48,0c0.32-1.76,0.64-3.52,0.96-5.28c-0.48-0.16-0.96-0.32-1.44-0.48
    c-0.16-0.8-0.32-1.6-0.48-2.4c-1.045-0.202-1.367-0.318-1.92-0.96c1.975-1.655,1.015-4.196,1.92-6.72c2.88-0.64,5.76-1.28,8.64-1.92
    c0.633-2.939,2.051-6.325,2.88-9.12c0.455-1.531-0.247-3.995-0.48-4.8c-0.32-3.199-0.64-6.4-0.96-9.6c0-1.027,0.48-0.96,0.48-0.96
    c-0.16-5.6-0.32-11.201-0.48-16.8c0-2.879,0-5.76,0-8.64c-0.16,0-0.32,0-0.48,0c0-1.6,0-3.2,0-4.8c-0.16,0-0.32,0-0.48,0
    c0-1.76,0-3.52,0-5.28C81.954,157.702,81.619,155.542,81.6,152.64z"/>
</svg>

Could someone please tell me how to extract the coordinates from this XML data so I can use them with an HTML image map? I obviously have no experience with parsing XML files and I wouldn't know where to begin with preparing a script to do so.

Thanks in advance!

Answer 1

Well, the first thing that you have to know about SVG is how a path is composed:

The 'd' attribute contains the specifications to create the path. Each command starts with a letter, matching the following:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Your path is a little complex, because it was generated by Illustrator, anyway M81.6,152.64 is the first step, it tells the render to position the cursor there.

Then it starts drawing: c7.519,0,15.041,0,22.56,0, it means "curve to", and the four numbers are the values to generate a cubic bezier curve (you can learn more here).

There are a lot of curves in your path ('c' and four numbers), and it ends with 'z', wich means 'close the path'.

What can you do? Well, you can parse the attribute 'd' of your path tag, for example with xml javascript parser, (or just parsing the content of the file as a string and searching the content of the attribute d=""), and with this string you can get the origin point of your path.

If you want to display your path, render it with javascript in real-time, you can use raphael.js. It takes string like your attribute 'd' to create a path, as you can see here, maybe with raphael it would be easier to create an object with events associociated than HTML image map.

If you want to extract each point of your drawing, SVG path doesn't works in that way, you can get just heights and widths of all the points from the xml. I recommend you to overlap a raphael svg path to your image.