cben/sandbox

test SVG in issue comments

cben opened this issue · 3 comments

cben commented

both img tags and markdown ![]() syntax only worked when written on one line.

img tag linking to SVG with link:

markdown image syntax:

image

img tag linking to SVG without link:

markdown image syntax:

image

img tag linking to PNG:

markdown image syntax:

image

non-gravizo SVG:


source:

## img tag linking to SVG with link:

<img src='https://g.gravizo.com/svg?%20digraph%20G%20%7B%0A%20%20%20%20link%20%5Bshape%3Dbox%3B%20URL%3D%22http%3A%2F%2Fgoogle.com%22%5D%3B%0A%20%20%7D'>

markdown image syntax:

![image](https://g.gravizo.com/svg?%20digraph%20G%20%7B%0A%20%20%20%20link%20%5Bshape%3Dbox%3B%20URL%3D%22http%3A%2F%2Fgoogle.com%22%5D%3B%0A%20%20%7D)

### img tag linking to SVG without link:

<img src='https://g.gravizo.com/svg?%20digraph%20G%20%7B%0A%20%20%20%20not_a_link%20%5Bshape%3Dbox%5D%3B%0A%20%20%7D'>

markdown image syntax:

![image](https://g.gravizo.com/svg?%20digraph%20G%20%7B%0A%20%20%20%20not_a_link%20%5Bshape%3Dbox%5D%3B%0A%20%20%7D)

### img tag linking to PNG:

<img src='https://g.gravizo.com/g?%20digraph%20G%20%7B%0A%20%20%20%20PNG%20%5Bshape%3Dbox%5D%3B%0A%20%20%7D'>

markdown image syntax:

![image](https://g.gravizo.com/g?%20digraph%20G%20%7B%0A%20%20%20%20PNG%20%5Bshape%3Dbox%5D%3B%0A%20%20%7D)

### non-gravizo SVG:

<img src="https://cdn.rawgit.com/simple-icons/simple-icons/develop/icons/debian.svg" width="20%">
cben commented

Some (not very) relevant links:

cben commented

For some reason I thought the link worked in the README. No it doesn't, neither there nor here in comments.

  1. it's wrapped by GitHub with a link to the image itself. (this doesn't happen with github pages kramdown processing — https://github-cben-sandbox.anat-beni.net/README)
  2. it's an <img ...> tag, which disables "active" SVG features, apparently including links.

TODO: test inline <svg ...>?

cben commented

inline svg tag:

<title>G</title> <title>link</title> link
<svg width="62pt" height="44pt" viewBox="0.00 0.00 62.00 44.00">
 <g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 40)">
  <title>G</title>
  <polygon fill="white" stroke="white" points="-4,5 -4,-40 59,-40 59,5 -4,5"/>
  <!-- link -->
  <g id="node1" class="node"><title>link</title>
   <a xlink:href="http://google.com" xlink:title="link">
    <polygon fill="none" stroke="black" points="54,-36 2.4869e-14,-36 0,-1.77636e-14 54,-3.55271e-15 54,-36"/>
    <text text-anchor="middle" x="27" y="-14.9" font-family="Times Roman,serif" font-size="14.00">link</text>
   </a>
  </g>
 </g>
</svg>