HTML macro in Confluence strips <title> element from inline SVG.

[Michael Jordan]

When adding an SVG image inline to a page in Confluence using the HTML macro, the macro strips any <title> element within the SVG. This is problematic for accessibility, because the title element is meant to provide a text alternative for the SVG image.

For example, when the following SVG image is added as code to the HTML macro:

<svg version="2.0" width="300" height="50">
 <title>Green rectangle</title>
 <desc>A light green rectangle with rounded corners and a dark green border.</desc>
 <rect width="100%" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

It will be rendered in the page as: 

<svg version="2.0" width="300" height="50">

 <desc>A light green rectangle with rounded corners and a dark green border.</desc>
 <rect width="100%" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

And the title element, "<title>Green rectangle</title>", is stripped.

[AnnWorley]

The title was not stripped on my test instance after I saved the macro and edited it was still there - what version of Confluence are you using so I can test on your version?

[Michael Jordan]

Atlassian Confluence 5.9.8 (node3: 3c2281ea)

For clarification, I notice that the title is still present in Preview and is only stripped on Save.

[AnnWorley]

I did "View Source" after saving and it was still there:

I will try on Confluence 5.9.8 and see what I get.

[Michael Jordan]

Indeed, when you View Source from the actions menu within Confluence, the title tag will be there, because you are looking at the content stored within Confluence. However, when the published content is rendered in the browser, if you use the browser's View Source, the title element will be missing.

[Michael Jordan]

Try this in the browser's javascript console: document.querySelectorAll('svg > title').length > 0;

This should be true if the title is there, but it is not so the statement returns false.

[AnnWorley]

You are right, the title tag gets stripped. While reading on the subject I found that a page can only have one title tag, which would be the Confluence page title, like:

<title>123 - Demonstration Space - Confluence</title>

I saw examples that suggested adding the title to the image as in this example:

<svg version="2.0" width="300" height="50" title="Green rectangle">
<desc>A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="100%" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

That one does not get stripped during rendering; please let me know if it is helpful.

[Michael Jordan]

The html title attribute is different than a title tag in that it should get mapped to the description/help text property in the Accessibility API; the SVGTitleElement should map to an accessible name property, while the SVGDescElement should map to the description/help text in the Accessibility API. 

Also, adding an html title attribute will add a tooltip on mouseover, which we may not want.

A better attribute for accessibility name would be aria-label or aria-labelledby refering to the child title element by id.

aria-label may be a workaround, but Confluence should not strip title element descendants of SVG, because they are in a different namespace: https://www.w3.org/TR/SVG2/struct.html#TitleElement versus https://www.w3.org/TR/html/document-metadata.html#elementdef-title

[Michael Jordan]

An SVGTitleElement is not the same as an HTMLTitleElement.

[Andreas Purde]

Dear Michael,

you may try embedding your SVG in an object tag. This typically solves all negative interactions between the parent HTML document and the SVG document.

Andreas

[Rama Krishna Anumola _Appfire_]

Hi @Andreas Purde 

Can you give an example for the following case how to embed in SVG object tag, assume that we have such svg tags in large number on the page?

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>I'm a circle</title> </circle> <rect x="11" y="1" width="8" height="8"> <title>I'm a square</title> </rect> </svg>

RK

[Andreas Purde]

Dear @Rama Krishna Anumola _Appfire_ ,

<object data='data&colon;image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxjaXJjbGUgY3g9IjUiIGN5PSI1IiByPSI0Ij4gPHRpdGxlPkknbSBhIGNpcmNsZTwvdGl0bGU+IDwvY2lyY2xlPiA8cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjgiIGhlaWdodD0iOCI+IDx0aXRsZT5JJ20gYSBzcXVhcmU8L3RpdGxlPiA8L3JlY3Q+IDwvc3ZnPg==' type="image/svg+xml"></object>

should do it. I know that data-urls won't work with all browsers. Therefore I recommend referring to a real file or an endpoint which delivers the SVG.

I hope that helps.

Andreas

[Rama Krishna Anumola _Appfire_]

Thank you @Andreas Purde  for the response. I see that title working now with this example.

But I am not clear why the svg tag is encode to base64 format? What if we have large number of such SVG tags in a page and can we used without base64 conversion and use as is?. Can you please help us in this regard? Let me know if anything is not clear.

Actual requirement for your reference: https://community.atlassian.com/t5/Confluence-questions/Anyone-having-issues-using-the-BobSwift-Confluence-HTML-Macro/qaq-p/1134206

Thanks

[Andreas Purde]

Dear Rama,

I don't have a solution for this case. The title is stripped once you embed the SVG directly regardless whether the svg is embedded in an object tag or not. You can only avoid this by hiding the title as I did by converting it to base64.

Kind regards

Andreas

[Rama Krishna Anumola _Appfire_]

Hi @Andreas Purde , Thank you so much for the response and clarity on how to use it.

[fox_pifseu]

Hi @Rama Krishna Anumola _Appfire_ I have the same issue and noticed that you can use the namespace prefix to trick Confluence to not strip the title. I.e. use <svg:title>...</svg:title>. However, tooltips still don't work. It works for isolated SVGs but not once they are included in Confluence.