How to stop text from getting messy when I cloze using SVG?

Anki Card Design
1

Hi everyone,

I have recently started trying to cloze flowcharts directly exported in SVG from drawio so that I could modify the text on Anki, instead of using image occlusion which is kind of limiting in that regard.

This has worked with the first diagram I worked with (see below). I have been able to modify and put clozes wherever I wanted on the text directly.

image
image1232×822 48.7 KB

I then tried moving on to a bigger flowchart, however this is where things get complicated. For a reason that is unknown to me, the text gets all messy as soon as I copy&paste in Anki.

image
image1756×1164 67.5 KB

Is there any way my diagrams can maintain their integrity and not lose all their structure as soon as I paste them into Anki?

For information, I use Enhanced Cloze 2.1 v2 on these diagrams.

P.S. if anyone knows how I can make sure the backgrounds on all my cases are white, feel free to help :slight_smile:

2

The reason this works is that an SVG is really just a long text string of instructions for what to draw. So in an appropriate instruction, you can use text that says this is {{c1::a box}} just as easily as you can use text that says this is a box. But the key is where those cloze markers are getting placed. If they surround the text and its tags then more might be hidden than you want, or it might break the cloze notation.

Take a look at what you’re pasting and where the markers are. We don’t know what your graphic is supposed to look like, so we don’t know what’s missing or how to fix it.

If you want help with specifics, you’ll have to post your SVG here as text in a code/preformatted text block –
```

by putting 3 backticks above and below it.

```