|
|
Consider the image displayed in Figure 11.2.
Figure 11.2: An HTML page with a scaled image in an SVG document.
The SVG document in Listing 11.3 demonstrates how to render a scaled embedded image, and Listing 11.4 contains the HTML code that launches the SVG code in Listing 11.3.
Listing 11.3 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 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 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>
Listing 11.4 scaledImage1.html
<html> <head></head> <body BGCOLOR="#CCCCCC"> <embed width="500" height="400" src="/books/2/32/1/html/2/scaledImage1.svg" type="image/svg"> </body> </htmlL>
The SVG code in Listing 11.3 renders a picture of a house because of the SVG rectangle element in the following code fragment, which references an SVG filter element that explicitly references a GIF file on the file system:
<rect x="0" y="0" width="200" height="200" filter="url(#feImageFilter1)"/>
The HTML code in Listing 11.4 contains an HTML tag that launches the SVG document , as listed below:
<embed width="500" height="400" src="/books/2/32/1/html/2/scaledImage1.svg" type="image/svg">
Obviously you don't need SVG code for displaying images: you can bypass the SVG code and simply use the appropriate HTML tag; still, the functionality is available should you decide to make use of it.
|
|