SVGs rendering incorrectly in reading mode

This only happens with some SVGs. I’ll provide one that triggers the bug below.

Steps to reproduce

  1. Open a new obsidian note.
  2. Paste in an SVG that triggers the bug.
  3. Observe that in edit mode the output is correct
  4. Observe that in reading mode the output is different and incorrect.
  5. Paste SVG into an external SVG renderer / html and observe that the output is always correct.

Expected result

This SVG should be rendered on the page:
image

Actual result

In reading mode this SVG is rendered on the page instead:
image

Environment

  • Operating system: Windows 11 Home
  • Debug info:
SYSTEM INFO:
	Obsidian version: v0.15.9
	Installer version: v0.15.9
	Operating system: Windows 10 Home 10.0.22622
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

Additional information

Here is a paste bin of the above SVG file which triggers the bug.
SVG Code

Here is a link showing the SVG being rendered correctly in an html file:
nathang.dev/fileshare/svg_test.html

This SVG was originally generated using tikz. Here is the tikz code, however I don’t think this is probably relevant considering the SVG is rendered correctly everywhere other than obsidian:

% Required packages
\usepackage{tikz}
\usetikzlibrary{backgrounds}
 
\begin{document}
 
\begin{tikzpicture}[thick,
    set/.style = {circle,
        minimum size = 3cm,
        fill=orange},
	background rectangle/.style={fill=orange}, show background rectangle]

% Set A
\node[set,label={135:$A$}] (A) at (0,0) {};
 
% Set B
\node[set,label={45:$B$}] (B) at (1.8,0) {};
 
% Intersection
\begin{scope}
    \clip(0,0) circle(1.5cm);
    \clip (1.8,0) circle(1.5cm);
    \fill[white] (0,0) circle(1.5cm);    
\end{scope}
 
% Circles outline
\draw (0,0) circle(1.5cm);
\draw (1.8,0) circle(1.5cm);
 
\end{tikzpicture}
 
\end{document}

works for me. post a screen recording of this happening in the sandbox vault

Hello, sorry I didn’t follow up on this yet! Here is a video inside the Sandbox on the latest version of Obsidian:

svg_screen.mp4

I also see it as “incorrect” in Editing mode. And I see nothing in Reading mode. (0.16.3)

screenshot_2022-10-01_12-19-59

Testing another example I found on the web. <clipPath> - SVG: Scalable Vector Graphics | MDN It fails too. It seems in Obsidian (or in CodeMirror, and/or in certain modes in Obsidian) the clip path just isn’t working.

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

Intended look:

screenshot_2022-10-01_12-53-13

How it shows up in Obsidian:

screenshot_2022-10-01_12-54-13

Curious… I can get it to show up as intended in the Sandbox vault. But in my own vault, with Restricted mode turned on, default theme (dark or light) and no CSS snippets (and restarted Obsidian after turning it all off) it shows up as incorrect.

So I’m wondering if there is some core plugin or setting that is causing the issue.

Yes I have noticed that before, if you open it side by side they do not act independently:
double_pane.mp4

It doesn’t work in my sandbox vault, if that makes a difference.

Any updates? It seems this is at least somewhat reproducible

1 Like