Include an SVG image on a Confluence page.

brad November 20, 2013

I want to include an SVG image on a Confluence page but I'm not sure how to do it. Is it possible without having to convert it to raster? How do I do it?

8 answers

16 votes
Matthias Viranyi July 11, 2017

PUMP!

Can we please have thumbnails and directly embedded SVG graphics without the need to contact an admin to "restart" Confluence etc?!

I don't think this feature is "new" and "SVG" is as well not. So please Atlassian, move!

Otherwise Atlassian will become the Microsoft of SaaS counterpart ..

iwan-aucamp July 7, 2020

Don't besmirch Microsoft's "fine" name by comparing them to AtlassianAtlassian sets the standard for utter garbage software.

13 votes
Deleted user July 10, 2019

1) Attach .svg file to Confluence page
2) On the confluence page type '!' then select the attached SVG

3) It renders inline
4) Adjust the image size as needed (by default it is set to 0px)

Ad September 11, 2019

Works well without any special permission or server restart. You can even delete the svg attachment after its rendered.

Like # people like this
Stephan Hradek June 22, 2020

What does "On the confluence page type '!'" mean? When I edit the page and type '!' I get an '!'.

Like Martin Gregory likes this
Sylvain Bernard June 22, 2020

does not work for me in Confluence Cloud :<

Jose Luis Casarrubias January 19, 2021

Wooow! works fine for Confluence Server

mawi March 17, 2021

Cloud: This (attach svg, insert image tag) used to work fine. The new editor breaks this.

As we are forced to start to use the new editor, we are discovering this now. Pages that have not changed for a few years, now get the improved editor with graphics that become unreadable after conversion.

confluence-new-editor-svgimages-incorrect.png

(Gah. I am sooooooo frustrated with it, software quality and business in the 2020's is sucking worse than ever </grumpyoldfart-rant> )

Like # people like this
ALEX FERNANDES JUNCA April 9, 2021

Works for me! Thanks

13 votes
dellagustin February 6, 2019

Support for SVG is reported on the confluence issue tracker: https://jira.atlassian.com/browse/CONFSERVER-1762

Vote it up if you are also waiting for this issue.

4 votes
Bob Swift OSS (Bob Swift Atlassian Apps)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 20, 2013
brad November 20, 2013

Is it possible to do this for an OnDemand instance too?

Like AndreyKupreychik likes this
Dobroslawa Wierzbicka
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 6, 2014

This level of customization wouldn't be possible in an OnDemand instance, as per the Restricted Functions. The solution is only available for Confluence Server installations.

Tomas Girardi January 7, 2016

SVG should be supported in cloud instances... It's 2016!

Dan Rivett March 14, 2016

I also request this. Architectural diagrams created externally should be embeddable in Confluence pages - on the Cloud hosted Atlassian - using the SVG format. That would be really useful.

Like Deleted user likes this
Cedric Druck May 9, 2016

Woah ... that is pretty lame ... maybe we could also limit images to BMP files of at most 12x12px?

Like # people like this
2 votes
Der Watz November 15, 2015

this issue is still there.

Why is it not possible, to fix this problem after years?

I can' t believe ...

Matthias Viranyi July 11, 2017

Yeah, this is ridiculous ...

Charles Reitzel April 3, 2018

April, 2018 and counting ... !?!?

Eliot Cole May 31, 2018

may now ... ;)

Yuval Kalugny July 23, 2018

July... :|

Sebastian Poxhofer December 19, 2018

December -.-

Stephan Hradek June 22, 2020

July 2020

Justin Cook August 15, 2020

August 2020

Peter Vojtech February 23, 2021

February 2021

iwan-aucamp February 24, 2021

Why would Atlassian fix it if they can milk Confluence for all it is worth without fixing it?

Atlassian does not care about quality, they don't care about user experience, they know the people paying are not the people using it, so they don't care about the people using it.

Stefan Theisen June 11, 2021

June 2021 alike

2 votes
AndreasS March 21, 2014

As stated in the links above, you can patch Confluence to show an SVG by

  1. Add the line
    image/svg+xml svg svgz
    to the file
    /opt/confluence/webapps/ROOT/WEB-INF/classes/mime.types
  2. Restart Confluence
  3. attach the image using
    !&lt;Bildname&gt;

    in Confluence Editor

Unfortunately, to use the two smallest image size reduction buttons or setting a smaller size then 300px does not work with Confluence richtext editor because Confluence tries to create a thumnail on server side which is currently not supported for SVGs (and the Confluence server will return a empty, broken image).

The workaround is to use the free Confluence Source Editor, use button "<>" and set the size of teh SVG to whatever you want (which should be perfectly ok for vector graphics).

(see also https://answers.atlassian.com/questions/222794/serve-svg-inline-in-confluence)

0 votes
Andreas Purde
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 18, 2015

Just for completeness: You will be able to see SVG images performing the steps mentioned in the other comments on the page. However all links you may have in the SVG are not usable according to my experience. There are two ways to get this fixed:


1) Use the plugin svg-out

https://marketplace.atlassian.com/plugins/de.edrup.confluence.plugins.svg-out


2) Using Confluence native functions and a user macro

In case you want to use links and don't want to use the plugin mentioned here you can still to the following:

1) making a more or less empty user macro (unrendered)

## @noparams
 
$body

2) include that macro on a page

3) paste the the SVG in clear text from <svg> including </svg> into the macro body.

0 votes
Peter Van de Voorde
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
November 20, 2013

Hi Bradley,

Could this page help you out? https://bobswift.atlassian.net/wiki/display/CVP/How+to+install+SVG+conversion+support

Best regards,

Peter

Bob Swift OSS (Bob Swift Atlassian Apps)
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 20, 2013

You don't want conversion for this use.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events