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> ...

Get Designing SVG Web Graphics now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.