How to embed SVG code inside jekyll markdown (on Github)?

Question

Naively I thought it would be easy to just add <svg> tag with content in my post.md page, like this:

---
published: true
title: Embeded SVG
---
## title

<svg width="400" height=300>
    <circle cx="150" cy="100" r="10" fill="blue"/>
</svg>

But instead of the image being displayed, I see the SVG code displayed (in Firefox). So far did not found any solution to what looks like a simple thing. Is it possible within jekyll / liquid markdown ?

Note: I read include an SVG (hosted on github) in MarkDown, but:

• I want to manipulate the svg code with d3.js latter, so I am assuming that I need to embed the SVG code, not reference it as an external image file.

• I could generate the initial svg content directly with d3.js (this works), but this would prevent anything to be displayed in case javascript is disabled...

Answer 1

You can disable kramdown specifically for your svg :

{::nomarkdown}
<svg width="400" height=300>
    <circle cx="150" cy="100" r="10" fill="blue"/>
</svg>
{:/}