"Recent" problem with SVG in confluence?

[Chris]

Recently, SVG images don't work in my Confluence pages.  I noticed it this week while creating a new set of pages.

I don't know when this quit working, but I have a lot of pages with SVG images that I created in the past, and they're all still OK.

The problem appears to be creating the preview.

[I'm generating SVG from LucidChart, saving locally, then adding to the Confluence page.]

When the image is added, the "preview" graphic spins "forever".  If I try to publish the page while the preview icon is spinning, then the Publish button spins "forever".

I can hit reload on the browser.  That returns me to edit mode, and there's now a static gray image icon where the SVG should be:

When I publish the page, I get the same icon (or an orange one...) instead of the inline SVG image.

If I click the icon to display the image, I get this:

Finally, if I download, I can see the SVG image in the browser.

Is anybody else experiencing this?  Any advice?

Thanks, and best regards,

Chris

[Hana Kučerová · Accepted solution]

Hi @Chris ,

my wild guess is the Lucidchart added "something new" to the SVG, which is not supported by Confluence right now.

If you try to create a new page with some old SVG image from Lucidchart, does it work?

I would try to ask Lucidchart support, if they've made some changes to the export functionality recently and if so ask Atlassian to support it.

[Chris]

Hello Hana,

That was worth trying, but doesn't appear to be the answer. 

I downloaded an SVG image from an older Confluence page where it's working.  After renaming the file and adding it to a new page, same problem.

Unless there's some reason to think that the SVG was altered by downloading it and re-uploading it, it appears that the SVG preview (or something else) isn't working.

When I get some time, I can try some alternate SVG sources.

Best regards,

Chris

P.S.  I'm viewing these pages in Ubuntu (2 different versions, 2 different browsers).  I can try to view the pages in Windows...

[Hana Kučerová]

Hi @Chris ,

thank you for trying! I don't think the change of OS would make any difference, it really looks like some bug to me now, but I wasn't able to find anything related in JAC.

I was able to upload some random SVG file, but maybe yours are somehow special.

I've marked the question for Atlassian team, as I'm out of ideas what else can be done. Thank you.

[Chris]

Thanks Hana,

I do have a small (12KB) SVG file from LucidChart that I can share, but I don't see a way to attach a file here...

I'll post the XML text of the SVG file for now:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:lucid="lucid" width="740"
height="375"><g transform="translate(-100 -125)" lucid:page-tab-id="0_0"><path d="M0 0h1870.87v1322.83H0z"
fill="#fff"/><path d="M120 246c0-3.3 2.7-6 6-6h148c3.3 0 6 2.7 6 6v108c0 3.3-2.7 6-6 6H126c-3.3 0-6-2.7-6-6z"
stroke="#5e5e5e" stroke-width="3" fill="#fff"/><use xlink:href="#a" transform="matrix(1,0,0,1,132,252)
translate(27.907407407407412 53.77777777777778)"/><path d="M420 246c0-3.3 2.7-6 6-6h148c3.3 0 6 2.7 6 6v108c0 3.3-2.7
6-6 6H426c-3.3 0-6-2.7-6-6z" stroke="#5e5e5e" stroke-width="3" fill="#fff"/><use xlink:href="#a"
transform="matrix(1,0,0,1,432,252) translate(27.907407407407412 53.77777777777778)"/><path d="M660 366c0-3.3 2.7-6
6-6h148c3.3 0 6 2.7 6 6v108c0 3.3-2.7 6-6 6H666c-3.3 0-6-2.7-6-6z" stroke="#5e5e5e" stroke-width="3" fill="#fff"/><use
xlink:href="#a" transform="matrix(1,0,0,1,672,372) translate(27.907407407407412 53.77777777777778)"/><path d="M282.5
300H400" stroke="#5e5e5e" stroke-width="2" fill="none"/><path d="M282.53 301h-1.03v-2h1.03z" fill="#5e5e5e"/><path
d="M415.26 300L401 304.64v-9.28z" stroke="#5e5e5e" stroke-width="2" fill="#5e5e5e"/><path d="M582.5 300H614c3.3 0 6 2.7
6 6v108c0 3.3 2.7 6 6 6h14" stroke="#5e5e5e" stroke-width="2" fill="none"/><path d="M582.53 301h-1.03v-2h1.03z"
fill="#5e5e5e"/><path d="M655.26 420L641 424.64v-9.28z" stroke="#5e5e5e" stroke-width="2" fill="#5e5e5e"/><path d="M160
151c0-3.3 2.7-6 6-6h488c3.3 0 6 2.7 6 6v78c0 3.3-2.7 6-6 6H166c-3.3 0-6-2.7-6-6z" stroke="#000" stroke-opacity="0"
stroke-width="3" fill="#fff" fill-opacity="0"/><use xlink:href="#b" transform="matrix(1,0,0,1,165,150)
translate(53.20987654320987 45.27777777777778)"/><use xlink:href="#c" transform="matrix(1,0,0,1,165,150)
translate(134.5679012345679 45.27777777777778)"/><use xlink:href="#d" transform="matrix(1,0,0,1,165,150)
translate(187.6543209876543 45.27777777777778)"/><use xlink:href="#e" transform="matrix(1,0,0,1,165,150)
translate(299.9382716049382 45.27777777777778)"/><use xlink:href="#f" transform="matrix(1,0,0,1,165,150)
translate(329.5679012345679 45.27777777777778)"/><path d="M240 400h240v60H240z" fill="none"/><g><use xlink:href="#g"
transform="matrix(1,0,0,1,245,405) translate(66.5 28.6)"/><use xlink:href="#h" transform="matrix(1,0,0,1,245,405)
translate(103.5 28.6)"/><use xlink:href="#i" transform="matrix(1,0,0,1,245,405) translate(123.5 28.6)"/></g><defs><path
fill="#333" d="M30-248c87 1 191-15 191 75 0 78-77 80-158 76V0H30v-248zm33 125c57 0 124 11 124-50 0-59-68-47-124-48v98"
id="j"/><path fill="#333" d="M114-163C36-179 61-72 57 0H25l-1-190h30c1 12-1 29 2 39 6-27 23-49 58-41v29" id="k"/><path
fill="#333" d="M100-194c62-1 85 37 85 99 1 63-27 99-86 99S16-35 15-95c0-66 28-99 85-99zM99-20c44 1 53-31 53-75
0-43-8-75-51-75s-53 32-53 75 10 74 51 75" id="l"/><path fill="#333" d="M96-169c-40 0-48 33-48 73s9 75 48 75c24 0 41-14
43-38l32 2c-6 37-31 61-74 61-59 0-76-41-82-99-10-93 101-131 147-64 4 7 5 14 7 22l-32 3c-4-21-16-35-41-35" id="m"/><path
fill="#333" d="M100-194c63 0 86 42 84 106H49c0 40 14 67 53 68 26 1 43-12 49-29l28 8c-11 28-37 45-77 45C44 4 14-33
15-96c1-61 26-98 85-98zm52 81c6-60-76-77-97-28-3 7-6 17-6 28h103" id="n"/><path fill="#333" d="M135-143c-3-34-86-38-87
0 15 53 115 12 119 90S17 21 10-45l28-5c4 36 97 45 98 0-10-56-113-15-118-90-4-57 82-63 122-42 12 7 21 19 24 35"
id="o"/><g id="a"><use transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#j"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,14.814814814814813,0)" xlink:href="#k"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,22.160493827160494,0)" xlink:href="#l"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,34.50617283950617,0)" xlink:href="#m"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,45.61728395061728,0)" xlink:href="#n"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,57.962962962962955,0)" xlink:href="#o"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,69.07407407407406,0)" xlink:href="#o"/></g><path
fill="#333" d="M185-189c-5-48-123-54-124 2 14 75 158 14 163 119 3 78-121 87-175 55-17-10-28-26-33-46l33-7c5 56 141 63
141-1 0-78-155-14-162-118-5-82 145-84 179-34 5 7 8 16 11 25" id="p"/><path fill="#333" d="M141-36C126-15 110 5 73 4 37
3 15-17 15-53c-1-64 63-63 125-63 3-35-9-54-41-54-24 1-41 7-42 31l-33-3c5-37 33-52 76-52 45 0 72 20 72 64v82c-1 20 7 32
28 27v20c-31 9-61-2-59-35zM48-53c0 20 12 33 32 33 41-3 63-29 60-74-43 2-92-5-92 41" id="q"/><path fill="#333"
d="M210-169c-67 3-38 105-44 169h-31v-121c0-29-5-50-35-48C34-165 62-65 56 0H25l-1-190h30c1 10-1 24 2 32 10-44 99-50 107
0 11-21 27-35 58-36 85-2 47 119 55 194h-31v-121c0-29-5-49-35-48" id="r"/><path fill="#333" d="M115-194c55 1 70 41 70
98S169 2 115 4C84 4 66-9 55-30l1 105H24l-1-265h31l2 30c10-21 28-34 59-34zm-8 174c40 0 45-34 45-75s-6-73-45-74c-42 0-51
32-51 76 0 43 10 73 51 73" id="s"/><path fill="#333" d="M24 0v-261h32V0H24" id="t"/><g id="b"><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#p"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,14.814814814814813,0)" xlink:href="#q"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,27.160493827160494,0)" xlink:href="#r"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,45.61728395061728,0)" xlink:href="#s"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,57.962962962962955,0)" xlink:href="#t"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,62.8395061728395,0)" xlink:href="#n"/></g><path
fill="#333" d="M137 0h-34L2-248h35l83 218 83-218h36" id="u"/><path fill="#333" d="M143 4C61 4 22-44 18-125c-5-107
100-154 193-111 17 8 29 25 37 43l-32 9c-13-25-37-40-76-40-61 0-88 39-88 99 0 61 29 100 91 101 35 0 62-11
79-27v-45h-74v-28h105v86C228-13 192 4 143 4" id="v"/><g id="c"><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#p"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,14.814814814814813,0)" xlink:href="#u"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,29.629629629629626,0)" xlink:href="#v"/></g><path
fill="#333" d="M177-190C167-65 218 103 67 71c-23-6-38-20-44-43l32-5c15 47 100 32 89-28v-30C133-14 115 1 83 1 29 1 15-40
15-95c0-56 16-97 71-98 29-1 48 16 59 35 1-10 0-23 2-32h30zM94-22c36 0 50-32 50-73 0-42-14-75-50-75-39 0-46 34-46 75s6
73 46 73" id="w"/><path fill="#333" d="M117-194c89-4 53 116 60 194h-32v-121c0-31-8-49-39-48C34-167 62-67 57
0H25l-1-190h30c1 10-1 24 2 32 11-22 29-35 61-36" id="x"/><path fill="#333" d="M59-47c-2 24 18 29 38 22v24C64 9 27 4
27-40v-127H5v-23h24l9-43h21v43h35v23H59v120" id="y"/><path fill="#333" d="M85-194c31 0 48 13 60 33l-1-100h32l1
261h-30c-2-10 0-23-3-31C134-8 116 4 85 4 32 4 16-35 15-94c0-66 23-100 70-100zm9 24c-40 0-46 34-46 75 0 40 6 74 45 74 42
0 51-32 51-76 0-42-9-74-50-73" id="z"/><g id="d"><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#w"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,12.345679012345679,0)" xlink:href="#n"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,24.691358024691358,0)" xlink:href="#x"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,37.03703703703704,0)" xlink:href="#n"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,49.382716049382715,0)" xlink:href="#k"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,56.72839506172839,0)" xlink:href="#q"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,69.07407407407408,0)" xlink:href="#y"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,75.24691358024691,0)" xlink:href="#n"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,87.5925925925926,0)" xlink:href="#z"/></g><path
fill="#333" d="M115-194c53 0 69 39 70 98 0 66-23 100-70 100C84 3 66-7 56-30L54 0H23l1-261h32v101c10-23 28-34 59-34zm-8
174c40 0 45-34 45-75 0-40-5-75-45-74-42 0-51 32-51 76 0 43 10 73 51 73" id="A"/><path fill="#333" d="M179-190L93 31C79
59 56 82 12 73V49c39 6 53-20 64-50L1-190h34L92-34l54-156h33" id="B"/><g id="e"><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#A"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,12.345679012345679,0)" xlink:href="#B"/></g><path
fill="#333" d="M30 0v-248h33v221h125V0H30" id="C"/><path fill="#333" d="M84 4C-5 8 30-112 23-190h32v120c0 31 7 50 39 49
72-2 45-101 50-169h31l1 190h-30c-1-10 1-25-2-33-11 22-28 36-60 37" id="D"/><path fill="#333"
d="M24-231v-30h32v30H24zM24 0v-190h32V0H24" id="E"/><path fill="#333" d="M212-179c-10-28-35-45-73-45-59 0-87 40-87 99 0
60 29 101 89 101 43 0 62-24 78-52l27 14C228-24 195 4 139 4 59 4 22-46 18-125c-6-104 99-153 187-111 19 9 31 26 39 46"
id="F"/><path fill="#333" d="M106-169C34-169 62-67 57 0H25v-261h32l-1 103c12-21 28-36 61-36 89 0 53 116 60
194h-32v-121c2-32-8-49-39-48" id="G"/><g id="f"><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#C"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,12.345679012345679,0)" xlink:href="#D"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,24.691358024691358,0)" xlink:href="#m"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,35.80246913580247,0)" xlink:href="#E"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,40.67901234567901,0)" xlink:href="#z"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,53.02469135802469,0)" xlink:href="#F"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,69.01234567901234,0)" xlink:href="#G"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,81.35802469135803,0)" xlink:href="#q"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,93.70370370370371,0)" xlink:href="#k"/><use
transform="matrix(0.06172839506172839,0,0,0.06172839506172839,101.0493827160494,0)" xlink:href="#y"/></g><path
d="M185-189c-5-48-123-54-124 2 14 75 158 14 163 119 3 78-121 87-175 55-17-10-28-26-33-46l33-7c5 56 141 63 141-1
0-78-155-14-162-118-5-82 145-84 179-34 5 7 8 16 11 25" id="H"/><path d="M100-194c63 0 86 42 84 106H49c0 40 14 67 53 68
26 1 43-12 49-29l28 8c-11 28-37 45-77 45C44 4 14-33 15-96c1-61 26-98 85-98zm52 81c6-60-76-77-97-28-3 7-6 17-6 28h103"
id="I"/><path d="M115-194c55 1 70 41 70 98S169 2 115 4C84 4 66-9 55-30l1 105H24l-1-265h31l2 30c10-21 28-34 59-34zm-8
174c40 0 45-34 45-75s-6-73-45-74c-42 0-51 32-51 76 0 43 10 73 51 73" id="J"/><g id="g"><use
transform="matrix(0.05,0,0,0.05,0,0)" xlink:href="#H"/><use transform="matrix(0.05,0,0,0.05,12,0)"
xlink:href="#I"/><use transform="matrix(0.05,0,0,0.05,22,0)" xlink:href="#J"/></g><path d="M99-251c64 0 84 50 84
122C183-37 130 33 47-8c-14-7-20-23-25-40l30-5c6 39 69 39 84 7 9-19 16-44 16-74-10 22-31 35-62 35-49 0-73-33-73-83 0-54
28-83 82-83zm-1 141c31-1 51-18 51-49 0-36-14-67-51-67-34 0-49 23-49 58 0 34 15 58 49 58" id="K"/><path d="M68-38c1 34 0
65-14 84H32c9-13 17-26 17-46H33v-38h35" id="L"/><g id="h"><use transform="matrix(0.05,0,0,0.05,0,0)"
xlink:href="#K"/><use transform="matrix(0.05,0,0,0.05,10,0)" xlink:href="#L"/></g><path d="M101-251c82-7 93 87 43
132L82-64C71-53 59-42 53-27h129V0H18c2-99 128-94 128-182 0-28-16-43-45-43s-46 15-49 41l-32-3c6-41 34-60 81-64"
id="M"/><path d="M101-251c68 0 85 55 85 127S166 4 100 4C33 4 14-52 14-124c0-73 17-127 87-127zm-1 229c47 0 54-49
54-102s-4-102-53-102c-51 0-55 48-55 102 0 53 5 102 54 102" id="N"/><path d="M27 0v-27h64v-190l-56
39v-29l58-41h29v221h61V0H27" id="O"/><g id="i"><use transform="matrix(0.05,0,0,0.05,0,0)" xlink:href="#M"/><use
transform="matrix(0.05,0,0,0.05,10,0)" xlink:href="#N"/><use transform="matrix(0.05,0,0,0.05,20,0)"
xlink:href="#M"/><use transform="matrix(0.05,0,0,0.05,30,0)" xlink:href="#O"/></g></defs></g></svg>

[Chris]

FYI:  that image is supposed to look like this:

[Hana Kučerová]

Hi @Chris ,

thank you! 

I can confirm SVG images are not working in cloud Confluence now.

When I tested it before, I simply googled "SVG sample" and download the first image. I didn't check it and today, after I've tried your file, I looked into it to see, that's actually PNG (even though it is named as SVG). Sorry about that.

So I tested more SVG images and I wasn't able to upload any of these.

I think it will be the best to create the support issue.

[Chris]

Thanks again Hana,

A support ticket has been created: JST-692066

Best regards,

Chris