SVG Out for Confluence Cloud

• SVG File: The filename of the SVG file to be rendered. The dropdown list allows you to select from all SVGs matching your search term.

• Width in percent of the original size (%), absolute width in px (px) or percent of the available width (%%) (examples: 100%, 300px, 80%%). Tips: you can only specify the width - the height is adopted accordingly. In case you specify %% the image will automatically scale to the given percentage of the available width - e.g. it will shrink when the browser window shrinks.

• Height in percent of the original size or absolute height in px (examples: 100%, 300px). Tip: you can only specify the height - the width is adopted accordingly.

• Horizontal orientation of the image (left, center, right).

• Border: check this to show a black border around the image

• Allow unsafe inline code and evaluations: in case this option is checked SVGs with unsafe inline code and evaluations are still allowed (in combination with the internal security scanner). In case you activate this option an admin might need to whitelist the SVG again.
  We only recommend to use this option in case you can’t clean your SVG from inline code.

• Left edge: value in % of the width where the piece you want to see starts

• Top edge: value in % of the height where the piece you want to see starts

• Right edge: value in % of the width where the piece you want to see ends

• Bottom edge: value in % of the height where the piece you want to see ends

The following picture should help to understand the crop values:

Open

Negative values for the left edge or the top edge and values above 100% for the right edge or bottom edge will result in a frame around the SVG in the background color.

• Pan and zoom active from start: when checked pan and zoom is already active when the user starts to watch a page. However when e.g. the mouse is in the region of SVG and the user uses the mouse wheel the image is zoomed rather than the page is scrolled. Therefore you can configure whether pan and zoom is active from the beginning. When not checked the user has to click inside the SVG (outside any link!) to activate pan and zoom or use a zoom button if present. As this is not a standard behavior you may need to provide instructional text in your Confluence page.

• Show zoom buttons: show zoom buttons (+, - and reset) under the image. The zoom buttons are only shown in case pan & zoom is enabled.

• Use mouse wheel: allow the user to use the mouse wheel for zooming.

• Maximum zoom level: the maximum zoom level the user can zoom in

• Minimum zoom level: the minimum zoom level the user can zoom out

• Include in export: when checked a PNG version of the SVG will be generated which is used for PDF/Word export

• Raster resolution: a relative value indicating how good (and how big) a SVG should be rasterized (converted to a PNG). Example: a SVG with a width of 200px an

• Highlight links permanently: when checked links in the SVG will be highlighted by a gray dotted line around them

• Highlight links on hover: when checked the element holding the link is highlighted when the mouse hovers over it

You can add links to SVG elements or replace existing links in the SVG. You can either link to Confluence content or external links.

Please follow the following steps to add or replace a link:

1. Add a new list entry by pressing the Add button.

2. Turn on the selection mode by clicking the  symbol.

3. Select the SVG element to which you want to attach the link to by clicking on the element. The "Element / Id link" field will show the type of the element (e.g. rect, path) followed by the Id of the element. In case you have multiple elements stacked on top of each other keep on clicking at the same position until you get the right type of element. In case you hit an existing link the "Element / Id link" will show existing link (the existing link might not be the first one to show - just keep on clicking).

4. Select the type of link from the drop-down list.

5. Add an additional anchor if you want. Tip: this can be very useful when you want to link to a specific heading in a Confluence page. More information can be found here.

6. Add a tool tip if you want - a tool tip is shown is shown when the mouse hovers over the link.

7. In case you want to add more links start again from 1. skipping 2. - in case you want to see the results (e.g. the tooltips) turn off the link selection mode by pressing the   symbol again.

Please consider the following when adding / replacing links:

• As indicated under point 3 you might need to click multiple times to get to the element you really want to attach the link to. Example: In case you do not want to select a single rectangle but the group which contains the rectangle you will see that the rectangle is selected first and when you click a second time the group is selected. You will see the text "Element Id / link" changing from id:rect-... to id:g-... where "g" indicates the SVG tag name for a group.

• In case you are having SVGs with embedded foreignObjects please ensure that you add the link to the foreignObject or switch element on top of it not any element in the foreignObject.

• The element selection mode is limited to the selection of a single element. It does not support the selection of multiple elements nor does it have a functionality to add groups etc. In case you have a rectangle (rect) which contains a text (text) which are not grouped in the SVG and you want to have to link on the rectangle and the text you have to add the link to rectangle and the text.

• In case your SVG elements don’t contain Ids they are added by the app dynamically. However the Ids might change e.g. under the following conditions which make added links unusable:

  • You add or remove elements from the SVG.

  • You are switching from the Internal Scanner to DOMPurify or vice versa.