O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sample SVG Images and Components Using Interactivity

In this section, I want to show you some examples of constructing SVG Web page “furniture” that demonstrates interactivity.

A mailto graphic

A mailto link on a Web page can be as simple as plain text or, in some cases, a hyperanimated irritation. In this section, you create an interactive, animated mailto graphic—one that doesn’t intrude on the user experience.

The graphic looks like an envelope. When you mouse over the graphic, the “flap” opens and the text “Email me” is animated (see Figure 11.01).

Figure 11.01. The completed mailto graphic when it is not moused.

First, create a static ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required