Search code examples
svgimagemap

Using SVG and getting the path data points

I am trying to get the path data points from an SVG file I am creating for an image-map. The code should look like the below after I save to an SVG file:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

However, when saving and/or exporting the file, I am getting a bunch of gibberish instead of data points and it looks like the below:

<image id="image4125" opacity=".5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAAEUCAYAAAAskArpAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAJYNJREFUeNrsnQd8FNX2x6dsb9nN 7qb3SrqU0ATpIcEnIA9QKRZEUB/6pINYEFFqDH8bwkOeFJGm0t5LqIbewZBAIKQXAtlNdtO37z83...

I have tried using both Adobe Illustrator CC and Inkscape. Any idea how to extract the correct data points using either of these programs, or why I am getting gibberish instead of the data points? I have followed multiple instructions on different websites (including this thread on StackOverflow).

Right now I can get data points to make a rectangle of each area, but the rectangular data points overlap and conflict with other. I am trying to create a polygon path and extract the data points so each shape is unique. Any help is much appreciated.

Solution

  • After a week of research and many tears shed, I finally found the solution. To create SVG images with the path data included when using Adobe Photoshop and Illustrator CC, follow these instructions:

    1. Cut up your image using Photoshop with layers of the image. Save the file as .psd.

    2. Open .psd file in Illustrator. You will then be able to select the different images you cut up in Photoshop.

    3. Select a single image. Open up image trace and trace the image using the Silhouettes preset option.

    4. Click on the Expand button (you will notice the silhouette of your image now has points around the edges; these are your data points).

    5. Open up the color palette. Make the top color white with a red line through it (this removes the fill of the silhouette). Then make the bottom color black (this traces over the trace line between the points).

    6. Finally, on the Attributes panel, you will want to set the image map to Polygon (you can add a new to the attribute below if wanted).

    After you repeat these steps over each image layer, you will then save the file as an .svg file with the following settings:

    • SVG Profiles: SVG 1.1 • Subsetting: None • Image location: Link • Preserve Illustrator Editing Capabilities: unchecked (this will reduce the size of your file for better performance. • CSS Properties: Style Elements • Output fewer tspan elements: checked • Use textPath elements for the text on path: checked • Responsive: checked

    After the file is saved with these options, you will then be able to open the .svg in Sublime, WebStorm, TextEdit, etc., and the path data will be included in the HTML. It is a beautiful sight! Hope this helps whoever is seeking the answer to my same problem!