SVG attributes namespaces are not applied inside components

[CobraCalle]

I want to inline an image in a svg and provide the image as data url. When the data url is generated through blazor the image will not be loaded

Steps to reproduce the behavior:

<svg width="100%" height="100%" viewBox="0 0 480 360" color="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<svg >
				<image xlink:href="@("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH2AQPDQ0laSi7LQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAALdSURBVHjabVPvS1NRGH7OvfPeuU03M9TEAsmVKIz+gBA0w4SKzWmyRSkk7IPf9U8JKvowwiACi74GQj9QcPghlXKacxk2U8Fwbvfuxz09VzYx6LDDOTvnfZ73ed73XBWVcRMYagcWrgLbG8AK/jNCwEgHkOgCvn87GzMAjEacTuv91JR85PHIIWCMx+Is+D4QiWma9bqvT8Z0XY4CD+1z1c58zuV6NTk9LXx1degOBLC5tBTsKBZTTPHFDiJbxKfrM7f7+4ViWbjU1IRfmUyo3bKS4gZwODU56W3ioXl0BKtYRCmfx2w8joxhjGtA4bymzQz29sI0TRSOj1FiTDGbxezGRkm9AmxuLi8Pd/v9ArwoM8BRKqHr8mXsJJNBl8MRDvX0QJTLkLkcLJILxixubSEr5cSJzzAlNjJLNByGJgREoQAHAbYie69wze/vw+BaoIoESXaA2HPgmWoTfGVF/eVyMr22Fu5ua4OTPh1Uo+7uQqTTUCjXVqWSdJEqdqWMPSWYUEutVnnFJmFR0qlUuNPng0qJGjPW1tRAdzhgUcnHw0NsW1bscQVs45SzrbL/KMyUW12FztWj66h3OuHRNNTYfZUStYDJraxiThXYrWoQYmaArWz2euEmyM3sbpLoqgqN60XGZfL54DUg9bnS4hOCCH/1BPfV1qLR5YKTkll9HNG7Qt91bjcKVFTmWSvjf5pmMECSBZKoQeCeD3h5XdeFl1lqFOXEc57Feru3hxX69lMJeGaQrMj7ZnYqUygE+QTWxV16uqWqWgNl2l5t3wq9zhH427LGncBBqxDv7rS0oEiiYxbTnjnDwJtcrqR28iH9kTJ8wc7MWWQL51j9A4JZ7fg8s9BzYiufj7ZRhcl7gwSfqDALPFDXgGVKSR1IGWqitHkycz/OPser1WbB1gNSJn4YRrSFMR/4Eg+lHHsCvDht4TAQHeG7j5x8eP9+iZUhJoBBTpMzWj38C2dRTZc15mQUAAAAAElFTkSuQmCC")" width="16" height="16" />
			</svg>
</svg>

Expected behavior

As you can see: In this sample the dat url is provided through blazor (xlink:href="@("data:image/png;base64,")")... the image will not be shown… change is to xlink:href="data:image/png;base64,")... and it will work

[mkArtakMSFT]

Thanks for contacting us, @CobraCalle.
It's not clear what do you try to do. Why do you wrap that data in @?
We treat that BASE64 encoded content as C#. If you want it to be treated as text, you can at least define as text.
Anyway, it's not clear what you want to achieve here. Would be great to get more details.

[danroth27]

We think you're running into an encoding issue. We should try using MarkupString in this case.

[SteveSandersonMS]

I tracked this down. The issue is not to do with encoding. It's purely to do with how the JS-side code applies the attribute.

For normal DOM elements, you can always use setAttribute to assign the attribute value. But attributes on SVG elements are special, in that they can have a namespace too, such as with xlink:href. For this example to work, we would need to be assigning the attribute via:

element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attributeValueString);

To implement this,

• We should change BrowserRenderer.ts so that when it's about to call toDomElement.setAttribute, it checks if toDomElement has the SVG namespace. If so, then it should check whether the attribute name includes a namespace.
• I'm not yet sure how we should know what the fully-qualified namespace is. That is, how we transform xlink in this example to http://www.w3.org/1999/xlink. Perhaps there is a small set that we can hard-code, but it doesn't appear that we can derive that knowledge programmatically at runtime.

As a further alternative, we may note that the entire xlink namespace has been deprecated since SVG 2 and should no longer be used anyway. Browsers are free to drop support for it, and some may already have done. Developers should just use href instead of xlink:href.

Does anyone know of scenarios in SVG where it's still necessary to use setAttributeNS? We will most likely only implement something for this if there are known scenarios where it's needed, or if this becomes a much more commonly-requested item for some reason.

Moving to "backlog" so we can reconsider when/if we have more information.

[mkArtakMSFT]

Closing as we will be tackling this as part of #18271