How to convert SVG path data to polygon values for HTML imagemaps?

Asked by digigalos

How can I determine the values of poly of a svg image?

Question information

Language:
English Edit question
Status:
Solved
For:
Inkscape Edit question
Assignee:
No assignee Edit question
Solved by:
Oleg Koptev
Solved:
Last query:
Last reply:
Revision history for this message
su_v (suv-lp) said :
#1

Could you explain in more detail what you mean with 'determine the values of a poly'?
like e.g.
- view or numerically change a bounding box position or size
- view or numerically change the coordinates of a node
- view or numerically change the size or attributes of a shape
- measure the length of a path
- ...?

1) First place to look for values of X, Y, height and width is the tool controls bar (the toolbar immediately above the drawing canvas). Depending on the currently selected tool you see different controls and can change tool-specific fields like
- bbox position/size (select tool),
- node coordinates (node tool),
- height/width (rectangle tool) etc.

2) You can also select an object and view its data in 'raw' SVG by opening 'Edit > XML Editor...'

3) With 'Effects > Visualize Path > Measure Path…' you can measure the length of the selected path and add it as a text-on-path object with the selected unit.

If I misunderstood your question please try to clarify ;-)

hth, ~suv

Revision history for this message
digigalos (digigalos) said :
#2
Revision history for this message
Best Oleg Koptev (koptev-oleg) said :
#3

Hello

That is really Bitmap Image Map instead of polylines in Inkscape.
I.e. SVG shown in wiki consider as bitmap image with image map on the
top of it. (aware that image map working only for exact resolution,
i.e. when you resize SVG, all data of image map must be recalculated
for fit)

you could create imagemaps in GIMP for example, please check
http://gimp-savvy.com/BOOK/node81.html

cheerz, Oleg

Revision history for this message
Oleg Koptev (koptev-oleg) said :
#4

I advise next workaround -
1) make sure that your svg at 100% scale have exact size, that will be
on the webpage
2) convert your svg to bitmap (png)
3) open it in gimp, make the image map

Revision history for this message
digigalos (digigalos) said :
#5

Thanks Koptev Oleg, that solved my question.

Revision history for this message
su_v (suv-lp) said :
#6

Direct conversion of an svg path notation to image map notation:

1) quoting from <http://stackoverflow.com/questions/1140620/calculating-svg-paths>:

<quote>
Assuming you are talking about a HTML image map? SVG path markup is very similar to what you gave in a HTML imagemap. Say you have:

<area shape="poly" alt="" coords="0,0,115,0,115,23,92,60,92,111,0,111" />

The same thing in path markup would be

M 0,0,115,0,115,23,92,60,92,111,0,111 Z

An uppercase M indicates that startPoint is an absolute value. The example you have linked to appears to hyphen separate the points with no spaces. So you might what to try something like

M0,0-115,0-115,23-92,60-92,111-0,111Z
</quote>

further references:
° Client-side image maps: the MAP and AREA elements:
<http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1>
° Paths - Scalable Vector Graphics (SVG) 1.1 Specification:
<http://www.w3.org/TR/SVG11/paths.html>
° Inkscape Guide > XML Editor:
<http://tavmjong.free.fr/INKSCAPE/MANUAL/html/XML.html>

2) experimental python script:
Creating an image map from SVG:
<http://davidlynch.org/blog/2008/03/creating-an-image-map-from-svg/comment-page-1/>

Revision history for this message
Oleg Koptev (koptev-oleg) said :
#7

great, ~suv, thanks for infos!
I was in last century as I see now ;)

best wishes, Oleg

Revision history for this message
su_v (suv-lp) said :
#8

@Oleg -

> I was in last century as I see now ;)
no, I disagree!! I really had a hard time finding _anything_ related to 'svg -> image map' with google...

This might be a challenge for a new extension in Inkscape - exporting an Inkscape drawing as HTML image map (whereby the image source for the image map could either be a linked bitmap or an SVG image made of paths or shapes on a separate layer). Maybe the author of 'svg2imagemap.py' is interested in enhancing his script and provide it as Inkscape extension with a corresponding 'inx' file?

There seem to exist several tools able to convert the data of a HTML image map to SVG, but beyond above mentioned python script (from the comments I guess it's far from stable or comprehensive) I could not find a valid link for a tool that converts an SVG path or shape to image map markup. Maybe HTML image maps aren't used that often nowadays or are realized with SVG (with javascript or whatever - I have no clue) or Flash anyway... I don't know. The GIMP plugin is obviously the best open source tool for users who don't want to bother with map or path markup but just create a clickable image with defined regions for the associated links.

Revision history for this message
su_v (suv-lp) said :
#9

Recently an updated version of InkscapeMap <http://sourceforge.net/projects/inkscapemap/> was released:
«A simple tool to generate HTML imagemap or coordinates list (eg. to be inserted into a database) from an Inkscape SVG file. Usefull for creating imagemap and generate area-coloured images on the fly using the coordinates (eg. in PHP with GD library).»

I did some quick tests and it seems to work reasonably well with Inkscape drawings. Some things to watch out for:

1) The tool doesn't handle Inkscape's optimized path [1] data well. Before you create a drawing for the imagemap, change 'Inkscape Preferences > SVG Output > Path data' to:
[ ] Allow relative coordinates
[x] Force repeat commands

2) Paths/polygons must have cusp nodes only: in the node tool, select all (Ctr+A) and use 'Make selected segments lines' (11th icon on the node tool controls bar). If you need more control about rounded corners e.g. of rectangles converted to path, use the extension 'Modify Path > Flatten Bezier' [2] to convert the curves to an approximation composed of straight-line paths.

hth, ~suv

[1] new feature in Inkscape 0.47: <http://wiki.inkscape.org/wiki/index.php/Release_notes/0.47#Optimized_path_data>
[2] <http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Extensions-ModifyPath.html#Extensions-FlattenBezier>