nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Confluence does not retain/use uploaded SVG images

Ԍｕｙ

When inserting an SVG image into a Confluence page, the SVG preview and view in the editor look OK. However, on a subsequent *reload* of the page, the image comes out garbled. It seems like Confluence is replacing the SVG (crisp and small vector graphics) with a JPEG image (pixelated, compression artifacts in scaling, larger in size).

I suppose the image converter used does not know how to handle fonts correctly (in this case `font-family="sans-serif"`), and replaces text glyphs with boxes/squares (see image).

PS: The handling of Markdown syntax in Atlassian product sucks. It is highly inconsistent!

Accepted answers

All comments

Shannon S

Hello Guy,

I've had a look into this, and it appears you are running into the following bug:

CONFCLOUD-66798 Adding text to SVGs renders as rectangles on a second edit

I found an internal ticket linked to this one, and it looks like we've been able to replicate it on our end.

There appears to not be a workaround for this, as Atlassian Cloud does not fully support SVG at this time. There may be an SVG add-on that could help you with this, or I would recommend using another format until the issue is resolved.

I understand this is not ideal, and I am hoping we can see a resolution to this in the near future.

Regarding the handling of markdown syntax, would you be able to raise a separate question regarding this? It's possible to insert Markdown using a macro. If it's not working for you, we'll need some specifics about what Markdown you were using, and where. By sharing this as another question, we can go more in-depth about it.

Thank you, and take care!

Shannon

Aleksandr Krymskiy_on7zsk

I am having the same issue after uploading SVGs generated from Visio. Can you add some sort of flag/setting preventing the "mangling" of SVG? I want to be able to provide a resizable diagram for the viewer, and there is no alternative format that is able to do this. I am unclear about the "Atlassian Cloud does not fully support SVG" - it does not need to support it - it just needs to not mess with it as recent web browsers are able to display SVG natively.

I am not able to see linked CONFCLOUD-66798 - would be curious to see more detail about the bug.

Thanks,
Alex

Ԍｕｙ

So, it clearly looks like Atlassian needs/should do something about it. Either by disallowing the use of SVGs up front, or by just not messing with them (converting them to a pretty stupid format for usually line drawings (JPEG) in the first place). Can it be so difficult? It's done all over the place, and especially for Confluence this would be quite useful. Especially for a product one must pay so much money for every month, and that has long recorded issues.

I also think that add-ons are not the right solution for something that should actually work straight out of the box already. Especially as most add-ons require (A) additional subscription fees and (B) make the situation even more messy with even more unrelated (3rd party) domains resources are pulled from. What a nightmare from a security and privacy perspective, also causing additional issues with 3rd party T&Cs as well as jurisdictions (for those that may e.g. have to deal with GDPR and such).

Owen Wallis

Hi everyone,

Thanks for your patience with this.

I’m the PM on the Media team. The fact that SVGs render text as squares has not been great.

I’m please to say we’ve started rolling out an initial fix.

As some of you have noticed we are rendering SVGs as image files.

This is as some SVG files can contain script tags, so are vulnerable to XSS cross site scripting.

Our security team has helped us look into some libraries which parse the files and strip dangerous code. But unfortunately they don’t meet our standards, and would put your instances at risk. I appreciate its unlikely one of your team members would try and take advantage of this risk vector, but it’s just not something our security team are happy with.

So, we need to keep rendering SVGs as image files.

What we’ve therefore done is added font support for Arial, Times and Courier. So essentially a serif, sans serif and mono font which all fonts should fall back to.

I’m really sorry but this is a forwards only fix. So SVG files previously uploaded will not benefit from this fix.

I’d like to keep this ticket open as it may be there are some unicode characters we’ve missed out.

So do let me know if there are any other font sets which would be useful and we’ll do our best to incorporate them.

All the best

Owen

Ԍｕｙ

Thanks @Owen Wallis for the much appreciated input.

In that sense, it would be appreciated if the fonts used were not Arial, Times (New Roman) and Courier (New), but rather fonts maybe from the Noto [0] bundle (they have a much wider coverage of Unicode glyphs). The licence should be suitable for your purpose.

Additionally, if SVGs will have to be rendered as pixel images, I'd appreciate it if they were done so in PNG format (not the lossy JPEG format with compression artifacts), as that will be much more suitable for the use case (these are not family snap shots).

Thanks in advance,

Guy

[0] https://en.wikipedia.org/wiki/Noto_fonts
(licensed under the SIL Open Font License)

Owen Wallis

Great feedback thank you. We'll take a look at Noto.

Agreed that SVGs are not family snap shots! PNG is more suitable so we'll take a look into that too.

Thanks

Owen

Aleksandr Krymskiy_on7zsk

@Owen Wallis Thank you very much for the explanation. I have a question: if the issue with keeping SVG without converting them to a flat-image format are script tags, wouldn't it be just simpler - not accepting SVGs that contain script-tags, etc. or stripping them immediately from the SVG XML upon upload?

Thanks,
Alex

Félix Poulin

An option to use an open vectorial format (thus SVG) is a reasonable ask of a modern documentation system. I hope time can be invested to fix that.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

cloud