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; } } }

Include an SVG image on a Confluence page.

brad_abstcj

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?

Accepted answers

All comments

Peter Van de Voorde

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

You don't want conversion for this use.

Bob Swift

This is a reference: How to display SVG attachments in Confluence

brad_abstcj

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

AndreasS

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

Add the line

image/svg+xml svg svgz

to the file

/opt/confluence/webapps/ROOT/WEB-INF/classes/mime.types

Restart Confluence
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).

Dobroslawa Wierzbicka

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.

Andreas Purde

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.

Der Watz

this issue is still there.

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

I can' t believe ...

Tomas Girardi

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

Matthias Viranyi

Yeah, this is ridiculous ...

Matthias Viranyi

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 ..

Charles Reitzel

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

Eliot Cole

may now ...

dellagustin

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.

unknown

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_gjq59b

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

Stephan Hradek

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

Sylvain Bernard

does not work for me in Confluence Cloud :<

iwan-aucamp

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