SVG Image Maps From PNG Using Inkscape

Tips & Tricks
#1
  • Scales
  • Uses a PNG (Imported to Inkscape)
  • Requires Application: Inkscape (Always Free)
  • Easily Adapted to Tiddlywiki Links

YouTube Video: Responsive SVG Image Maps

Requires Inkscape Application

You have to install Inkscape application, which is an open source application that never costs money.

Start with a PNG Image

Even though this is an SVG method, you start with a typical PNG file.

Inkscape Instructions

YouTube Video: Responsive SVG Image Maps

This video is very clear about creating a very minimal and trimmed down SVG image for an image map.

The instructions are very rapid, and you might have to slow it down or pause it very frequently.

Exported SVG

The exported SVG will look something like this:

<svg version="1.1" viewBox="0 0 2578 431" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<image width="333" height="333" xlink:href="data:image/png;base64,iVBORw0KGgoA-------ElFTkSuQmCC" preserveAspectRatio="none"/>
<path d="m223.5 210.5c1.733 ---- 10.45z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
<path d="m413.2 135.1c7.006 ---- 2.599z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
<path d="m643.2 118.2c6.628 ---- 6.497z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
<path d="m871.9 142.9c6.227 ---- 2.599z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
</g>
</svg>

Adding Links

Surround the <path /> tags with Tiddlywiki <$link> widgets

<svg version="1.1" viewBox="0 0 2578 431" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<image width="333" height="333" xlink:href="data:image/png;base64,iVBORw0KGgoA-------ElFTkSuQmCC" preserveAspectRatio="none"/>

<$link to="Tiddler Title 1" tooltip="Custom tooltip">
<path d="m223.5 210.5c1.733 ---- 10.4 5." style="fill-opacity:6.582e-7;stroke-width:10.07"/>
</$link>

<$link to="Tiddler Title 2" tooltip="Custom tooltip">
<path d="m413.2 135.1c7.006 ---- 2.599z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
</$link>

<$link to="Tiddler Title 3" tooltip="Custom tooltip">
<path d="m643.2 118.2c6.628 ---- 6.497z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
</$link>

<$link to="Tiddler Title 4" tooltip="Custom tooltip">
<path d="m871.9 142.9c6.227 ---- 2.599z" style="fill-opacity:6.582e-7;stroke-width:10.07"/>
</$link>

</g>
</svg>

Store SVG Attributes in Fields

  • Store the png image base64 in a field.
  • Store map paths in individual fields
  • Potentially swap map paths via fields
  • Probably other applications
<svg version="1.1" viewBox="0 0 2578 431" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g>
{{!!bgimg}}
<$link to="Tiddler Title 1" tooltip="Custom tooltip">{{!!path1}}</$link>
<$link to="Tiddler Title 2" tooltip="Custom tooltip">{{!!path2}}</$link>
<$link to="Tiddler Title 3" tooltip="Custom tooltip">{{!!path3}}</$link>
<$link to="Tiddler Title 4" tooltip="Custom tooltip">{{!!path4}}</$link>
</g>
</svg

screenshotsvg
screenshotsvg1001×423 21.1 KB

3 Likes
#2

Interesting. I might give this a try.

Just a an aside, for those pesky work computers you can use portableapps.com to download and install ink scape without those admin passwords.

#3

…unless of course, your work environment blocks portableapps.com, because someone might use it to download and install inkscape. :frowning:

1 Like
#4

It’s slipped under the radar of my employers thus far!

1 Like
#5

This makes me really wonder about the most minimal TW plugin for this purpose.

  1. Import a png to TiddlyWiki
  2. Convert it to base64
  3. use a single multi-line connector tool to outline areas of the PNG
  4. convert the setup to an SVG

Requires mouse interaction to record coordinates of mouse clicks over the image, so the ability to draw dots and lines between mouse clicks. Secondly, perhaps add a shade over the area for a hover effect.

It’s too minimal for there to be existing examples, so it would have to be developed from the ground up.

#6

Another option, I found useful to convert a png to svg is the online tool: SVGcode—Convert raster images to SVG vector graphics that can be installed as a PWA or integrated as an iframe inTW.

1 Like
#7

There are a number of such tools, of varying levels of ability.

But if I read correctly, the context here is not really converting PNGs to SVGs, but to use the PNG inside an SVG in order to make a TW-specific ImageMap. I had no idea this was possible, and I’m very impressed.

Moreover, the OP makes for a very readable tutorial. I look forward to trying it!