SVG contents removed by collapsing whitespace markup
An inline SVG wrapped in any of the collapsing whitespace markup ({ }
or {=
) has its child nodes removed.
Imagine an example inline SVG:
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2E3192;}
</style>
<circle class="st0" cx="98" cy="86" r="50"/>
</svg>
If this is wrapped in { } marks, the child style and circle elements are removed from the passage:
Input
{<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2E3192;}
</style>
<circle class="st0" cx="98" cy="86" r="50"/>
</svg>}
Generated Output
<tw-collapsed><svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve" data-raw=""></svg></tw-collapsed>
The same happens using the {= marks:
Input
[{=<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:#2E3192;}
</style>
<circle class="st0" cx="98" cy="86" r="50"/>
</svg>]
Generated Output
<tw-hook><tw-collapsed><svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve" data-raw=""></svg></tw-collapsed></tw-hook>
Note that the following code, using line continuations, doesn't remove elements:
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">\
<style type="text/css">
.st0{fill:#2E3192;}
</style>\
<circle class="st0" cx="98" cy="86" r="50"/>\
</svg>