Transclude a Tiddler Contains an SVG Image and CSS currentColor

#1

Open https://tiddlywiki.com
Create a new tiddler called “myImage” with below content


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="96" height="96" style="enable-background:new 0 0 512 512" xml:space="preserve">
<path style="fill:currentColor" d="M72.616 365.776 9.232 256.008l63.384-109.784h126.768l63.376 109.784-63.376 109.768z"/>
<path style="fill:currentColor" d="M194.76 154.224 253.528 256 194.76 357.784H77.24L18.472 256 77.24 154.224h117.52m9.24-16H68L0 256l68 117.784h136L272 256l-68-117.776z"/>
<path style="fill:currentColor" d="m312.616 227.56-63.384-109.784L312.616 8.008h126.768l63.376 109.768-63.376 109.784z"/>
<path style="fill:currentColor" d="m434.76 16 58.76 101.776-58.76 101.784H317.24l-58.768-101.776L317.24 16h117.52M444 0H308l-68 117.784 68 117.776h136l68-117.776L444 0z"/>
<path style="fill:currentColor" d="m312.616 504.008-63.384-109.784 63.384-109.784h126.768l63.376 109.784-63.376 109.784z"/>
<path style="fill:currentColor" d="m434.76 292.44 58.76 101.776L434.76 496H317.24l-58.768-101.776 58.76-101.776 117.528-.008m9.24-15.992H308l-68 117.776L308 512h136l68-117.776-68-117.776z"/>
</svg>

Set the tiddler type to ‘image/svg+xml’
Save it

Then in another tiddler transclude myImage text like:


<div style="color: red;">
<$transclude $tiddler="one" $field="text"/>
</div>

The color does not work! How $transclude works here? If I copy paste the svg insyead of using <$transclude $tiddler="one" $field="text"/> color works (svg will be filled with red color).

#2

Remove the type.

image
image921×850 56.8 KB

#3

If you set the type to image/svg+xml The image is rendered as an base64 encoded image. So CSS rules do not work anymore.

grafik
grafik1413×886 69 KB

If you transcluded it as a tiddler, it will be rendered as browser inline SVG. So CSS rules can be applied.

1 Like
#4

Thank you both!
I understood, transclude generates a base64 image from a tiddler with type= ‘image/svg+xml’

#5

That’s news to me. The mime type is saying XML with the application “SVG”.

I just read @pmario’s response. Makes perfect sense.

#6

It may be interesting to know that, below script works.

<div style="color: red;">
<$let thisSvg={{one}}><<thisSvg>></$let>
</div>