1

I'm creating markdown file on a Github repo and want to embed a SVG file in the markdown in which the links from the SVG file are clickable. My SVG file is saved in the same folder in the repo. I've tried all html tags(iframe, object, img), short path, relative path, http path to the svg. When clicked it just takes me to the place in the github repo where the file is saved therefore not embedded and links in svg are not clickable. examples:
<iframe src="test.svg?sanitize=true"></iframe>
<img src="test.svg" />
<object type="image/svg+xml" data="image.svg"></object>

joepitz1
  • 194
  • 2
  • 12
  • Are you editing the README.md file of the repo? If we go by example you can have a look at the README file for https://github.com/SVG-Edit/svgedit -- the screenshot image on the page is referring to a PNG in the docs directory -- with the markdown ` ![screenshot](docs/screenshot.png)` – chrwahl Jan 02 '22 at 16:45

1 Answers1

0

I don't think that <iframe> element can be defined in the markdown file, there are limitations in this regard. However, you can make the image clickable. You must specify the full path to the image in the src attribute of the <img> element. Below I have used a clickable <img> element that I use in my own GitHub account.

<!-- Clickable <img> element for Github README.md file -->
<a href="https://twitter.com/" target="_blank" rel="nofollow">
    <img src="https://github.com/sebetci/sebetci/blob/main/images/networks/twitter.svg" alt="Twitter" width="30px" height="30px" />
</a>

The clickable <img> element image and references in the personal README.md file on GitHub are available below:

enter image description here

References
Sercan
  • 4,739
  • 3
  • 17
  • 36
  • I tried Twitter just takes me to the file in the gitub reop – joepitz1 Dec 31 '21 at 20:27
  • This will take you to the address **bbgithub.dev.xxx.com/name** assigned to the `href` attribute on the `` element. – Sercan Dec 31 '21 at 20:29
  • Where do you want the link to take you? – Sercan Dec 31 '21 at 20:30
  • I was hoping the svg image would be embedded in the markdown, and clickable links within the image. – joepitz1 Dec 31 '21 at 20:32
  • GitHub Markdown only has limited HTML support. Support for using standard HTML/CSS is not available in GitHub Markdown. Therefore, performing advanced operations only wastes time: [GitHub Flavored Markdown Spec](https://github.github.com/gfm/) – Sercan Dec 31 '21 at 20:36
  • so anyway for this to work? – joepitz1 Dec 31 '21 at 20:39
  • Maybe I phrased it wrong. Attempting to perform advanced operations will fail and waste time. Because GitHub Markdown has limited HTML/CSS features. For example, when you place the ` – Sercan Dec 31 '21 at 20:42
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240622/discussion-between-sercan-and-joepitz1). – Sercan Dec 31 '21 at 20:45