Question

I have a JS object that Raphael uses to generate a clickable SVG map. I need to modify some of the paths. Is there a tool I can use to do that in a user-friendly manner? I don’t want to fiddle with numbers using trial-and-error technique, I want to drag and drop paths/anchor points. Can I somehow import the coordinates into Illustrator/Dreamweaver/any other tool?

Thank you.

Here’s what the JS object looks like:

map.coords   = [
{ type:"path" ,id:"K15" ,d:"/*edited out*/"},
{ type:"rect" ,id:"K14" ,x:"496" ,y:"386" ,width:"9" ,height:"5"}
];

Here’s what the markup looks like (with Raphael-generated markup inside the svg element):

<div style="position: relative;">
    <div id="mapOverlay" style="position: absolute; top: 0; left: 0; z-index: 2">
    <svg height="777" width="777" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <desc>Created with Raphaël</desc>
        <defs></defs>
        <path fill-opacity="0" stroke-width="0.25" style="stroke-width: 0.25; fill-opacity: 0;" d="[/*edited out*/]" stroke="#000000" fill="#000000"></path>
    </svg>
    </div>
<img src="map.jpg" alt="Interactive Map">
</div>

Answer 1

Though Kevin Nielsen’s comment to the question is a perfectly doable approach, while waiting I figured out how to do it in Illustrator. Here’s how:

1. yank out the entire contents of <svg> tag and save it as a separate file

2. add this to the beginning of your file:

   <?xml version=”1.0″ encoding=”utf-8″?>
   <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

3. In Illustrator File -> Open. If it doesn’t open you can run it through the W3 validator to see what is wrong with it. Make sure you specify SVG 1.1 as Document Type in the settings.

4. You can then superimpose any image (it’s best if it’s the same dimensions) by using File -> Place command in Illustrator.