SVG Macro (Radeox)
Last modified by Vincent Massol on 2016/06/05 21:51
Displays SVG content as PNG images.
Note: Uses the internal SVG Plugin (bundled by default) to render the image.
Usage
{svg[:alternate text[|height[|width]]]}
svg content
{svg}
svg content
{svg}
Parameters definition
| Name | Optional | Allowed values | Default value | Description |
|---|---|---|---|---|
| text | true | any text | The alternate text for the image, in case of a rendering error. | |
| height | true | a strictly positive integer number | 400 | The height of the generated image. |
| width | true | a strictly positive integer number | 400 | The width of the generated image. |
Content
The content must be a valid SVG image. It can be retrieved from an attachment using Velocity, as in:
{svg}${doc.getAttachment('image.svg').getContentAsString()}{svg}
Example
{svg:The XWiki logo|100}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-57 -57 324 114" width="162" height="57" style="overflow: hidden">
<style type="text/css">
* {
fill: none;
stroke: #999;
stroke-width: 7.5px;
stroke-linecap: round;
stroke-linejoin: round;
}
.X {
stroke-width: 13px;
}
.wiki {
stroke-width: 3px;
}
</style>
<defs>
<g id="dash" transform="translate(20 -20)">
<path d="M 3 -3 L 14 -14"/>
</g>
</defs>
<use xlink:href="#dash" transform="rotate(-45)" class="north"/>
<use xlink:href="#dash" transform="rotate(45)" class="east"/>
<use xlink:href="#dash" transform="rotate(135)" class="south"/>
<use xlink:href="#dash" transform="rotate(-135)" class="west"/>
<line class="X" x1="-35" y1="-40" x2="35" y2="40"/>
<line class="X" x1="-35" y1="40" x2="35" y2="-40"/>
<path class="wiki" transform="translate(59 -41.5) scale(3.19)" d="M 0 0 L 5 26 14 0 23 26 28 0 M 33.5 0 V 26 M 40 0 V 26 M 55 0 L 42 13 55 26 M 60.5 0 V 26"/>
</svg>{svg}
viewBox="-57 -57 324 114" width="162" height="57" style="overflow: hidden">
<style type="text/css">
* {
fill: none;
stroke: #999;
stroke-width: 7.5px;
stroke-linecap: round;
stroke-linejoin: round;
}
.X {
stroke-width: 13px;
}
.wiki {
stroke-width: 3px;
}
</style>
<defs>
<g id="dash" transform="translate(20 -20)">
<path d="M 3 -3 L 14 -14"/>
</g>
</defs>
<use xlink:href="#dash" transform="rotate(-45)" class="north"/>
<use xlink:href="#dash" transform="rotate(45)" class="east"/>
<use xlink:href="#dash" transform="rotate(135)" class="south"/>
<use xlink:href="#dash" transform="rotate(-135)" class="west"/>
<line class="X" x1="-35" y1="-40" x2="35" y2="40"/>
<line class="X" x1="-35" y1="40" x2="35" y2="-40"/>
<path class="wiki" transform="translate(59 -41.5) scale(3.19)" d="M 0 0 L 5 26 14 0 23 26 28 0 M 33.5 0 V 26 M 40 0 V 26 M 55 0 L 42 13 55 26 M 60.5 0 V 26"/>
</svg>{svg}
