When viewing the SVG in TW (that, is, the graphics), right click and choose Inspect. You will see the DOM contains an
<img src="data:...tag.
Right.
TBH, the explanation at https://tiddlywiki.com/#Using%20SVG covers the basics and why “img” versions of SVGs can’t be styled by external directives (sandboxed).
Personally I use most always inline SVG directly for easiest management.
A comment
T T
Yes, my problem is when using inline SVG, some text nodes are not displayed. I think it is because TW strips the xmlns attributes. I couldn’t find a way to disable it from doing so.
If I get time i’ll look into it. No promises.
It is true that SVG in TW can be slightly confusing. Mainly because it can work with it several ways.
My GUESS is that it is not the lack of an xmnls directive causing the issue you are having. But it would be good to say what actually it is. Later.
TT
I do want to footnote that with a simple observation.
SVG orientated apps often add stuff to SVGs that THEY need, but that a browser doesn’t.
They assume the browser will ignore it.
Just a comment
TT
In your example removing “switch” and “/switch” (plain SVG) you do get text.
It may not be a full solution, but definitely a clue …
You get the imperfect …
But that can be adjusted.
Note. The Content Type here should be “text/vnd.tiddlywiki”, because it is used inline.
Best, TT
Thanks for looking into it! As mentioned, if I take the same SVG and load it directly in chrome (with or without wrapping it in html and body tags), the text is shown fine. So it seems to me this is not a Chrome issue. At first I suspected styling, but that doesn’t seem like it either.
If I take the SVG from the rendered dom (by ‘copy outerHTML’) then it doesn’t load in chrome with an error for the missing xmlns.
This may be an issue but we’ll have to have a closer look. I’m testing with FF and Edge
The TW renderer does respect the attributes when the DOM elements are created. See:
See line 50 and some lines in front of it, where this.namespace is defined and and in ln 68 where the namespace variable is used. …
The function used to create the element is: Document.createElementNS() - Web APIs | MDN … So if TW defines an SVG it always uses the desired namespace, if the attribute you mention is set or not.
Please see my previous messages here and here. The original SVG has xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" for <svg> and xmlns="http://www.w3.org/1999/xhtml" for <div> (in text and in the dom when loaded directly from file, no TW), but doesn’t have them (in the dom) when rendered by TW. That is, the tiddler text has them, but when I inspect the DOM of the rendered tiddler they are not there.
I just tried this:
So this is nothing to do with styling of browser support but simply the fact that TW mangles the tiddler text when rendering as SVG.
Is there a way for me to create a content type or something like that where TW will just take the text as is and use it as innerHTML of the surrounding div?
Of course I think this is what TW should do with SVG tiddlers to begin with, but don’t want to wait for it. In my view, only if a user uses [img[tiddler]] to include a tiddler should the text be converted to a data blob and optimally there should be a [svg[tiddler]] to include svg elements (with the ability to specify class and dimensions that transcluding doesn’t allow). SVG elements seem to be more aligned with “wiki” (being just text and not binary data), so I wish TW would have better support for them.
I think I found the problem. It’s not from the outer SVG namespace, because as I wrote that namespace is set in the right way, when the element is created using the javascript createElementNS() function.
It seems the foreignObject first div element, which switches back to xmlns="http://www.w3.org/1999/xhtml" isn’t recognised in the right way.
As shown in the GitHub code, TW sets this namespace with the BODY element. So I did test the following code, which contains an additional body element in the foreignObject element, TW switches to the HTML namespace and the SVG works.
So this seems to be the issue / bug. I’ll create a new issue at GitHub.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" viewBox="-0.5 -0.5 121 61">
<defs/>
<g>
<rect x="0" y="0" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<body>
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 1px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Tiddlywiki</div>
</div>
</div></body>
</foreignObject>
<text x="60" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Tiddlywiki</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text>
</a>
</switch>
</svg>
Javascript may create the element, but in dev tools it is not shown. Here are two screen shots. In the first, the SVG is loaded from a file, no TW. In the second, it is the result of the same text, when rendered by TW. As you can see, all xmlns attributes are missing. As mentioned, if I take the second dom, edit as HTML and paste the original context, then the xmlns attributes remain and the SVG is rendered correctly
In particular, the SVG element has mlns:xlink="http://www.w3.org/1999/xlink" attribute that is removed and I think is important if the SVG has links
Yes, because if you edit the DOM directly with the dev-tools and change the HTML code, the browser dev tools do the rendering.
As I wrote – TW uses JS functions the set the namespace according to the elements eg: SVG, BODY and MATH … As written in the GH issue, there is bug at the moment and there is a pending pull request, which should fix the problem.
The missing attributes are inconvenient, but they are not the problem. There may be a future PR to fix that too but more testing will be needed.
As mentioned, even if I load the file from disk the attributes show up. I mentioned using dev tools because that uses dom manipulation.
Does this attribute bug happen when you leave the type blank or set it to text/vnd.tiddlywiki, and then transclude the SVG tiddler into another one open in the story river via {{svgTiddler}}?
The underlaying issue in tiddlywiki has been solved with PR https://github.com/Jermolene/TiddlyWiki5/pull/6755
