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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
