Referencing an SVG image in CSS content property

[Hubert]

I'm having a problem showing an SVG image using the CSS content property. The SVG image is a separate tiddler type image/svg+xml and the CSS style is in a separate tiddler type text/css and tagged $:/tags/Stylesheet.

Has anyone been successful displaying an image in this way? I'd be grateful if you could show me what's wrong with my syntax:

content: url("[[delete.svg]]");

Thank you!

Best regards,

Hubert

[c pa]

Try using the full URL: And then tell us if it works.

file:///C:/Users/yourname/tiddlywikilocations/yourfile.html#Pie%20Chart

[c pa]

OK sorry that doesn't work.

[Mark S.]

There's a way to do this if you convert your svg into data (like using https://www.mobilefish.com/services/base64/base64.php). But maybe that's too much of a compromise?

-- Mark

[Jeremy Ruston]

Hi Hubert

Try the following in a new tiddler tagged $:/tags/Stylesheet on tw.com:

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock

html body.tc-body {

background: url("<<datauri "Tiddler Fishes.svg">>") center center;

}

Best wishes

Jeremy

[Hubert]

Thank you Jeremy! I wasn't aware a solution this neat and concise existed.

background: url("<<datauri "Tiddler Fishes.svg">>") center center;

The above code works well and perfectly fits my use case.

Thank you again.

Best regards,

Hubert

[Magnus]

I can't get this to work. I have this in my stylesheet:

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock

/* First Caracter */

html body.tc-body h1:nth-child(1) {

    background: url("<<datauri "$:/core/images/file">>") top left no-repeat;

    padding-left: 50px;

}

...and the H1 is moved correct but no image

[Mark S.]

The $:/core/images/file needs to have some namespace stuff after <svg... I just pasted in the namespace from the fishes (xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" ). And it needs to have the type, which is unset by default, set to images/xml+svg .

I don't know if these changes will "spoil" $:/core/images/file for some other use, so it might be safer to clone the tiddler, make the changes to the clone, and then use the clone.

As an aside, I just discovered that tw.com is a real web site, and has nothing to do with TiddlyWiki.

-- Mark

[Mohammad]

Mark,

 Read this thread! The answer is here. https://groups.google.com/d/msg/tiddlywiki/fxhVN0DCBDc/kHUofNd-AQAJ

-Mohammad

[Mark S.]

That doesn't explain anything about using datauri with CSS. I had to add in the namespace in order to get the CSS/macro to work properly. I suppose CSS is pickier about official requirements.

-- Mark

[Mohammad]

Yes,

 I mean it explains the last question! why svg in core/images do not have type!

Mohammad

[Magnus]

That does work! I thought I hade tried every thinkable variation but this is one I missed :D

[Jeremy Ruston]

Hi Mark

On 15 Nov 2018, at 04:16, 'Mark S.' via TiddlyWiki <tiddl...@googlegroups.com> wrote:

That doesn't explain anything about using datauri with CSS. I had to add in the namespace in order to get the CSS/macro to work properly. I suppose CSS is pickier about official requirements.

The datauri technique works by using the “type” field of the target tiddler as part of the data: URI that it builds. Images like $:/core/images/file are actually SVG elements designed for use in wikitext, not full-blown SVG images. The distinction is covered in the docs but perhaps could be clarified:

https://tiddlywiki.com/#Using%20SVG

Best wishes

Jeremy