Interactive SVG Image Map does not work for TW5

[oleghbond]

Tobias Beer demonstrated a quite useful technique in his site Interactive SVG Image Map.

I tried to explore this technique creating the following example:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg8"
   >
  <g>
    <rect
       width="50.648811"
       height="38.55357"
       x="46.113098"
       y="63.410713"
       style="stroke-width:0.26458332" />
    <a xlink:href="http://google.com">
      <rect
         style="stroke-width:0.26458332"
         y="101.96428"
         x="96.761909"
         height="53.672623"
         width="51.404755" />
    </a>
  </g>
</svg>

It works fine for several browsers when I drag and drop this SVG file into the browser.

However, it does not work for Tiddlywiki 5.1.15. Actually after I drag and drop this SVG file into TW5 I see the SVG picture, but it is dead (not resposive).

Could somebody tell me what's wrong? What is a simplest and robustest way to make a live resposive SVG for TW5?

[Ton Gerner]

Hi,

I don't know what you mean by dead (non responsive); with your code in a tiddler I can click the second rectangle which brings me to Google.
It acts the same as this code opened in a browser. What else would you expect?
As Tobias shows you can use CSS for other effects.

Cheers,

Ton

[oleghbond]

Thanks Ton for your response.

When I say "dead (non responsive)" I mean, that after drag-and-drop the svg-image, 

1. I do not see change of the mouse arrow while hovering the active region and 
2. clicking the mouse does not give transfer by the reference.
   

In case I put the svg-code of the image directly to a tiddler 

1. clicking the mouse gives transfer by the reference, but
   
2. I do not see change of the mouse arrow while hovering the active region and
   
3. the most unpleasant effect is that the image looks unacceptably different of the original (see the two screenshots attached) 

субота, 24 лютого 2018 р. 15:55:44 UTC+2 користувач Ton Gerner написав:

[Ton Gerner]

Hi,

The pictures you give now are not related to the code you gave in your first post. That code gives two rectangles (I entered your code in a tiddler at twiddlywiki.com):

When I say "dead (non responsive)" I mean, that after drag-and-drop the svg-image, 

1. I do not see change of the mouse arrow while hovering the active region and 
2. clicking the mouse does not give transfer by the reference.
   

When I hover over the lowest rectangle my mouse pointer changes from an arrow to a hand. And as said before, clicking leads to Google.
I tried with Linux Mint 17.3 + Firefox & Windows 10 + Firefox.
But when using Chrome the mouse pointer does not change (Mint & Windows) although clicking leads to Google.

In case I put the svg-code of the image directly to a tiddler 

1. clicking the mouse gives transfer by the reference, but
   
2. I do not see change of the mouse arrow while hovering the active region and
   
3. the most unpleasant effect is that the image looks unacceptably different of the original (see the two screenshots attached)
   

My knowledge of SVG is very limited. Maybe others can comment on 3, but then it's wise to give the SVG code used for the pictures in your last post.

Also:

1) What OS and browser are you using?
2) Did you test Tobias' original code (the 3 rectangles)?

Cheers,

Ton

 

 

[oleghbond]

Thanks again, Ton,

Usually I work with Win 10 + Chrome + TW 5.1.15 on Node.js.

I've got an svg-file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
 width="5.03089in" height="4.24349in" viewBox="0 0 362.224 305.531" xml:space="preserve" color-interpolation-filters="sRGB"
 class="st4">
 <style type="text/css">
 <![CDATA[
 .st1 {fill:#dde2cd;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
 .st2 {fill:#000000;font-family:Calibri;font-size:1.16666em}
 .st3 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
 .st4 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
 ]]>
 </style>

 <g>
 <title>PAGE-1</title>
 <g id="shape1-1" transform="translate(18.12,-202.372)">
 <rect x="0" y="220.492" width="113.386" height="85.0394" class="st1"/>
 <text x="10.66" y="267.21" class="st2">RECTANGLE</text> </g>
 <g id="shape2-4" transform="translate(259.065,-117.333)">
 <path d="M0 263.01 L42.52 220.49 L85.04 263.01 L42.52 305.53 L0 263.01 Z" class="st1"/>
 <text x="15.75" y="267.21" class="st2">POLYGON</text> </g>
 <a xlink:href="#Intro">
 <g id="shape3-7" transform="translate(103.159,-18.12)">
 <path d="M0 263.01 A42.5197 42.5197 0 1 1 85.04 263.01 A42.5197 42.5197 0 0 1 0 263.01 Z" class="st1"/>
 <text x="24.98" y="267.21" class="st2">ELLIPSE</text> </g>
 </a>
 <g id="shape4-10" transform="translate(74.8129,-202.372)">
 <path d="M0 305.53 L0 360.2 L70.87 360.2 L70.87 404.74" class="st3"/>
 </g>
 <g id="shape5-13" transform="translate(188.199,-60.6397)">
 <path d="M0 305.53 L113.39 305.53 L113.39 248.84" class="st3"/>
 </g>
 </g>
</svg>

I observe systematic inconsistencies of how TW5 manages with svg-mages, namely:

1. when I drag-and-drop the svg-file into a browser window it works fine for Mozilla and Edge; for Chrome the mouse pointer is not affected while it hovers the active area;
2. when I drag-and-drop the svg-file into TW the image is revealed fine, but no response on hovering the mouse pointer as well as clicking the hyperlink of the active area;
3. when I put the code of svg-file into a tiddler I certainly observe the response on hovering the mouse pointer as well as clicking the hyperlink of the active area, but the image is revealed in absolutely unacceptable way (see the two images above);
1. of course I tried the example of Tobias Beer (https://tobibeer.github.io/tb5/#example-svg); it works well; however, I use standard tools for generation of svg-images such as draw.io or others and for technological consistency I would prefer complete absence or at least minimal hand afterprocessing of resulted images.

I would be grateful for anyone's assistance.

субота, 24 лютого 2018 р. 17:41:27 UTC+2 користувач Ton Gerner написав:

[Ton Gerner]

Hi,

I can confirm:

1. SVG code opened in the browser (Linux Mint, Firefox) looks normal (Rectangle, Ellipse, Polygon + lines).
2. SVG code in Inkscape, SVG-edit or SVG Viewer shows normal
3. SVG code in a tiddler in TW5 shows weird (Linux Mint, Firefox, Chrome) but the link from Ellipse to Intro works.
   

When I set the type of the tiddler to image/svg+xml, it looks normal (Linux Mint, Firefox, Chrome) but the link from Ellipse does not work anymore (!?!).

Cheers,

Ton

[Ton Gerner]

Hi,

Using type image/svg+xml has restrictions (sandbox) see https://tiddlywiki.com/#Using%20SVG

I don't know what goes wrong with the embedded SVG.
Hopefully others can help.

Cheers,

Ton

[BJ]

I am not sure if the "<![cdata" is allowed.. try deleting this

all the best
BJ

[@TiddlyTweeter]

One method to help debug SVG issues is to take the SVG code and put it through a "MINIMISER" to strip out stuff that may be proprietary (i.e. won't work universally reliably), here is a good one of many: https://jakearchibald.github.io/svgomg/

SVG should work well across browsers if its well constructed. Sometimes SVG is "ahead of the game"-- meaning its possible to design SVG in specialist apps that produce SVGs that are not fully cross-browser compatible and that in some rendering situations will fail in apparently unpredictable ways.

Best wishes
Josiah

[oleghbond]

Thanks, your advice helped partially. 

I passed the latter svg-image through Minimiser in the following way: all the options were switched ON, except (1) Show original, (2) Remove xmlns, (3) Style to attributes, (4) Move group attrs to elements, (5) Remove style elements. 

After that the svg-code being put directly in a tiddler is revealed correctly. It even shows the xlink:href address (in the left bottom corner of a browser windows) while hovering. Further on, all the tested browsers Chrome, Edge and Firefox perform the desired jump to the link "#Intro". Chrome does not show the change of the mouse pointer from the arrow to the hand while hovering the active area.

In all the browsers I did not succeed the next attempt to perform the jump to the link "#Intro". After the first succesful jump I noticed in the web-address bar (in all of the browsers) the destination permalink web-address "https://protw.github.io/eco/#Intro", which is usually.appears by request.

The "minimised" code looks as follows:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" color-interpolation-filters="sRGB" viewBox="0 0 362.224 305.531" style="fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3">
  <style>
    .st1{fill:#dde2cd;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:.24}.st2{fill:#000;font-family:Calibri;font-size:1.16666em}.st3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:.75}
  </style>
  <g id="shape1-1" transform="translate(18.12 -202.372)">
    <path d="M0 220.492h113.386v85.039H0z" class="st1"/>

    <text x="10.66" y="267.21" class="st2">
      RECTANGLE
    </text>
  </g>

  <g id="shape2-4" transform="translate(259.065 -117.333)">
    <path d="M0 263.01l42.52-42.52 42.52 42.52-42.52 42.52L0 263.01z" class="st1"/>

    <text x="15.75" y="267.21" class="st2">
      POLYGON
    </text>
  </g>
  <a xlink:href="#Intro">

    <g id="shape3-7" transform="translate(103.159 -18.12)">
      <path d="M0 263.01a42.52 42.52 0 1 1 85.04 0 42.52 42.52 0 0 1-85.04 0z" class="st1"/>

      <text x="24.98" y="267.21" class="st2">
        ELLIPSE
      </text>
    </g>
  </a>

  <path id="shape4-10" d="M0 305.53v54.67h70.87v44.54" class="st3" transform="translate(74.813 -202.372)"/>
  <path id="shape5-13" d="M0 305.53h113.39v-56.69" class="st3" transform="translate(188.199 -60.64)"/>
</svg>

Does anybody have any idea how to force next jumps on the mouse click?

неділя, 25 лютого 2018 р. 15:07:41 UTC+2 користувач @TiddlyTweeter написав:

[BJ]

note that tiddlywiki turns double spaces into paragraphs - so I would advise to remove all  blank lines

[BJ]

that should have read double blank lines....

[Magnus]

I usually run the svg code thru https://petercollingridge.appspot.com/svg-editor

My favorite svg-minimizer :)