Chapter 12. Creating a Simple SVG Web Site

CONTENTS

In this chapter:

•  Creating an Entire Web Page with SVG
•  Creating Web Pages with a "Graphics" Language
•  Who Might Use SVG As a Web Authoring Tool?
•  Creating SVG Web Pages
•  Some Sample Page Layouts

Creating an Entire Web Page with SVG

In this chapter, I introduce you to the concept of using SVG images as part of the graphics "furniture" of HTML or XHTML Web pages. I also want you to consider that SVG can be potentially a "single language" Web authoring package. In other words, you can create Web sites only with SVG, or primarily using SVG.

At first sight, it might seem odd superficially to use a graphics technology to create Web pages when such a significant part of the content of Web pages is text based. This chapter looks realistically at the practicalities of using SVG as a one-stop Web authoring technology.

In case you are skeptical that this can be done, take a look at Figure 12.01, where you can see that a Web page produced only in SVG can look pretty much like an HTML or XHTML Web page.

Figure 12.01. An early SVG-only home page at http://www. svgspider.com/default.svg.

Creating Web Pages with a "Graphics" Language

I have tried hard in the preceding 11 chapters not to let too much of my excite-ment about SVG show through but in a way, I hope that I have failed. In this chapter, I feel I should tell you more up front how excited I am about SVG as a possible one-stop, XML-based Web authoring solution.

You might be asking yourself whether I am crazy. Are you wondering whether I have forgotten that SVG is a graphics format?

The answer, of course, is that I haven't forgotten that SVG is called Scalable Vector Graphics. But, I also am fully aware (and if you have read earlier chapters, I hope that you too are aware) that SVG is a graphics format unlike anything you have ever seen. A couple of steps back in the history of SVG development, it was based on PostScript which is very much a page layout language. Furthermore, an SVG file remains editable at all times, unlike bitmap images and Flash .swf files.

I spend a significant part of this chapter discussing the pros and cons of SVG as a Web authoring technology. If you like to see and do, feel free to skip ahead to the section "Creating SVG Web Pages." In time, you need to think about the more general issues too, but first you might want to see how you can use SVG to produce Web pages.

Characteristics of an ideal Web authoring technology

Take a step backward, and list some characteristics you might like an "ideal" Web page authoring language to have. Then have a look at how SVG measures up to these desirable traits.

This list shows the characteristics for my version of an ideal modern Web authoring language:

• It is XML-based.

• It can be created statically or dynamically.

• It can lay out Web pages.

• It includes graphics capabilities.

• It can be styled using Cascading Style Sheets.

• It includes text layout facilities.

• It can be animated.

• It can be scripted.

• It can be combined with other XML-technologies, including XHTML and Xforms.

• It can (potentially) be used with streaming technologies, including multimedia.

• It can be used for high-quality printouts.

A few years ago, such a list of ideal qualities wouldn't have been on many people's list or on mine, that far back. But starting today, and looking forward rather than back, I see all those qualities as important. I don't claim that SVG scores 100 percent on each of those qualities, but I would claim that it does score high enough on many of these qualities to be seriously considered as a Web authoring technology, despite the fact that it has graphics in its name.

Now examine the relevance of each of these points, and consider whether and how well SVG scores.

It should be XML based

SVG is XML , by which I mean that SVG is an application language of XML. Why is that concept important? The practical reality is that the future of (much of) the Web will be based on XML. Particularly important from the point of view of the professional graphics designer is that the part of the Web that pays those salaries will be the part based on XML. If you are not already XML savvy, now is the time to begin that process. If you don't pay attention to XML, the Web will increasingly pass you by. Whether you like XML or hate it, you have little chance of escaping the need to use it, if you have clients using the Web commercially.

It can be created statically or dynamically

Web pages were, way back in the early 1990s, almost exclusively created statically: An HTML coder wrote each page by hand, and when the page needed to be updated, that person updated it by hand, too. As the demand for immediate information that is updated as events happen (for example, share prices) increased, it became important that Web pages could be created "on the fly" (dynamically using server-side technologies). That can be done to produce HTML or XHTML using a variety of technologies (Java servlets, JavaServer Pages [JSP], and others, for example).

Similarly, SVG can be created both statically and dynamically. As I indicated in earlier chapters, SVG can be created statically using a tool as simple as a text editor; for many graphic designers, however, the tool of choice for at least some tasks that produce SVG images are vector graphics drawing packages, such as Jasc WebDraw, Adobe Illustrator, or Corel Draw. After using a drawing package to produce an SVG image, those with sufficient understanding of SVG will tweak the generated code as necessary.

Additionally, SVG images and Web pages can be created dynamically using, for example, the Extensible Stylesheet Language Transformations (XSLT). Data is stored as plain XML, or in an XML-enabled database, but can be transformed by XSLT into SVG images or Web pages that are dynamically updated as the raw data (held as XML or in a relational database management system) is updated.

It can lay out Web pages

Clearly, any Web authoring technology must be able to lay out Web pages. Ideally, it should be able to lay them out with pixel precision.

SVG scores well in this area. Because it includes CSS2 absolute positioning, SVG elements whether they are text or graphics can be laid out "pixel perfect" onscreen. This concept is important when you are creating SVG for traditional graphics uses, but is also useful when you are laying out larger areas of SVG text, such as on a Web page.

In addition, the availability of nested <svg> elements allows you to create visual components or complete Web page layouts and to position them on the page with pixel precision.

If you are used to creating, as a designer, the look of a Web site or page in a bitmap graphics package, such as Photoshop, which is then coded into HTML or XHTML by an HTML coder, I hope that you can see the huge workflow advantage if the layout created by a graphic designer in Jasc WebDraw, Corel Draw, or Adobe Illustrator can be exported directly as SVG Web pages. The need for the HTML coder middleman disappears in some settings, and, assuming that the designer has a grasp on SVG, increased efficiency is possible.

SVG also allows more flexibility and ease of use in layout than does HTML or XHTML used without CSS. You don't need complicated nested tables to achieve a particular layout. You want a block placed? Just create an SVG visual component, nested perhaps within an <svg> element, and, making due allowance for the SVG painter's model, place it where you want it to appear.

It includes graphics capabilities

Any Web authoring technology needs to have graphics capabilities. If you have ever used text-only access to the Web, you realize the truth of that statement. Clearly, SVG, as a graphics technology, scores high in this area. The Web would have been a much more visually exciting place if HTML had had years ago a fraction of the graphics power that SVG has.

That both the text and graphics parts of SVG Web pages are in the same SVG document offers advantages. At the practical level, you need to master only one skill set to allow the authoring of both text and graphics. For the individual Web developer or graphic designer, the need to master essentially one skill set opens up new business opportunities. For the corporate employee, who is more likely to be a specialist, these issues might be less important.

The unity of text and graphics in SVG applies at a technical level, too. SVG text and graphics can be styled using the same CSS stylesheet, and both text and graphics in an SVG Web page can be scripted.

It can be styled using Cascading Style Sheets

As Web sites increase in size, the demands on a developer's time to maintain the site increase greatly. The use of Cascading Style Sheets (CSS) makes it possible to update the look and feel of a Web site by changing only one file an external CSS style sheet.

With SVG, you can also style text on an SVG Web page. However, the exciting additional benefit is that if the SVG graphics have been appropriately created, you can also update the look and feel of both the graphics and the text throughout a Web site by changing only one CSS style sheet. The potential efficiency benefits of maintaining and updating Web sites are enormous. The use of CSS with SVG is discussed in more detail in Chapter 13, "Designing SVG for Use with CSS."

It includes text-layout facilities

Any Web page authoring technology must be able to lay out text on the page. Although SVG can do this task, that is not one of its strongest points, at least with respect to one aspect where it scores less well than HTML or XHTML. When a browser window is resized in HTML, the flow of text alters to adjust to, for example, the new screen width. SVG-based text cannot, at least for now, do that. An SVG rendering engine cannot automatically insert line breaks or perform word wrapping. The width of the display of SVG using <text> and <tspan> elements is fixed and does not change if the browser window is resized.

The absence of automatic line breaks is undoubtedly a disadvantage. However, because more and more Web pages are increasingly likely to be generated dynamically, this lack is less of a practical handicap than it might first appear because line length can readily be calculated programmatically. In addition, after you become used to the connection between <text> and <tspan> elements, as demonstrated in Chapter 4, "Using Text in SVG," laying out text sensibly for chosen page sizes is a straightforward process. The more the <tspan> element is used within a single <text> element on a Web page, the easier and quicker the process becomes.

In addition, SVG has a <foreignObject> element that can, in principle, allow the import of HTML or XHTML into a designated area on an SVG Web page. Potentially, that element could allow a form of automatic word wrapping in HTML or XHTML modules nested within an SVG Web page. However, at the time this book was written, the Adobe SVG viewer had not yet implemented the <foreignObject> element, although the X-Smiles browser and the Amaya browser have implemented the <foreignObject> element to some degree. Hopefully, the developers of SVG viewers can make this useful facility fully available to the SVG community soon.

It can be animated

As you have seen in Chapter 8, "Animation: SVG and SMIL Animation," SVG has powerful animation facilities. The animation of SVG elements, whether text or more traditional graphics, might be produced without the need for learning scripting languages. I don't want to understate the power of scripting for certain uses, but SVG provides powerful animation facilities by means of its native declarative syntax.

It can be scripted

The Document Object Model (DOM) of an SVG Web page can be manipu-lated using, for example, ECMAScript (JavaScript). This situation opens up substantial possibilities in addition to those provided by the SVG declarative syntax, for interactivity under user control.

The Document Object Model provides an application programming interface (API) to give access to create, modify, or delete parts of an HTML or XML document. SVG has its own Document Object Model that allows programmatic control of parts of an SVG document. A discussion of the DOM is beyond the scope of this book, but if you want to explore that part of SVG, books covering that topic are sure to be available soon.

It can be combined with other XML technologies, including XHTML and XForms

The combining of SVG with XML-based technologies can be considered under two headings.

First, in a conventional Web browser with an SVG viewer plug-in, you can make use of the SVG <foreignObject> element so that HTML or XHTML can be embedded within an SVG document. After SVG viewers implement the <foreignObject> element, this provides one technique of mixing SVG with other XML technologies in such a way that all can be viewed within a conventional Web browser.

The second approach to combining SVG with other XML technologies is the availability of genuine XML-enabled browsers, such as the X-Smiles browser, which allows combinations of SVG with XSL-FO, XForms, or SMIL (Synchronized Multimedia Integration Language). The combination of SVG and XForms looks likely to provide a powerful combination for the creation of dynamic interactive Web pages.

These types of combinations allow SVG to perform a significant role in multilanguage, multimedia Web applications.

It can (potentially) be used in multimedia presentations

SVG, as an XML-based technology, is ideally suited to being used together with SMIL to therefore provide integrated access to a growing range of XML-based multimedia opportunities. A full consideration of the potential of SVG in multimedia is beyond the scope of this book, although some early examples are available at http://www.xsmiles.org/.

SVG can, in principle, also be mixed with XML-based speech technologies, such as VoiceXML. Exciting possibilities lie ahead with such combinations of technology.

It can be used for high-quality printouts

For an individual Web user, this characteristic might not be important; for corporations that have to provide documentation to many thousands of users, however, the ability to store data as XML and to present it graphically as SVG for all uses (on the Web, on mobile browsers, or on paper, for example) has significant potential advantages. Think of the time and money saved compared to having to create different graphics on paper and for Web display. Within that change are threats to some individuals' livelihood and new opportunities opened up to others.

Some individuals have little need to print graphics because their business is solely Web based. However, companies of significant size are likely to want to present information on paper as well as on the Web.

SVG has the advantage of being able to be accurately positioned on paper. Although you can use pixel sizes or absolute measures for layout onscreen, you can equally use centimeters or inches to define placement when you print. The page for presentation on paper might be different from the one shown onscreen, but you can easily adapt the XSLT, or other server-side technology, to produce alternative presentations for screen or paper media.

Who Might Use SVG As a Web Authoring Tool?

This section describes some advantages of using SVG Web pages for professional graphics designers and for amateurs interested in a simple technology for creating Web pages.

Graphics design professionals already do the design work for Web pages in many companies. But their work is limited to designing with implementation, by coding into HTML or XHTML, being carried out by others with specialized HTML knowledge. SVG can empower the graphics designer who understands the essentials of SVG.

Graphics packages such as the current versions of Corel Draw, Adobe Illustrator, and Jasc WebDraw can produce SVG-coded Web pages directly from the drawings made with the package. Those pages can be used as is for static Web pages, tweaked to add, for example, interactive or animated extras or used as templates for the creation of servlets or JavaServer Pages or other server-side technologies that produce SVG Web pages. New workflows are likely to open up, therefore, involving the interaction of SVG-savvy graphics designers with server-side programmers.

Of course, another possibility at least in the short term is to create SVG Web pages using vector graphics drawing tools to allow clients to see working SVG Web sites, including working links and rollovers, for example, as prototypes of a more traditional HTML or XHTML Web site. This situation could allow graphics designers to take a much more active stake in the development of the final working version of a site and free them from the occasional frustrations that occur when HTML coders don't reflect the designers' design ideas. When a prototype Web site can be created directly using Jasc WebDraw or Adobe Illustrator, interaction with the client can be direct and efficient to the potential benefit of both parties.

The fact that vector graphics packages already exist might discourage some graphics designers from getting their hands dirty with coding SVG by hand. But the availability of those same tools gives talented graphics designers potentially greater control and greater involvement in the creation of the Web pages they have designed. When you work in that way and also understand SVG well enough to be able to tweak the code whenever necessary or when you are adding visual components, you have a powerful, creative tool. Put it to good use!

Creating SVG Web Pages

To create an SVG Web page, you can work just as you have up to this point in the book an SVG Web page is simply another type of SVG image. If you have been working with a vector graphics package, such as CorelDRAW 10, simply open a new image with suitable dimensions and start laying out the page. Alternatively, you can choose one of the Web templates, intended presumably to be saved as HTML, although nothing stops you from saving it as SVG and tweaking any aspect of it to suit the visual display you intend. With CorelDRAW 10, you can also open HTML files and potentially save them again as SVG files to form templates for your SVG Web pages.

If you have been creating SVG by hand coding, simply create a simple template to use for all your pages, something like this:

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="800" height="580">  </svg> 

Then simply lay out the SVG Web page. It's just another SVG document or image.

Of course, you can also create more complex templates, if you have a need for or like particular Web page layouts.

Laying out SVG Web pages

In Chapter 2, "SVG Document Overview," I introduced you to the idea of nesting <svg> elements within the <svg> element that constitutes the SVG image or document or, in this case, Web page. When you are laying out pages, having at least some of the parts of the page nested within <svg> elements is helpful. If the nested <svg> element has a group of shapes or text, for example, contained within it, they all are positioned within that <svg> element. Moving the <svg> element preserves all the relative positioning of parts of a graphic, including the animations. Working this way can save lots of tedious tweaking of positioning attribute values. You create the relative positioning you want within the <svg> element. Then you leave it alone and move the group of elements by altering the x and y attributes of the <svg> element.

Laying out an SVG Web page has a couple of limiting factors that will hopefully soon be removed, partly by the further development of SVG viewers to more fully implement the SVG Recommendation.

The first limitation is that the Adobe and other SVG viewers, in their initial implementations, viewed scroll bars as unnecessary. The user community brought the omission to the attention of Adobe and was told that Adobe had "heard" the user community's views. Hopefully, by the time you read this book, the Adobe viewer will have translated that "hearing" into the implementation of scroll bars in the Adobe SVG Viewer. Without scroll bars being provided by SVG viewers, a visitor who sees a sizeable SVG image whether it is an SVG Web page or a map or technical diagram, for example is forced to make use of the SVG panning mechanism. Panning is useful for some purposes, but does not provide the control that scrolling in either a horizontal or vertical dimension does.

The second, hopefully temporary, limitation is the absence of functionality for the SVG <image> element to import or include other SVG documents. After that functionality is implemented, you can split your Web pages into components, with some similarities to frames, and just import the necessary page components into a full Web page. This process can make the creation and maintenance of SVG Web pages an easier proposition.

Now I show you how to lay out an SVG Web page using the technologies that are already available. I am assuming that you have already done the planning for the visual appearance and navigation of an SVG site and that you want to implement that plan.

First, you need to decide on the dimensions of the Web page you want to create. Because of the absence of scroll bars now, this decision is more important than for an HTML or XHTML Web page. For prototype sites, such as SVGSpider.com, I recommend using a page size of 800 x 600 pixels. That size means essentially that you are assuming that the vast majority of likely visitors have a monitor that can display 800 x 600 pixels or higher. Sales statistics for monitors indicate that the most common size now being sold is capable of displaying at least 1024 x 768 pixels; for now, at least, I feel that the page size should be based on the needs of someone using an 800 x 600 pixel display. Set the width attribute on the document element, <svg>, to 800 and the height attribute to 600. If you want to be sure that your entire Web page is displayed onscreen, you might want to reduce the page size to take into account the pixels lost by the interface of various Web browsers. I also include within the <svg> element namespace declarations, as shown in the following code skeleton:

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="800" height="600"      xmlns:xlink="http://www.w3.org/1999/xlink"      xmlns = 'http://www.w3.org/2000/svg'>  </svg> 

Now look at laying out a straightforward "three-frame" SVG Web page, using a version of http://www.svgspider.com/default.svg as the material for discussion. Because the page is a three-frame design (although it's contained in a single document), you work through the creation of each part of the page separately.

The code for the "top frame" looks like this:

<!-- Top "frame" -->  <rect x="0" y="0" width="800" height="100"  style="fill:#999999;"/>  <svg x="166" y="20" width="468" height="60">  <text x="700" y="40" style="stroke:black; fill:red;  font-family:'Times New  Roman', serif; font-size:24; font-weight:normal;">  Welcome to SVGSpider.com - the world's "first" all Scalable  Vector Graphics web  site.  <animate attributeName="x" from="650" to="-900" begin="0s"  dur="20s"  repeatCount="indefinite"/>  </text>  <rect x="0" y="0" width="468" height="60" style="stroke:red;  stroke-width:2; fill:none;"/>  </svg> 

The first <rect> element creates a background gray color for the top frame. Its width is the same as the <svg> element for the Web page.

Next, you nest an <svg> element that represents a rectangle the same size as a typical banner ad on the Web. In this sample Web page, the rectangle simply contains horizontally scrolling text, although it can contain any <svg> or bitmap image of the defined size. It was centered on the page by virtue of a little mental arithmetic when defining the value of the x attribute.

Use of the <text> element is straightforward. Remember that when a font name with more than one word is used, like Times New Roman, it must be enclosed in quotes. Also, if you used double quotes for the style attribute, you must use single quotes for the font name. Or, if you used single quotes for the style attribute, you must use double quotes for the font name:

<animate attributeName="x" from="650" to="-900" begin="0s"  dur="20s"  repeatCount="indefinite"/> 

This animation produces the ticker tape effect in the top frame. Because the animated text is nested within the <svg> element, it becomes visible only when its x attribute is contained within the width of the <svg> element. However, if you mouse the scrolling text and select some of it, you can produce bizarre effects, with the selected text becoming visible outside the <svg> element. The initial value of the x attribute was chosen to place the scrolling text out of sight and sufficiently to the right to cause a delay before it appears onscreen. Some people prefer to have a ticker tape already visible when the page loads, in which case you might want to set to 400 or so the initial value of the x attribute of the <text> element, reflected also in the from attribute of the <animate> element.

The speed of the text across the screen is determined by the difference in the x coordinates defined by the from and to attributes of the <animate> element as well as the duration of the animation. If you make the animation too fast, the text flickers and is difficult to read. Make it too slow, and the reader might become bored and move on. You find that the speed that can be comfortably read depends on, among other things, the color of the text and the color of the background, which is static:

<rect x="0" y="0" width="468" height="60" style="stroke:red;  stroke-width:2; fill:none;"/> 

The final part of the top frame is a red frame placed around the ticker tape. Notice that the <rect> element is last in the code and therefore would normally be painted in front of the scrolling text. However, it is defined in the example with the fill property set to none, so no problem exists. If you want to create a contrasting background for the scrolling text, as I have done at http://www.svgspider.com/Page08.svg, you need to position this <rect> element earlier in the document than the <text> element that contains the scrolling text; otherwise, a solid color for the rectangle's fill would prevent you and your users from seeing the scrolling text.

Here is the code for the left frame, which although it's fairly long is simple, consisting mostly of a simple visual component for each link. The code is formatted so that the repeating nature of the structure is obvious:

<!-- Left "frame" -->  <rect x="0" y="100" width="100" height="600"  style="fill:red;"/>  <a xlink:href="Page02.svg">  <text style="fill:black; stroke:black; font-size:12;" x="25"  y="130" >  Page 2  </text>  </a>  <a xlink:href="Page03.svg">  <text style="fill:black; stroke:black; font-size:12;" x="25"  y="160" >  Page 3  </text>  </a>  <a xlink:href="Page04.svg">  <text style="fill:black; stroke:black; font-size:12;" x="25"  y="190" >  Page 4  </text>  </a>  <a xlink:href="Page05.svg">  <text style="fill:black; stroke:black; font-size:12;" x="25"  y="220" >  Page 5  </text>  </a>  <a xlink:href="Page06.svg">  <text style="fill:black; stroke:black; font-size:12;" x="25"  y="250" >  Page 6  </text>  </a>  <a xlink:href="Page07.svg">  <text style="fill:black; stroke:black; font-size:12;" x="25"  y="280" >  Page 7  </text>  </a> 

The first <rect> element creates the red background color, 100 pixels wide, for the left frame.

Each hyperlink to another page on the SVGSpider.com Web site is nested within an SVG <a> element. Each <a> element has an xlink:href attribute with a value appropriate to the page being linked to. The <text> element for the link to Page 2 defines the style of the text and the text to be displayed on the page.

After you have the first link visual component created and working correctly, you can simply copy and paste it, adjust the value of the y attribute, and amend the text to reflect the page being linked to. After you have created the first visual component, creating the others is simple.

Look at the code for the "main frame," which, again, should be fairly easy for you to follow. I have removed most of the page content, to conserve space:

<!-- Main Frame -->  <rect style="fill:#CCCCCC;" x="100" y="100" width="700"  height="500"/>  <rect style="fill:black;" x="100" y="100" width="2"  height="700"/>  <text x="130" y="130" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;">  Welcome to SVGSpider.com - the world's "first" web site created  only with  Scalable Vector Graphics.</text>  <text>  <tspan x="130" y="160" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;">  At the moment everything on this site is experimental. So, much  of what you see  is provisional. The  </tspan>  <tspan x="130" dy="1em" style="font-family:Arial,sans-serif;  font-size:14;  font-weight:normal;">  purpose is to explore and demonstrate some of the potential of  SVG as a web  authoring tool.  </tspan>  <tspan x="130" dy="2em" style="font-family:Arial,sans-serif;  font-size:14;  font-weight:normal;">  The site is a "proof of concept". It demonstrates that a Web  site can be  constructed from SVG alone!  </tspan>  <!-- Lots more page code went here. -->  </text> 

Note that two <rect> elements are at the beginning of this frame. The first <rect> element creates a rectangle 700 pixels wide and 500 pixels high. Together with your top and left "frames," the rectangle fully occupies the 800 x 600 pixel space defined by the outer <svg> element. The second <rect> element is only two pixels wide and provides a piece of black dec-oration alongside the right edge of the left frame. For that, you could have used, alternatively, a <line> element.

All the text content on the page is contained in one <text> element, within which are contained a number of <tspan> elements, only three of which are shown in the preceding code. Notice that the position of the first <tspan> element is defined with absolute values for the x and y attributes. Thereafter, I use on the <tspan> elements a dy attribute indicating that the difference in the y coordinate is equivalent to one em, a measure of letter size. Lines of text within a paragraph typically might be separated with dy equal to 1em or 1.5em. Paragraph separation might be indicated by a dy value of 2em.

And, of course, don't omit the closing </svg> tag at the end of the page.

Creating an SVG Web page isn't hard, is it?

Handling semi-resizable SVG Web pages

One of the disappointing aspects of SVG Web pages is that if you use fixed widths and height for the outer <svg> element, you likely end up with an off-white band on the right side of your Web page. Getting rid of that band isn't too difficult. Take a look at the following code:

Listing 12.1 (Resizable01.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="100%" height="100%">  <rect x="0%" y="0%" width="100%" height="100%"/>  <rect x="25%" y="10%" width="50%" height="50%"  style="fill:white; stroke:white;"/>  <text x="26%" y="15%">  <tspan>  Hello, here is some test text.  </tspan>  <tspan x="26%" dy="1.5em">  A second line of test text.  </tspan>  </text>  </svg> 

What you have is a solid black rectangle as your page background, which is 100 percent the size of the width and height of the browser window. However, you size the browser window, for example, as shown in Figure 12.02 and Figure 12.03. In front of that is a white rectangle that, similarly, is 50 percent of the width and 50 percent of the height of the browser window.

Figure 12.02. A full-width view of the resizable areas on the skeleton SVG Web page.

Figure 12.03. The same SVG Web page as shown in Figure 12.02, but with the browser window narrower.

Of course, the two resizable rectangles do not need to be different colors that simply makes it easier for you to see onscreen what is happening when the browser window is resized. If they were both white, the text would appear to be repositioned as the browser window is resized.

This technique doesn't give you the flowing text of HTML or XHTML in the browser, but it does give you a way of presenting textual data fairly symmetrically positioned in the browser window rather than the lopsided appearance that would occur otherwise. It has limits, though. If you make the browser window tiny, you can hide a significant part of the text when line lengths are normal. In that scenario, HTML would also have difficulty coping with the scroll bars taking up a significant proportion of the width of the browser window.

Applying a similar technique gives you two color sidebars, as shown in the following code:

Listing 12.2 (Resizable03.svg)

<?xml version="1.0" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <svg width="100%" height="100%">  <rect x="0%" y="0%" width="25%" height="100%"  style="fill:#000099;stroke:white"/>  <rect x="75%" y="0%" width="25%" height="100%"  style="fill:#000099;stroke:white"/>  <rect x="25%" y="10%" width="50%" height="50%"  style="fill:white; stroke:white;"/>  <text x="26%" y="15%" style="fill:#000099; stroke:#000099">  <tspan>  Hello, here is some test text.  </tspan>  <tspan x="26%" dy="1.5em">  A second line of test text.  </tspan>  </text>  </svg> 

This code provides you with a design for SVG Web pages that would look similar on either 800 x 600 or 1024 x 768 screen resolutions.

In the preceding code, you could have used, as an alternative approach, the font-weight property on the text and set the stroke property to none.

Listing 12.3 provides a slightly different possible solution. The sliding panels are on each side of the main, central text area, but when the browser window is less than fully open, the window clearly needs to be resized because the text in both the left and right blue areas is truncated, as you can see in Figure 12.04.

Figure 12.04. When the browser window does not display the full text in the left and right sidebars, they slide "behind" the central text portion, giving a clear visual cue that the browser window needs to be larger.

Listing 12.3 (Resizable04.svg)

<?xml version="1.0" standalone="no"?>  <!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%">  <rect x="0%" y="0%" width="25%" height="100%"  style="fill:#000099;stroke:white"/>  <text x="20" y="15" style="fill:#FFFFFF; stroke:none">  <tspan>  Here is some test text in the left frame.  </tspan>  <tspan x="20" dy="1.5em">  A second line of test text in the left frame.  </tspan>  </text>  <rect x="75%" y="0%" width="25%" height="100%"  style="fill:#000099;stroke:white"/>  <text x="76%" y="15" style="fill:#FFFFFF; stroke:none">  <tspan>  Here is some test text in the right frame.  </tspan>  <tspan x="76%" dy="1.5em">  A second line of test text in the right frame.  </tspan>  </text>  <rect x="25%" y="10%" width="50%" height="50%"  style="fill:white;  stroke:white;"/>  <text x="26%" y="15%" style="fill:#000099; stroke:#000099">  <tspan>  Hello, here is some test text.  </tspan>  <tspan x="26%" dy="1.5em">  A second line of test text.  </tspan>  </text>  </svg> 

Navigating SVG Web Pages

In this section, I discuss how to navigate around SVG Web pages, not navigate between Web pages (which was discussed in Chapter 5, "Creating Navigation Bars").

It might seem strange that I have to raise the topic at all, but the SVG specification offers new navigation facilities not available in HTML: zooming and panning. However, at least in early implementations of SVG viewers, at least one important normal tool missing is missing also: scroll bars.

First, look at the good news zooming and panning and then look at the situation regarding scroll bars.

Zooming SVG Web pages

SVG images are vector images, of course, and are stored as text descriptions. They can therefore readily be viewed at different sizes. Such zooming facilities are readily available in several SVG viewers.

In the Adobe SVG Viewer, simply right-click on an SVG image, and you see the menu shown in Figure 12.05.

Figure 12.05. The menu made visible when you are right-clicking in the Adobe SVG Viewer. Note the options to zoom in and zoom out.

To zoom in on an image, simply click on the Zoom In option, and the image is magnified within the constraints of the size of the containing <svg> element. The area that is magnified is centered on the spot on which you right-clicked, so make sure that you right-click on the part of the image you are interested in seeing more closely.

From the size at which an image is initially displayed, you can zoom in four times. After that, the Zoom In option is grayed out, and you can choose only to zoom out or to start again with the Original View option.

If you start from the original view, you can zoom out four times, at which point the Zoom Out option is grayed out. In practice, zooming out from the original view isn't really helpful. It's more useful when you have zoomed in a little too far and want to go back one step.

Panning SVG Web pages

This technique was described in Chapter 11, "Creating Interactive SVG Graphics." In the Adobe viewer on the Windows platform, for example, you hold down the Alt key and hold down the left mouse button. The cursor changes to a clenched hand, like the pointer in Adobe Acrobat Reader, and you can then move the image in any direction you choose. It allows diagonal movement, which isn't practical with conventional scroll bars, but accurately scrolling vertically or horizontally is less easily done.

Scrolling SVG

At the time this book was written, none of the SVG viewers had implemented scroll bars for viewing large SVG images. Hopefully, that shortcom-ing will be remedied. In Chapter 10, "Embedding SVG in HTML or XHTML Pages," I showed you how to work around that situation by embedding a large SVG image or Web page within an HTML or XHTML shell.

Some Sample Page Layouts

In other chapters in this book, I have shown you a variety of techniques to create SVG for use as Web graphics. In this section, I describe more of the capabilities of SVG as a Web page layout language.

A "three frame" layout

Love them or hate them, frame-based HTML page layouts are still in wide use. SVG lets you create "frames" within SVG Web pages without difficulty.

For an example of an all-SVG Web site using a three-frame layout, check out http://www.svgspider.com/default.svg. To view the source code, simply right-click on the SVG Web page and choose the View Source option.

Collapsing menus

You might have seen menus that collapse to the left side of the screen crafted within HTML or XHTML pages using JavaScript. Similar effects are also possible using SVG declarative animation. A simple implementation is available for viewing online at http://www.svgspider.com/Page06.svg.

Take a look at how this effect is created. To create any interactive SVG, you need to be monitoring certain events or creating some controls. In this case, you create a pair of simple controls, one to open the collapsing menu and the other to close it. Here is the code for the controls:

<g id="controls">  <g id="Open">   <ellipse cx="54" cy="45" rx="34" ry="12" style="fill:red;" />   <text x="40" y="50" pointer-events="none" style="fill:white;     font-weight:bold;">Open</text>  </g>  <g id="Close">   <ellipse cx="54" cy="80" rx="34" ry="12" style="fill:red "/>   <text x="38" y="85" pointer-events="none" style="fill:white;     font-weight:bold;">Close</text>  </g>  </g> 

Note that the Open and Close controls each have their own id attribute. You need to make use of that when you create the animation:

<svg width="150">  <animate attributeName="width" values="150; 0"  begin="Close.click" dur="3s"  fill="freeze"/>  <animate attributeName="width" values="0; 150"  begin="Open.click" dur="3s"  fill="freeze"/> 

The appearance of a collapsing and opening side menu is created, as shown in some earlier examples, by animating an attribute of an <svg> element. To close the menu, you use an <animate> element that has this code:

begin="Close.click" 

which indicates that the animation begins when the element whose id attribute is Close is clicked.

Similarly, this code:

begin="Open.click" 

means that when the element whose id attribute has the value Open is clicked, the width of the menu increases from 0 pixels to 150.

The animation is slow so that you can follow what is happening when you are viewing it on the Web page. In a production environment, you might set the duration as 0.1s so that the menu snaps open and closed.

Animated menus

You have seen in earlier chapters of this book many animations that are focused on relatively small SVG graphics. Creating animations that are continually active within parts of an SVG Web page is clearly possible. Creating animations that are visually attractive or interesting while avoiding intrusive and irritating animations for the user who wants to read text close by can be difficult. Figure 12.06 shows a slow and gentle continuous animation that takes place behind the labels in a navigation bar on an SVG Web page. Of course, the figure can show only a snapshot of a continually moving animation. If you want to see this animation live online, visit http://www.svgspider.com/BubblesUpBlue.svg.

Figure 12.06. An SVG animation used in a left frame behind a text menu navigation bar.

The code that follows might at first glance look intimidating, but the idea behind it is simple. You have a left frame with a solid color background. In front of that background is a succession of "bubbles" SVG <circle> elements of various sizes, colors, and opacities being animated upward at different speeds. The multiple different characteristics lead to many different overlap effects, some attractive and some intriguing. In front of the animated bubbles are the <text> elements nested within <a> elements that provide navigation. Because of the SVG painter's model, the bubbles seem to slip smoothly behind the text for the links.

Health warning: Code like the code shown in Listing 12.4 has a built-in temp-tation for you to make "just one more adjustment." You have been warned!

Listing 12.4 (BubblesUpBlue.svg)

<?xml version='1.0'?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"        "http://www.w3.org/TR/2001/PR-SVG-20010719/         DTD/svg10.dtd">  <!-- Simulation of multi-coloured bubbles percolating up  through "water" -->  <svg width="800" height="600">  <rect x="0" y="0" width="150" height="600"  style="fill:#000066"/>  <circle cx="40" cy="700" r="30" style="fill:white;  opacity:0.5">  <animate attributeName="cy" attributeType="XML" begin="0s"  from="700" to="-50"  dur="10s" repeatCount="indefinite"/>  </circle>  <circle cx="50" cy="700" r="30" style="fill:white;  opacity:0.6">  <animate attributeName="cy" attributeType="XML" begin="9s"  from="700" to="-50"  dur="5s" repeatCount="indefinite"/>  </circle>  <circle cx="20" cy="700" r="10" style="fill:white;  opacity:0.5">  <animate attributeName="cy" attributeType="XML" begin="4s"  from="700" to="-50"  dur="10s" repeatCount="indefinite"/>  </circle>  <circle cx="60" cy="700" r="30" style="fill:yellow;  opacity:0.5">  <animate attributeName="cy" attributeType="XML" begin="0s"  from="700" to="-50"  dur="6s" repeatCount="indefinite"/>  </circle>  <circle cx="100" cy="700" r="25" style="fill:white;  opacity:0.6">  <animate attributeName="cy" attributeType="XML" begin="1s"  from="700" to="-50"  dur="7s" repeatCount="indefinite"/>  </circle>  <circle cx="80" cy="700" r="55" style="fill:white;  opacity:0.3">  <animate attributeName="cy" attributeType="XML" begin="6s"  from="700" to="-50"  dur="9s" repeatCount="indefinite"/>  </circle>  <circle cx="110" cy="700" r="35" style="fill:yellow;  opacity:0.6">  <animate attributeName="cy" attributeType="XML" begin="10s"  from="700" to="-50"  dur="7s" repeatCount="indefinite"/>  </circle>  <circle cx="120" cy="700" r="10" style="fill:red; opacity:0.5">  <animate attributeName="cy" attributeType="XML" begin="7s"  from="700" to="-50"  dur="10s" repeatCount="indefinite"/>  </circle>  <circle cx="60" cy="700" r="10" style="fill:red; opacity:0.5">  <animate attributeName="cy" attributeType="XML" begin="1s"  from="700" to="-50"  dur="8s" repeatCount="indefinite"/>  </circle>  <circle cx="70" cy="700" r="10" style="fill:red; opacity:0.5">  <animate attributeName="cy" attributeType="XML" begin="3s"  from="700" to="-50"  dur="11s" repeatCount="indefinite"/>  </circle>  <circle cx="90" cy="700" r="20" style="fill:red; opacity:0.4">  <animate attributeName="cy" attributeType="XML" begin="1s"  from="700" to="-550"  dur="8s" repeatCount="indefinite"/>  </circle>  <g id="navbar">  <a xlink:href="default.svg">  <text x="30" y="30" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Home</text>  </a>  <a xlink:href="Page02.svg">  <text x="30" y="60" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Page 02</text>  </a>  <a xlink:href="Page03.svg">  <text x="30" y="90" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Page 03</text>  </a>  <a xlink:href="Page04.svg">  <text x="30" y="120" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Page 04</text>  </a>  <a xlink:href="Page05.svg">  <text x="30" y="150" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Page 05</text>  </a>  <a xlink:href="Page06.svg">  <text x="30" y="180" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Page 06</text>  </a>  <a xlink:href="Page07.svg">  <text x="30" y="210" style="font-family:Arial, sans-serif;  font-size:14;  font-weight:normal;     stroke:red; fill:red;">Page 07</text>  </a>  </g>  s</svg> 

You can see a more psychedelic version in Figure 12.07 and online at http://www.svgspider.com/BubblesLava01.svg.

Figure 12.07. A version of the bub-bling SVG menu giving a psychedelic effect by means of multiple linear gradients.

SVG Web pages are in their early days. The first SVG Web page, on SVGSpider.com, went live in January 2001. Authors of SVG Web pages are only beginning to discover how best to lay out pages. However, for the reasons mentioned earlier in this chapter, I expect to see explosive growth in the authoring of SVG Web pages, to match the growth in Flash Web pages, although, hopefully, with a little more emphasis on user experience than is evident on some Flash sites.

CONTENTS