Finally, let's do some useful stuff. As one example, let's explore how to make a webpage with SVG.

Before Starting:

Make a basic html page. You can use the "getting down with html" starter page to start with.

The Basics:

Now create a simple design for a homepage with using the SVG you have learned already. If you want to spiff it up, you can use inkscape (but make sure to "Save As" a plain SVG). Here's a quick example: Here

(You may have noticed the use of gradients and filter effects in my design. I did not cover their use because it is much easier to use inkscape for them, then to manually code out the filters and gradients. If you want to learn how to use them in inkscape, here is a basic guide. If you want to look at the documentation for manual use, look here.)

Making it Better:

This looks nice, but we can make it a lot better. One thing we can do, is make the gears rotate. This will make the page more dynamic. To do this, we add this SVG code to the first gear:

<animateTransform
         attributeName="transform"
         attributeType="XML"
         type="rotate"
         from="0,230,575"
         to="360,230,575"
         begin="1s"
         dur="5s"
         repeatCount="indefinite"
         id="animateTransform104" />

and this slightly different code to the second gear:

<animateTransform
         attributeName="transform"
         attributeType="XML"
         type="rotate"
         from="0,340,675"
         to="360,340,675"
         begin="1s"
         dur="5s"
         repeatCount="indefinite"
         id="animateTransform110" />

This code will rotate the two gears 360 degrees in five seconds, around the points (230,575) and (340,675) respectively. See if you can find the specific references to this information in the code. These additions render as: This.

Now we must get the boxes at the bottom to link to different pages. This can be done by inserting a <a> tag to the object code:

    <a
       xlink:href="http://www.samplesite.com"
       target="_top"
       id="Link1">
	    (Linked Object Code)
</a>

As seen in the above example, there are three components of the link tag. The actual xlink:href defines the site or page being linked to. The id is just the name for the link tag. The target is more complicated. In this example, it is defined as _top which will cause the link to open in the same window. Here is a quick list of some of the possible definitions for "target":

With that in mind here is the SVG page with the buttons linked. Here.

Finally, let's add interactivity to the rectangular link buttons at the bottom of the page. When the mouse moves over them, we will change the color to blue, and then back again when the mouse moves off. This can be accomplished by finding the three small <rect> tags in the document. The <rect> tags will look something like this:

<rect
         width="180.18358"
         height="88.493858"
         x="431.9082"
         y="947.11523"
         transform="translate(0,-452.36218)"
         id="rect3329-0"
         style="color:#000000;fill:#1a1a1a;fill-opacity:1;
fill-rule:nonzero;stroke:#000000;stroke-width:4.30630922;
stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;
stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;
marker:none;visibility:visible;display:inline;overflow:visible;
filter:url(#filter3331-8);enable-background:accumulate" />

Okay, there is a lot of information in there (that is what happens when you use Inkscape), and the fill, stroke etc. are set up differently than what I have taught you. I know. It is something to get used when mixing Inkscape with a text editor. But we can work around it. For this interactivity we will use a <set> tag, which needs to go inside of the <rect> tag, at the end. Using the code you learned in Lesson 7, we can come up with something like this:

<rect
           width="180.18358"
           height="88.493858"
           x="35.051067"
           y="945.93042"
           id="rect3329"
           style="color:#000000;fill:#1a1a1a;fill-opacity:1;
fill-rule:nonzero;stroke:#000000;stroke-width:4.30630922;
stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;
stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;
marker:none;visibility:visible;display:inline;overflow:visible;
filter:url(#filter3331);enable-background:accumulate" > 
<set attributeName="fill" from="#1a1a1a" to="blue" 
         begin="mouseover" end="mouseout"/>
</rect>

We made some little changes to the formatting to allow us to insert the <set> tag, including switching the "/>" for "</rect>". By making these changes to each link button rectangle, we get: This.

Cool, right? As you can see, you replicate HTML and CSS easily with SVG.

Exercises: