Chapter 10. Embedding SVG in HTML or XHTML Pages
 | CONTENTS |  |
In this chapter:
- SVG and HTML
- Using the <embed> Element
- Adding Scroll Bars to SVG Web Pages
- Using the <object> Element
- Displaying Alternative Text or Images
SVG and HTML
Many examples in this book have shown SVG images in isolation, with the images simply displayed on their own in a Web browser that has the Adobe SVG Viewer, in a dedicated SVG viewer such as Batik, or in a multi-namespace XML browser such as X-Smiles. In day-to-day use of SVG, one of the things you are likely to want to do routinely with an SVG image is to embed it in an HTML or XHTML Web page. In the first part of this chapter, you look at how that basic task is carried out.
Displaying an SVG image might seem to be a straightforward task, but if you are aiming to achieve cross-browser display, you need to consider several factors, as the following discussion explains.
In practice, you might well have multiple SVG images within one HTML or XHTML page, but the techniques discussed here can be applied many times in a single page, assuming that you use HTML or XHTML tables or CSS correctly for Web page positioning.
As you might know, the HTML <embed> tag was originally developed as a proprietary tag and is deprecated by the W3C. However, as you will see from the following discussion, the <embed> tag provides better cross-browser functionality for this purpose than the more "politically correct" <object> element. So, this chapter first looks at how to use the <embed> tag to embed a single SVG image.
Using the <embed> Element
Embedding an SVG image in an XHTML page using the <embed> element is a straightforward process. You use the <embed> tag with the src, type, width, and height attributes specified correctly, and it all pretty much works "out of the box" at least with the browsers I tested: Internet Explorer 5.5, Netscape 4.7, Netscape 6, and Opera 5. The type attribute for an SVG image is image/svg+xml.
The following example embeds a simple SVG image that you used, in a slightly different version, to look at the nesting of <svg> elements. You see the purpose of using this particular image later in this chapter. You set it against a pale gray background so that you can easily see the boundaries of the SVG and the containing HTML or XHTML page.
Listing 10.1 (Embed01.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Embedding an SVG image using the <embed> element.</title> </head> <body bgcolor="#cccccc" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <h4>The image below is an embedded SVG image. The pale gray background is the XHTML page background color. The white area surrounded by a red outline is the SVG image.</h4> <p><embed src="NestedSVG.svg" width="500" height="400" type="image/svg+xml"></p> </body> </html>
When you try to display this HTML or XHTML page in Netscape 6, it is satisfactory and looks like the one shown in Figure 10.01.
Figure 10.01. Listing 10.1 viewed in Netscape 6.0.
In Internet Explorer 5.5, the appearance is similar and also satisfactory. Interestingly, a book I read recently about browser capabilities stated emphatically that no version of Internet Explorer supports the embed tag.
Figure 10.02 demonstrates that statement to be incorrect. Similarly, this syntax works in the Opera 5 browser most of the time, but occasionally, for no obvious reason, the Opera 5.02 browser doesn't display SVG correctly (see Figure 10.03). I don't know the reason.
Figure 10.02. Listing 10.1 viewed in Internet Explorer 5.5.
Figure 10.03. Listing 10.1 viewed in Opera 5.02.
When you use the <embed> element and remember to specify the src, type, width, and height attributes correctly, you can reliably (with the possible exception of the occasional glitch with Opera 5) expect to see your SVG image correctly displayed in Internet Explorer 5.x, Netscape 6, Netscape 4.7, and Opera 5.
But I wonder whether you noticed the content of the <body> tag of the HTML page:
<body bgcolor="#cccccc" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
The syntax is unorthodox. You can omit all the attributes, if you want, and the appearance doesn't change much the text moves just a little down and to the right as you can see in Figure 10.04, from Internet Explorer 5.5.
Figure 10.04. Listing 10.2 viewed in Internet Explorer 5.5.
Listing 10.2 (NestingSVG00.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Embedding an SVG image using the <embed> element.</title> </head> <body bgcolor="#cccccc" > <h4>The image below is an embedded SVG image. The pale gray background is the XHTML page background color. The white area surrounded by a red outline is the SVG image.</h4> <p><embed src="NestedSVG.svg" width="500" height="400" type="image/svg+xml"> </p> </body> </html>
For many, but not all, purposes, the following syntax is adequate :
<body bgcolor="#CCCCCC">
I discuss this issue of cross-browser positioning a little later in this chapter, after you move on to look at adding scroll bars to SVG Web pages.
Adding Scroll Bars to SVG Web Pages
One of the disappointments of the Adobe SVG Viewer, at least for me, has been the omission of scroll bars (still missing as of version 2.0) when SVG images are displayed on their own as Web pages (see Chapter 12, "Creating a Simple SVG Web Site"). That omission contrasts with the many successes of the Adobe viewer. However, overcoming the omission is simple: Use the HTML <embed> element to provide scroll bars for a large SVG image, as Listing 10.3 shows.
Listing 10.3 (ScrollBars01.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>An SVG Web Page which seems to have scroll bars!</title> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <embed src="NestedSVG.svg" width="1000" height="800" type="image/svg+xml"> </body> </html>
If the SVG image must completely fill the screen, as with SVG Web pages, make sure that you set the margins for the body of the HTML <body> element to zero. Then the SVG image completely fills the page. Because the page is in HTML, however, the benefit is that the Internet Explorer browser, as shown in Figure 10.05, automatically provides scroll bars for displaying the SVG image. Of course, if you want to pan or zoom the SVG image, assuming that the page designer has not turned those facilities off, you simply hold down the Alt key (on a Windows system) and the left mouse button and then move the mouse to pan the SVG image.
Figure 10.05. Listing 10.3 produces scroll bars for an SVG image, displayed in Internet Explorer 5.5.
You might assume that setting the <svg> image width and height to 100 percent, as shown in Listing 10.4, would achieve the same effect, but in fact it doesn't. The SVG image is resized to the browser window and therefore doesn't really need scroll bars, although Internet Explorer 5.5 provides a rudimentary vertical scroll bar.
Listing 10.4 (ScrollBars01b.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>An SVG Web Page which seems to have scroll bars!</title> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <embed src="NestedSVG.svg" width="100%" height="100%" type="image/svg+xml"> </body> </html>
As I said in the preceding section, in order to achieve zero borders in Internet Explorer 5.5, Netscape 4.7, Netscape 6, or Opera 5, you have to use several non W3C standard attributes on the <body> tag, like this:
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
I can report to you that this combination of attributes achieves zero margins on all four browsers. The leftmargin and topmargin attributes are proprietary Internet Explorer tags. Using those ensures that the left and top page margins in Internet Explorer are zero. The marginwidth and marginheight attributes belong to a <frame> tag, but seem to work correctly (at least they achieve what I want them to achieve) on the <body> element, too.
The "correct" (W3C-approved) way to obtain zero margins is to use Cascading Style Sheets, or CSS. However, I could not find a syntax that would work on all four browsers I tested hence, my use of an unorthodox combination of attributes that works for all four browsers.
Using the <object> Element
The <embed> element was deprecated by the W3C in HTML 4, although, as you've seen in earlier examples, the element still continues to perform its function, even if you have to resort to the use of slightly unorthodox syntax to achieve zero margins cross-browser. The element now preferred by W3C for displaying SVG and other objects on an HTML or XHTML Web page is the <object> element. However, its use is fraught with practical issues and difficulties.
First, Figure 10.06 shows what happens if you use the <object> element just as you used the <embed> element for the first example.
Figure 10.06. Using the <object> element in Internet Explorer causes the loss of a little of the SVG image.
In Figure 10.06, you can see that part of the SVG image is obscured. Now you see the benefit of images that make use of every pixel at the edge when testing it shows up edge problems like this one. In Internet Explorer 5.5, when an SVG image is displayed, a pseudo 3-D border is added that intrudes into the space for the SVG image. So, when your code has dimensions (as shown in the following code) that are exactly the same size as the SVG image, you cut off a little of the image.
Listing 10.5 (NestingSVG03.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Embedding an SVG image using the <object> element.</title> </head> <body bgcolor="#cccccc" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <h4>The image below is an embedded SVG image, contained in an HTML <object> element. The pale gray background is the HTML page background color. The white area surrounded by a red outline is the SVG image.</h4> <object data="NestedSVG.svg" width="500" height="400" type="image/svg+xml"> <img src="Non-existent.gif" alt="Unable to display SVG." /> </object> <h4>Notice that the <object> element imposes a border which cuts off part of the SVG image at the right and bottom.</h4> </body> </html>
However, if you slightly increase the width and height attributes on the <object> element, you can display the full image in Internet Explorer, as you can see in Figure 10.07.
Figure 10.07. Using the <object> element and increasing the width and height attributes allows all of the SVG image to be displayed.
NOTE
Variations seem to exist in how different "flavors" of Internet Explorer 5.5 display this code. Not all show the 3D border, as shown in Figure 10.07. The reasons for the differences are unclear.
The code is shown in Listing 10.6.
Listing 10.6 (NestingSVG04.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Embedding an SVG image using the <object> element.</title> </head> <body bgcolor="#cccccc" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <h4>The image below is an embedded SVG image, contained in an HTML <object> element. The pale gray background is the HTML page background color. The white area surrounded by a red outline is the SVG image.</h4> <object data="NestedSVG.svg" width="520" height="420" type="image/svg+xml"> <img src="Non-existent.gif" alt="Unable to display SVG." /> </object> <h4>Notice that the <object> element imposes a border which cuts off part of the SVG image at the right and bottom.</h4> </body> </html>
In Internet Explorer (as Figure 10.07 might suggest to you), if you don't make the width and height attributes adequate, part of the SVG image is cut off. This behavior is unlike the display of GIF images, for example. If the width and height attributes are too small to display GIFs, Internet Explorer adds scroll bars, although it doesn't add them for SVG images.
Be careful not to omit the width and height attributes on the <object> tag if you want your SVG image to be displayed in Internet Explorer. If you do omit them, you will produce the appearance shown in Figure 10.08 (the SVG image is not displayed). This behavior is the same as when the width and height attributes are omitted in GIF images.
Figure 10.08. If you omit the width and height attributes on an <object> tag, you produce this appearance (see Listing 10.7 for the code).
Listing 10.7 (NestingSVG05.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Embedding an SVG image using the <object> element.</title> </head> <body bgcolor="#cccccc" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <h4>The image below is an embedded SVG image, contained in an HTML <object> element. The pale gray background is the HTML page background color. The white area surrounded by a red outline is the SVG image.</h4> <object data="NestedSVG.svg" type="image/svg+xml"> <img src="Non-existent.gif" alt="Unable to display SVG." /> </object> </body> </html>
What happens if you use the <object> element and attempt to view your SVG image using the Netscape 6 or Opera 5 browsers? The answer is that the appearance is similar to what is shown in Figure 10.08. In other words, the SVG image is not displayed, although an appropriately sized rectangular space is reserved for its display. (However, it is displayed correctly in Netscape 4.7.)
If you want to disregard users of Netscape 6.0 and Opera 5.0 as visitors to your Web site, you can afford to use the <object> tag to display SVG. However, to provide the correct display in Internet Explorer 5.5, you need to be sure to add a few pixels to the width and height attributes if you want to avoid slightly cropping the right and bottom edges of your SVG image.
NOTE
Netscape 6.01 seems to display the <object> element, but has other problems displaying SVG. For viewing SVG, Netscape 6.0 has been significantly more stable. Opera 5.1 seems to display the <object> element, but with a white border.
In practice, although the <object> element is the "correct" way to embed SVG images, using the <embed> element even though it is deprecated by W3C is the only practical way to display SVG images in a way that is compatible with the four major browsers mentioned earlier in this section.
Displaying Alternative Text or Images
So far in this chapter, I have discussed the embedding of SVG images in HTML and XHTML Web pages as though every visitor to your Web site has SVG viewing capability. But, of course, at least for a while, they might not. Adobe has an agreement with Real.com to distribute the Adobe SVG Viewer with RealPlayer (recent versions of which use SMIL) and to include the SVG Viewer with Adobe Acrobat and other products. Adobe aims, by these and other means, to have distributed 45 million copies of the SVG viewer by December 2001 and a total of 110 million by April 2002.
Within a few months of the publication of this book, many visitors to your Web site are likely, therefore, to have the Adobe viewer installed. However, for visitors to your site who do not have the viewer, or who choose not to install it, you need to provide alternative information including information about how to download and install an SVG viewer.
Alternatives using the <embed> tag
As far as I can find out, you cannot display a message from within an <embed> tag that transmits a text message, such as to indicate that an SVG viewer needs to be downloaded.
A sensible strategy, then, if you choose to use the <embed> tag, is to place at some suitable place on the home page (or any other likely entry point to your Web site) a text message indicating the need for an SVG viewer and include a link so that site visitors can download a suitable SVG viewer, such as the Adobe viewer.
Alternatives using the <object> tag
With the <object> tag, you have two display options: Display a bitmap image, such as a GIF, or, if that image is not displayed, display alternative text using the alt attribute on the <img> tag, as shown in the following sample code:
Listing 10.8 (ObjectAlt01.html)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Embedding an SVG image using the <object> element.</title> </head> <body bgcolor="#cccccc" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <h4>The image below is an embedded SVG image, contained in an HTML <object> element. The pale gray background is the HTML page background color. The white area surrounded by a red outline is the SVG image.</h4> <object data="NestedSVG.svg" width="500" height="400" type="image/svg+xml"> <img src="GetSVGViewer.gif" alt="Unable to display SVG. Please visit http://www.Adobe.com/svg/ to download an SVG viewer." /> </object> <h4>Notice that the <object> element imposes a border which cuts off part of the SVG image at the right and bottom.</h4> </body> </html>
In Internet Explorer 5.5, if the alternative GIF image is not displayed, a text message advises the site visitor of the need to have an SVG viewer and gives a URL where a viewer can be downloaded.
As in so many other situations with variations in browser behavior, you have to make a choice about which of the available not totally satisfactory choices best meets your needs.
Alternatives in XML and SMIL
The X-Smiles browser, as mentioned in Chapter 1, "The Basic SVG Tool Set," is a useful test bed for exploring the use of SVG images in or with a variety of XML application languages, including SMIL, XSL-FO, and XForms.
I suggest that you check the X-Smiles Web site, http://www.x-smiles.org, for the latest information because the SMIL, XSL-FO, and XForms specifications are all under ongoing development and X-Smiles support changes almost weekly. X-Smiles provides useful sample files for download to allow you to see working syntax.
The SMIL 2.0 specification is at http://www.w3.org/TR/smil20. The XSL-FO specification, at http://www.w3.org/TR/xsl/, is referred to there as "XSL". The XForms specification is at http://www.w3.org/TR/xforms/.
As you look forward, SVG is likely to be used in many ways. It might be embedded in HTML or XHTMl, as I showed you earlier in this chapter. It undoubtedly will be used frequently with the emerging XML application languages, such as SMIL, XSL-FO, and XForms. The Mozilla browser has a project in an early stage to provide support for inline support of SVG. Similarly, the Amaya browser has limited, but growing, support for inline SVG. However, in the near term, you will need to display SVG embedded in HTML or XHTML.
| CONTENTS | |
EAN: 2147483647
Pages: 26