ow2 » Plugin SVG
SVG Plugin
The SVG
plugin lets you insert SVG code inside a node and display the graphics when the node is viewed.
To views SVG you need a SVG enabled browser or to install a plugin.
Browsers:
Gecko browsers (Mozilla Suite, Firefox) are not distributed with native SVG support yet, you've to download the code and recompile it.The native support is SVG 1.1
though the MoFo is still working on it.The nightly builds of Firefox 1.1
now have SVG enabled Internet Explore needs a plugin Opera 8 has SVG Tiny native support
Plugins: Adobe SVG plugin 3.0 http://www.adobe.com/svg/ Adobe SVG plugin 6.0 preview 1 http://www.adobe.com/svg/viewer/install/beta.htmlYou must use 6.0 preview for Gecko browsers (Mozilla Suite
, Firefox)
Use
[#svg id='svgid' width='width' height='height':#]...<your SVG code>...
[:svg#]
id - the id of your SVG code. width - the width of your SVG graphics height - the height of your SVG graphics
Example SVG 1.1
Insert this code into a node:
[#svg id='s0' width='150' height='60':]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">]>
<svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;"
width="150px" height="60px" viewBox="0 0 150 60"
overflow="visible" enable-background="new 0 0 150 60"
xml:space="preserve">
<defs>
<linearGradient id="back1">
<stop offset="20%" stop-color="#39f" />
<stop offset="90%" stop-color="#f3f" />
</linearGradient>
<linearGradient id="back2">
<stop offset="20%" stop-color="#4329af" />
<stop offset="90%" stop-color="#af33a0" />
</linearGradient>
<linearGradient id="ow2t">
<stop offset="20%" stop-color="#ffff00" />
<stop offset="50%" stop-color="#dfa760" />
<stop offset="90%" stop-color="#9090ff" />
</linearGradient>
<symbol id="ow2">
<text fill="url(#ow2t)">
<tspan x="0" y="0" font-family="Verdana" font-size="50" font-style="bold">O</tspan>
<tspan x="45" y="0" font-family="Verdana" font-size="45">W2</tspan>
</text>
</symbol>
<symbol id="ow2b1">
<rect x="0" y="0" width="150" height="60" fill="url(#back1)"/>
</symbol>
<symbol id="ow2b2">
<ellipse cx="75" cy="30" rx="72" ry="28"
style="stroke:#6B828F; stroke-width:0.5;" fill="url(#back2)"/>
</symbol>
</defs>
<text x="10" y="25" font-size="10">your browser doesn't</text>
<text x="10" y="45" font-size="10">support full SVG 1.1</text>
<use xlink:href="#ow2b1" x="0" y="0" />
<use xlink:href="#ow2b2" x="0" y="0" />
<use xlink:href="#ow2" x="15" y="45" />
</svg>
[:svg#]
[#svg id='s1' width='150' height='60':]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">]>
<svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" version="1.1" baseProfile="tiny"
width="150px" height="60px" viewBox="0 0 150 60"
overflow="visible" enable-background="new 0 0 150 60"
xml:space="preserve">
<linearGradient id="back1">
<stop offset="20%" stop-color="#39f" />
<stop offset="90%" stop-color="#f3f" />
</linearGradient>
<linearGradient id="back2">
<stop offset="20%" stop-color="#4329af" />
<stop offset="90%" stop-color="#af33a0" />
</linearGradient>
<rect x="0" y="0" width="150" height="60" fill="url(#back1)"/>
<ellipse cx="75" cy="30" rx="72" ry="28"
style="stroke:#6B828F; stroke-width:0.5;" fill="url(#back2)"/>
<text x="15" y="45" font-size="50" fill="#ffff00">OW2</text>
</svg>
[:svg#]
