[Macro] datauri macro and svg images

[Mohammad]

I tried to use an svg as background. I realized I cannot use core svg images. One reason may be the tiddler type or perhaps the removed xlmns.

See below example at 

<style> .jack { background: url(<$macrocall $name="datauri" title="Motovun Jack.jpg" $output="text/plain"/>); height: 300px; } </style> <div class="jack"/> 

Now if I replcae  Motovun Jack.jpg with $:/core/images/close-button as below

<style> .jack { background: url(<$macrocall $name="datauri" title="Motovun Jack.jpg" $output="text/plain"/>); height: 300px; } </style> <div class="jack"/>  

It does not work! 

What is the reason?

--Mohammad

[Joshua Fontany]

Interesting... I wonder if this is true for all SVGs or just the core. The core image tiddlers are not actually "type:image/svg+xml", they do not have a type value, and are interpreted as wiki-text when transcluded.

Best,
Joshua F

[Jeremy Ruston]

Hi Mohammad, Joshua

This is the old chestnut of the confusing fact that there are two distinct types of SVG images, and they behave differently, and are defined differently. The core images are actually SVG elements designed to be transcluded directly into HTML documents; that’s what enables us to recolour these images with CSS. Full SVG images are XML documents with an embedded SVG element containing the image. They are displayed with the img tag, or as here, via CSS properties. It is not possible to use an SVG fragment as an image is the crucial thing.

We try to explain it in the docs here:

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

Best wishes

Jeremy

-- 
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+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4236b4d1-5bdc-4e9f-b418-5717ced3c4edn%40googlegroups.com.

[Sylvain Naudin]

Hi,

This is exactly the thread I wanted to search for yesterday when Google broke down ^^'

I wanted to add a setting to my SVG logo used as $:/favicon.ico

Unless I made a mistake, I have to fix it with the SVG document type, so I can't insert the macro <<color>> to reference the colour of my palette.

Would it still be possible to make this evolve in the future (and consider the favicon as a core image therefore and not an SVG XML image)?

(and play with fill="#fa4d60").

Sylvain

[Jeremy Ruston]

Hi Sylvain

Would it still be possible to make this evolve in the future (and consider the favicon as a core image therefore and not an SVG XML image)?

This isn’t a TiddlyWiki thing, this is how SVG is handled by browsers. The browser requires a full SVG image for the favicon. Remember that inline SVGs are actually HTML, and are not supported by favicons.

Best wishes

Jeremy

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d54b15c9-9e1c-410d-bb7b-2f122b3ce11en%40googlegroups.com.

[Sylvain Naudin]

OK,

It's frustrating because with TW's ability to modify itself, one could imagine just changing the colour of a fill element in the text field of the SVG tiddler ;)

I guess I can find a workaround by doing a macro to completely change the text field of my tiddler.

(Can $action-setfield be used to write the content of one tiddler from another? So I can manipulate the content of one with the macro color and have a button to apply the change to the favicon ?).

[Sylvain Naudin]

I still haven't found out if it's possible to do that, but the subtlety is that you would have to copy the final rendering and not the content of the text field because otherwise it goes back to the starting point ^^'.

[Mohammad]

@Jeremy

Many thanks for your clarification. 

@Sylvain

I understood both favicon and datauri need real svg image file. I am not sure if this is an efficient way or not but you can write your svg block like core image into another tiddler with correct type and xmlns part! But may be it does not make sense to create svg in this way.

My two cents.

-- Mohammad