Embedding SVG in HTML Pages

   



HTML Pages with Images Embedded in SVG

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

start example
<?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>
end example

Listing 11.4 scaledImage1.html

start example
<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>
end example

Remarks

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net