Tiddler Background

[Michael Wiktowy]

Hello,

I am trying to make a particular tiddler show a background SVG image "watermark". The SVG image is also in the same tiddlywiki.

I searched through the GG archive and found some good information to get me to this point but I need some further help.

I have the following in my stylesheet tiddler:

[data-tiddler-title="Example Tiddler"] .tc-tiddler-body {
  border: 1px solid blue;
  background-image: url(<<datauri "Example SVG">>);
  background-repeat: no-repeat;
  background-position: center; 
  position: relative;
}

... and while I see a nice blue border around the body of "Example Tiddler", the background image is not visible, I can't quite figure out why the image is not showing up anywhere. There is no sign of it so I can't even see what might be obscuring it. I can set a background-color which works perfectly but not a background-image.

I am missing something critical here. Can some CSS-guru point me in the right direction?

Thanks

/Mike

[Michael Wiktowy]

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.

/Mike

 

[Sycom]

Hi,

Habe a look at this thread. I think the issue can be solved by tweaking

* Xlmns declaration
* Tiddler type attribute

Cheers

Sylvain
@sycom

[Michael Wiktowy]

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;
}

[Michael Wiktowy]

I read the discussion about that and I tried fiddling with those to no avail. I found a solution though.

Thanks,

/Mike

[Michael Wiktowy]

On Wednesday, November 6, 2019 at 2:14:24 PM UTC-4, Michael Wiktowy wrote:

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!)

Curses! I just realized that quotes are important. I could have used the built-in datauri macro ... I had just forgotten the "" around the macro:

  background-image: url("<<datauri "Example SVG">>");

It looks like too many quote marks but it works without all the external dataURI website conversion. The opacity step is still needed though.

Doh!

/Mike

[Sylvain Comte]

Ooops i forgot the thread link

https://groups.google.com/forum/m/#!topic/tiddlywiki/YznqeuiZyqQ

:-)

Cheers

Sylvain

@sycom

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/ph6RwByi7t0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1ef343fb-b3da-4b54-bc7f-39f068689273%40googlegroups.com.