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() method - 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>
@pmario you are a genius detective!
The issue report: https://github.com/Jermolene/TiddlyWiki5/issues/6753
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
World's Best SVG Compressor Try this it makes the file much smaller
TW has extra code to handle the XLINK namesspace but for XLINK:HREF it’s not needed anymore.
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
