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

SVG Gradients at Work

Take a look now at how you can put SVG gradients to work, by creating a banner or a top frame using an SVG gradient.

Size your SVG viewport to be 800 pixels wide. You should aim to create a vertical gradient that shades from a deep pink at the top to a pale blue at the bottom.

The source code looks like this:

Listing 6.16. (BannerGradient.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"> <svg width="800" height="600"> <defs> <linearGradient id="MyPinkGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="120" > <stop offset="10%" style="stop-color:#FF0066"/> <stop offset="75%" style="stop-color:#EEEEFF"/> </linearGradient> </defs> ...

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