XML/SVG/Embedding SVG
Embedding SVG in HTML Pages
<source lang="xml">
File: displayRect1.svg <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%">
<g transform="translate(50,50)"> <rect x="10" cy="10" width="60" height="100" style="stroke:blue;stroke-width:4;fill:red;"/> </g>
</svg>
File: displayRect1.html
<html>
<head></head> <body BGCOLOR="#CCCCCC"> <embed width="500" height="400" src="displayRect1.svg" type="image/svg"> </body>
</html>
</source>
HTML Pages with Images Embedded in SVG
<source lang="xml">
File: scaledImage1.svg <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%">
<defs> <filter id="feImageFilter1" filterUnits="objectBoundingBox" x="0" y="0" width="200" height="200"> <feImage xlink:href="simpleHouse1.gif" x="0" y="0" width="200" height="200" result="outputImage1"/> </filter> <filter id="feImageFilter2" filterUnits="objectBoundingBox" x="0" y="0" width="200" height="200"> <feImage xlink:href="simpleHouse1.gif" x="200" y="0" width="200" height="200" result="outputImage2"/> </filter> </defs>
<g transform="translate(50,50)">
<rect x="0" y="0" width="200" height="200" filter="url(#feImageFilter1)"/>
</g> <g transform="translate(250,50) scale(.5)">
<rect x="0" y="0" width="100" height="100" filter="url(#feImageFilter1)"/>
</g> </svg>
File: scaledImage1.html
<html>
<head></head> <body BGCOLOR="#CCCCCC"> <embed width="500" height="400" src="scaledImage1.svg" type="image/svg"> </body>
</htmlL>
</source>