Protecting SVG Code | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Embedding SVG in HTML Pages

Consider the SVG rectangle displayed in Figure 11.1.

click to expand
Figure 11.1: An SVG document to display an SVG rectangle.

The SVG document in Listing 11.1 contains the SVG code for rendering a rectangle, and Listing 11.2 contains the HTML code that launches the SVG code.

Listing 11.1 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>

Listing 11.2 displayRect1.html

<html>   <head></head>   <body BGCOLOR="#CCCCCC">     <embed width="500" height="400"            src="/books/2/32/1/html/2/displayRect1.svg" type="image/svg">   </body> </html>

Remarks

The SVG code in Listing 11.1 renders a red rectangle with a blue border because of the following code fragment:

<rect x="10" cy="10"       width="60" height="100"       style="stroke:blue;stroke-width:4;fill:red;"/>

The HTML code in Listing 11.2 is very straightforward. Below is the HTML tag required for launching the SVG document :

<embed width="500" height="400"        src="/books/2/32/1/html/2/displayRect1.svg" type="image/svg">

Now you can embed SVG documents in your HTML pages with a minimum of effort!