Extract path coordinates from an SVG file

Question

I am trying to find the percise coordinates from a path in Adobe Illustrator to use it on an HTML image map, and someone suggested saving the path as an SVG file, however, when I open SVG in notepad, 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> 

Can someone please tell me how to extract the coordinates from this XML data so that I can use them with an HTML image map? I obviously have no experience in parsing XML files, and I don't know where to start with preparing a script.

Thanks in advance!

Answer 1

Well, the first thing you need to know about SVG is how the path develops:

The 'd' attribute contains the specifications for creating the path. Each command begins with a letter corresponding to 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 bit complicated because it was generated by Illustrator, anyway M81.6,152.64 is the first step, it tells the rendering to place the cursor there.

Then he begins to draw: c7.519,0,15.041,0,22.56,0, which means "curve k", and four numbers are the values ​​for generating the cubic bezier curve (you can find out more here ).

There are many curves in your path ("c" and four numbers), and ends with "z", which means "close the path."

What can you do? Well, you can parse the "d" attribute of your path tag, for example using xml javascript parser (or just parse the contents of the file as a string and search for the contents of the d = "" attribute), and with this string you can get the starting point of your the way.

If you want to display your path, visualize it with javascript in real time, you can use raphael.js . Creating a path requires a string similar to your 'd' attribute, as you can see here , it might be easier to use raphael to create an object with events associated with the HTML image map.

If you want to extract every point of your drawing, the SVG path does not work this way, you can only get the heights and widths of all points from xml. I recommend you overlay the vraphael svg path with your image.