<svg width="100" height="30" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20">This TEST fails.</text>
</svg>
*[TEST]: This Escapes SVG Text.results in
<svg width="100" height="30" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20">This <abbr title="This Escapes SVG Text.">TEST</abbr> fails.</text>
</svg>However, <abbr> is not valid within SVG and, as a consequence, the text within it is no longer rendered. I really like the abbreviations feature but I wonder: Is there a way to opt out of the replacement for part of the document?
In particular, markdown="0" does not work even though the documentation suggests so:
If an HTML tag has an attribute markdown="0", then the tag is parsed as raw HTML block.
Escaping the embedded SVG with {::comment} and {:/comment} also doesn't work as kramdown outputs the part within this as an HTML comment, which is then ignored by the browser.
I also tried to trick the replacement engine, for example, with non-breaking spaces around the abbreviation but also to no avail.
I think the best fix would be to ignore all text within <svg> (or even any HTML tag) when wrapping abbreviations with <abbr>. However, in my case I'm looking for an approach that works in kramdown 1.17.0 as I'm using GitHub Pages. I'm not familiar with Ruby so I want to ask you as the author: Can you think of any other "hack" to prevent abbreviation replacements within embedded SVGs?
The only one (and thus the best) I found so far is to transform the case of the text with CSS (text-transform: uppercase). Using Bootstrap with its utility classes, I can write my embedded SVG as:
<svg width="100" height="30" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" markdown="0">
<text x="20" y="20">This <tspan class="text-uppercase">test</tspan> now works!</text>
</svg>
results in
However,
<abbr>is not valid within SVG and, as a consequence, the text within it is no longer rendered. I really like the abbreviations feature but I wonder: Is there a way to opt out of the replacement for part of the document?In particular,
markdown="0"does not work even though the documentation suggests so:Escaping the embedded SVG with
{::comment}and{:/comment}also doesn't work as kramdown outputs the part within this as an HTML comment, which is then ignored by the browser.I also tried to trick the replacement engine, for example, with non-breaking spaces around the abbreviation but also to no avail.
I think the best fix would be to ignore all text within
<svg>(or even any HTML tag) when wrapping abbreviations with<abbr>. However, in my case I'm looking for an approach that works in kramdown 1.17.0 as I'm using GitHub Pages. I'm not familiar with Ruby so I want to ask you as the author: Can you think of any other "hack" to prevent abbreviation replacements within embedded SVGs?The only one (and thus the best) I found so far is to transform the case of the text with CSS (
text-transform: uppercase). Using Bootstrap with its utility classes, I can write my embedded SVG as: