SVG in Confluence?

[Guenter Huber]

All I see is outdated. (around 2006)

We have a requirement to display SVGs.

Any insights?

Thx
G.

[Guenter Huber · Accepted solution]

<sarcasm>
So I finally found parameter metatag descriptions on the templates page (Do I really need to know templates first? Normally not. Here: yes!)
The description is not great, but somehow you find out that you need to CONCATENATE param and the parameter name...

Found out that I don t need to build a plugin. In the beginning the distinction between plugin and macro is hard to find.
</sarcasm>

OK, here is a first version that works with 4.x, because there are metadata for parameters (with meaningful names) now.
AFAI saw scaling (SVG s actual strength) doesn t work (yet). Height and width crop. Needa check this out.

Most browsers support SVG natively now, so SVGs showed on Firefox 16, IE 9 and Chrome 23.

## @param SVGattachmentName:type=string|required=true
## @param SVGwidth:type=int
## @param SVGheight:type=int
#if($paramSVGwidth)
#set($width=$paramSVGwidth)
#else
#set($width=640)
#end
#if($paramSVGheight)
#set($height=$paramSVGheight)
#else
#set($height=480)
#end
<embed class="SVG" name="SVG" width="$width" height="$height" 
src="${config.getDomainName()}/download/attachments/${content.getIdAsString()}/${paramSVGattachmentName}">

[Akash p]

Nothing has worked so far, so maybe we have abandoned the idea of using SVG. If you're on WordPress you can add SVG to WordPress by this method.

[Andreas Purde]

I know that this discussion is quite old however I ran into a similar problem recently. I was able to see SVGs in Confluence pages but none of the links in the SVG worked.

Therefore I wrote a small plugin which closes that gap. In case your are interested: https://marketplace.atlassian.com/plugins/de.edrup.confluence.plugins.svg-out

[AndreasS]

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

   !<Bildname>

   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)

[Adolfo Casari]

Do you know how to enable pan and zoom of the SVG image?

[AndreasS]

1. You can use the zoom functionality with your browser and the SVG automatically resizes. Did you mean that? (tried with Firefox and Chrome)
2. I am sorry but I don't know what you mean with pan (maybe panaroma)?

[Adolfo Casari]

The image is displayed in confluence (with !image.svg) , but zoom and panning don't work (panning means move the image in the canvas with the cursor). I am using Chrome, installed an extension that allows zooming and panning, other svg works correctly but the one in confluence not.

If I drag and drop image.svg from the disk on Chrome then zooming and panning works OK.

If I add the image as an attachemnt and click the link , it downloads the the svg.

What do you mean with the zoom functionality of your browser? CTRL+/- ? This resizes the whole page.

[AndreasS]

Hi Adolfo,

OK, now I got what you mean but I have unfortunately no solution for it!

You can use Chrome developer tools to compare the html produced by Confluence (not working) and a working SVG by clicking right mouse button on the image and use "inspect".

I meant CTRL+/- to resize the whole page which is not what you want ...

[Adolfo Casari]

Thanks. I found the problem:

Confluence set the attribute Content-Disposition:attachment to the HTTP response for the request for the svg file. It should be Content-Disposition:inline or simply not have that attribute.

(Content-Type= image/svg+xml)

Any idea how to fix this?

[AndreasS]

sorry, I don't have an idea, currently ...

[Gavin Johnson]

SVG should not be a mystery. Anyone looking into the history of W3C will see that they accomplished three great things: HTML, CSS and SVG. Looking at the RFC for SVG the standard talks (admirably) about the need for a computer graphics system that enables low-budget computer users to participate in the Internet. 

I cannot understand why any organisation would want to make it difficult to embed an SVG in a WEB PAGE. What is the problem? All the code for rendering SVG is already out-there. Every Browser SUPPORTS IT ALREADY. What is the problem? If you want ANYONE to use your software then do ONE THING. Start by supporting the standards that gave YOUR ORGANISATION the platform (YES THE INTERNET) to even exist. WHAT IS THE PROBLEM? Do you think that support non-resizable rasterised images will help you make money? WHAT IS YOUR PROBLEM with supporting SVG the default de factor format for rendering graphical non-photographic imagery since DAY ONE. Are you actually even listening?

[shanz]

've just achieved this by saving the visio diagram as a web page based upon svg (publish - advanced). That creates a <filename>_svg_1.svg file which I attach to confluence and then embed into the same confluence page using the iframe macro. Job done.

You also need to tick the Details (shape data) tick box to get the hyperlinked imagemap functionality created in visio.

[JohnA]

Hi G,

I believe the only way to embed Scalable Vector Graphics in Confluence is to use a User Macro as this fucntionality isn't available in the default Confluence install. There is a User Macro listed in this document, although I suspect you would need to update it to make it compatible with newer versions of Confluence: https://confluence.atlassian.com/display/DISC/SVG+Image+User+Macro

You might find the following document useful if you are intending to upgrade user macros to from 3.x to 4.x compatibility: https://developer.atlassian.com/display/CONFDEV/Upgrading+and+Migrating+an+Existing+Confluence+Macro+to+4.0

However, can I suggest that if you do upgrade the SVG macro that you then make it available to the community to save the next person who needs it from also having to go through the process of upgrading the macro again.

All the best,
John

[Guenter Huber]

Thanks, but do you really suggest that I set up a Java dev environment, wade through the SDK,... when I can t even find docs on User Macro parameters here?