github svg renders as a black rectangle in markdown

Question

An svg-image on my repository renders as a black rectangle in markdown. See https://github.com/petradewittevaneck/Signaleringskaart-ouderen/blob/NieuwOntwerp/README.md

When navigate to the file itself, it renders correctly (to small however)

What can be the reason for this difference? Is there used another rendering-algoritme on GitHub when refering as image from a markdown-file then when showing the image directly?

Answer 1

This question is probably impossible to answer for anyone who isn't a GitHub server admin. You can see sanitize=true in the URL: https://raw.githubusercontent.com/petradewittevaneck/Signaleringskaart-ouderen/NieuwOntwerp/Signaleringskaart%20ouderen.svg?sanitize=true

Something that your image is doing, the GitHub sanitizer doesn't like.

The GitHub sanitizer has known issues, see https://github.com/github/markup/issues/556

I pretty printed both your SVGs, and found this in the diff:

$ diff 1.svg 2.svg
1,2c1,2
< <?xml version="1.0"?>
< <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Laag_1" data-name="Laag 1" viewBox="0 0 436.54 612.28">
---
> <?xml version="1.0" encoding="UTF-8"?>
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Laag_1" viewBox="0 0 436.54 612.28">
4d3
<     <style>.cls-1,.cls-20{fill:none;}.cls-2{fill:#e5f2ba;}.cls-3{font-size:32px;}.cls-24,.cls-3,.cls-31,.cls-38,.cls-6{fill:#3b4349;font-family:Calibri-Bold, Calibri;font-weight:700;}.cls-4{letter-spacing:-0.01em;}.cls-5{letter-spacing:-0.01em;}.cls-6{font-size:24px;}.cls-7{letter-spacing:-0.03em;}.cls-8{letter-spacing:-0.01em;}.cls-9{letter-spacing:-0.01em;}.cls-10{letter-spacing:-0.02em;}.cls-11{letter-spacing:-0.01em;}.cls-12{clip-path:url(#clip-path);}.cls-13{fill:#414e51;}.cls-14{clip-path:url(#clip-path-2);}.cls-15{clip-path:url(#clip-path-3);}.cls-16{clip-path:url(#clip-path-4);}.cls-17{clip-path:url(#clip-path-5);}.cls-18{clip-path:url(#clip-path-6);}.cls-19{clip-path:url(#clip-path-7);}.cls-20{stroke:#414e51;stroke-miterlimit:10;stroke-width:1.07px;}.cls-21{clip-path:url(#clip-path-8);}.cls-22{clip-path:url(#clip-path-9);}.cls-23{clip-path:url(#clip-path-10);}.cls-24{font-size:18px;}.cls-25{letter-spacing:-0.03em;}.cls-26{letter-spacing:-0.01em;}.cls-27{letter-spacing:-0.01em;}.cls-28{letter-spacing:0em;}.cls-29{letter-spacing:-0.01em;}.cls-30{letter-spacing:-0.02em;}.cls-31{font-size:22px;}.cls-32{letter-spacing:0em;}.cls-33{letter-spacing:-0.01em;}.cls-34{letter-spacing:-0.01em;}.cls-35{letter-spacing:-0.02em;}.cls-36{letter-spacing:-0.01em;}.cls-37{letter-spacing:-0.01em;}.cls-38{font-size:12px;}.cls-39{letter-spacing:-0.01em;}.cls-40{letter-spacing:-0.02em;}.cls-41{letter-spacing:-0.01em;}.cls-42{letter-spacing:-0.01em;}.cls-43{letter-spacing:-0.01em;}.cls-44{letter-spacing:-0.01em;}.cls-45{letter-spacing:-0.01em;}.cls-46{letter-spacing:-0.02em;}.cls-47{letter-spacing:-0.01em;}.cls-48{letter-spacing:-0.01em;}.cls-49{letter-spacing:-0.01em;}.cls-50{letter-spacing:-0.01em;}.cls-51{letter-spacing:-0.02em;}.cls-52{letter-spacing:-0.01em;}.cls-53{letter-spacing:-0.01em;}.cls-54{letter-spacing:-0.01em;}.cls-55{letter-spacing:-0.02em;}.cls-56{letter-spacing:-0.03em;}.cls-57{letter-spacing:0.01em;}.cls-58{letter-spacing:-0.03em;}.cls-59{letter-spacing:-0.01em;}.cls-60{letter-spacing:-0.02em;}.cls-61{letter-spacing:-0.06em;}</style>
126c125
<   <text class="cls-24" transform="translate(93.8 321.91)">Her<tspan class="cls-25" x="26.82" y="0">k</tspan><tspan x="34.99" y="0">e</tspan><tspan class="cls-26" x="44.05" y="0">n</tspan><tspan x="53.56" y="0">t u &#xE9;&#xE9;n </tspan><tspan class="cls-27" x="109.45" y="0">v</tspan><tspan class="cls-28" x="117.72" y="0">an d</tspan><tspan class="cls-29" x="149.99" y="0">e</tspan><tspan class="cls-30" x="158.87" y="0">z</tspan><tspan x="165.7" y="0">e signalen?</tspan></text>
---
>   <text class="cls-24" transform="translate(93.8 321.91)">Her<tspan class="cls-25" x="26.82" y="0">k</tspan><tspan x="34.99" y="0">e</tspan><tspan class="cls-26" x="44.05" y="0">n</tspan><tspan x="53.56" y="0">t u één </tspan><tspan class="cls-27" x="109.45" y="0">v</tspan><tspan class="cls-28" x="117.72" y="0">an d</tspan><tspan class="cls-29" x="149.99" y="0">e</tspan><tspan class="cls-30" x="158.87" y="0">z</tspan><tspan x="165.7" y="0">e signalen?</tspan></text>

It looks like, in your case, the sanitizer is rejecting your CSS.