On Wednesday, November 6, 2019 at 1:00:30 PM UTC-4, Michael Wiktowy wrote: > > > In doing some more poking and prodding, it looks like an external svg > image works fine ... the issue is with the datauri encoding that is going > on that it breaking the format and the browser is just ignoring it. I tried > the long-form macro call <$macrocall $name="datauri" title="Example SVG" > $output="text/plain"/> but no joy. > > I finally figured it out and thought that I would share the solution here ... it is a bit painful but works:
The DataURI macro is not suitable for directly converting SVG tiddlers so I had to use the website: https://websemantics.uk/tools/svg-to-background-image-conversion/ and save the resulting (including the quotes!) "data:image/svg+xml;charset=utf8,%3Csvg ..." into a tiddler named 'SVG Background DataURI'. I then could use the same trick as you use to transclude an SVG into a splash screen to transclude it into a stylesheet (admittedly ... I could have just cut and paste it directly into the stylesheet but it makes a big mess): background-image: url({{SVG Background DataURI||$:/core/templates/plain-text -tiddler}}); Unfortunately, background-images have no opacity property so rather than go an edit the original SVG and re-datauri-encode it, I had to use this hack: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity So the resulting CSS looks like this: .svg-foreground { position: relative; z-index: 1; } .svg-background { position: relative; overflow: hidden; } .svg-background:after { content: ' '; display: block; position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; opacity: 0.1; background-image: url({{SVG Background DataURI||$:/core/templates/plain- text-tiddler}}); background-repeat: no-repeat; background-position: center; } -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6d667aa1-ff9a-4620-bdb7-9ee5d2ae7c55%40googlegroups.com.
