SVG afbeelding
Bovenstaande afbeelding is een SVG (Scalable Vector Graphics) afbeelding. Zie de tutorial van de W3schools
De afbeelding is gemaakt met inkscape. De afbeelding is eigelijk een vector afbeelding om deze in je browser zichtbaar te maken moet de browser SVG ondersteunen. Het bijzondere van deze afbeeldingen is dat ze bij uitvergroten niet vervagen. De achtergrond van de afbeelding is doorzichtig. Natuurlijk is de afbeelding niet responsive.
Je kan bijv in GIMP een SVG bestand boven een png of jpg bestand projecteren. Je kan een svg bestand na bewerking in GIMP niet als SVG bestand opslaan.
SVG wordt in de joomla JCE editor niet ondersteund. De code van onderstaande afbeelding zit in de anycode module van Hyde-Design
Je kan onderstaande code copieeren naar een bestand met svg als extensie waarna je het verder kan bewerken in Inkscape.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="640"
height="480"
id="svg4700"
version="1.1"
inkscape:version="0.91 r13725"
viewBox="0 0 640 480"
sodipodi:docname="tekening.svg">
<defs
id="defs4702">
<linearGradient
inkscape:collect="always"
id="linearGradient4158">
<stop
style="stop-color:#0000ff;stop-opacity:0.09659091"
offset="0"
id="stop4160" />
<stop
id="stop4166"
offset="0.49857393"
style="stop-color:#0000ff;stop-opacity:0.54545456" />
<stop
style="stop-color:#0000ff;stop-opacity:1"
offset="1"
id="stop4162" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4150">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4152" />
<stop
style="stop-color:#00ffff;stop-opacity:1"
offset="1"
id="stop4154" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient5298">
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="0"
id="stop5300" />
<stop
id="stop5330"
offset="0.33549103"
style="stop-color:#b1b1b1;stop-opacity:1" />
<stop
id="stop5328"
offset="0.7744596"
style="stop-color:#515151;stop-opacity:1" />
<stop
style="stop-color:#000000;stop-opacity:1"
offset="1"
id="stop5302" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5298"
id="radialGradient5304"
cx="312.36914"
cy="192.67482"
fx="312.36914"
fy="192.67482"
r="174.65586"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.89635969,-0.51751351,0.51751351,0.89635969,-67.337771,181.62413)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4150"
id="linearGradient4156"
x1="168.39082"
y1="241.15524"
x2="482.74258"
y2="239.3298"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4158"
id="radialGradient4164"
cx="394.22256"
cy="-114.96382"
fx="394.22256"
fy="-114.96382"
r="116.08284"
gradientTransform="matrix(1,0,0,1.0117939,0,1.4481)"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.095627"
inkscape:cx="-26.138453"
inkscape:cy="288.49925"
inkscape:current-layer="layer1"
inkscape:document-units="px"
showgrid="false"
inkscape:object-nodes="true"
inkscape:window-width="1579"
inkscape:window-height="781"
inkscape:window-x="224"
inkscape:window-y="103"
inkscape:window-maximized="0" />
<metadata
id="metadata4705">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer">
<ellipse
style="opacity:1;fill:url(#radialGradient4164);fill-opacity:1;stroke:#f31515;stroke-width:0.79999965;stroke-miterlimit:3.5999999;stroke-dasharray:0.8000003, 1.60000016999999994;stroke-dashoffset:0;stroke-opacity:0.05617981"
id="path5288"
cx="377.54593"
cy="-122.78426"
rx="115.68284"
ry="117.0519"
transform="matrix(0.5579485,0.82987558,-0.82987558,0.5579485,0,0)" />
<path
style="opacity:1;fill:url(#linearGradient4156);fill-opacity:1;stroke:#f31515;stroke-width:0.80000001;stroke-miterlimit:3.5999999;stroke-dasharray:0.80000002, 1.60000004000000007;stroke-dashoffset:0;stroke-opacity:0.05617981"
d="m 465.42947,160.59578 -80.21443,-55.99759 -70.54787,-5.452203 -11.10606,28.949803 a 116.1704,116.1704 0 0 0 -56.0088,19.28474 116.1704,116.1704 0 0 0 -26.62416,24.95364 l -28.06174,-2.1855 -49.96324,33.73759 56.48776,13.30011 a 95.901521,44.073179 17.729993 0 1 59.11312,7.13392 95.901521,44.073179 17.729993 0 1 77.47171,47.66501 95.901521,44.073179 17.729993 0 1 6.28356,22.67606 95.901521,44.073179 17.729993 0 1 -100.16843,16.80194 95.901521,44.073179 17.729993 0 1 -25.45962,-9.31041 l -6.28798,-2.88004 -51.01212,27.74233 74.79986,50.2545 63.73212,2.25625 8.36325,-19.8428 a 116.1704,116.1704 0 0 0 70.95957,-19.48944 116.1704,116.1704 0 0 0 21.64821,-19.09463 l 8.78712,20.40684 74.21646,-57.8315 -56.4899,-13.2963 a 95.901521,44.073179 17.729993 0 1 -59.09904,-7.13398 95.901521,44.073179 17.729993 0 1 -83.75527,-70.34107 95.901521,44.073179 17.729993 0 1 100.16843,-16.80194 95.901521,44.073179 17.729993 0 1 31.74774,12.22565 l 51.01975,-27.73098 z"
id="path5256"
inkscape:connector-curvature="0" />
<path
style="opacity:1;fill:url(#radialGradient5304);fill-opacity:1;stroke:#f31515;stroke-width:0.80000001;stroke-miterlimit:3.5999999;stroke-dasharray:0.80000001, 1.60000002;stroke-dashoffset:0;stroke-opacity:0.05617981"
d="M 456.97982,146.56131 A 174.25533,174.25533 0 0 0 215.14334,99.176428 174.25533,174.25533 0 0 0 142.90317,203.88626 a 143.85206,66.109665 17.729993 0 1 88.66778,10.69982 143.85206,66.109665 17.729993 0 1 116.20948,71.49858 143.85206,66.109665 17.729993 0 1 9.42372,34.01518 143.85206,66.109665 17.729993 0 1 -150.25184,25.20237 143.85206,66.109665 17.729993 0 1 -47.62114,-18.28703 174.25533,174.25533 0 0 0 8.42729,13.99773 174.25533,174.25533 0 0 0 241.83648,47.38488 174.25533,174.25533 0 0 0 72.24282,-104.72339 143.85206,66.109665 17.729993 0 1 -88.64936,-10.70042 143.85206,66.109665 17.729993 0 1 -125.6332,-105.51377 143.85206,66.109665 17.729993 0 1 150.25184,-25.20236 143.85206,66.109665 17.729993 0 1 47.62243,18.33793 174.25533,174.25533 0 0 0 -8.44965,-14.03447 z"
id="path5248"
inkscape:connector-curvature="0" />
</g>
</svg>