Rendering a Quadratic Bezier Curve

Remarks

The SVG code in Listing 5.2 contains an SVG defs element that defines a checkerboard pattern using diagonal linear grading shading that ranges from red to black. The SVG defs element also defines a clip path that consists of four connected quadratic Bezier curves as given below:

<path d="m0,0 Q100,0 200,200 T300,200 m100,100 Q200,100 300,250 T400,250 m100,100 Q200,0 300,200 T400,200 m100,100 Q200,100 300,150 T400,150"

The first quadratic Bezier curve is the same as the quadratic Bezier curve defined in Listing 5.1, and the other three Bezier curves are essentially variations of the first Bezier curve. The resultant graphics image is reminiscent of a dragon.

The actual rendering takes place in the SVG g element, which first translates the origin from the point (0,0) to the point (50,50). Notice how the SVG g element also contains the following line that specifies the clip path that is defined in the SVG defs element:

clip-path="url(#clipPathDefinition)" stroke="black" fill="none">

The SVG code contains an SVG rect element that creates a ' wiggly ' effect because the width and height attributes are slightly smaller than the corresponding attributes specified in the pattern element in conjunction with the stroke-dasharray attribute, as shown below:

<rect fill="url(#gradientDefinition)" style="stroke:white;stroke-width:4;" stroke-dasharray="6 6 6 6" x="0" y="0" width="36" height="36"/>

Venetian Checkerboards and Quadratic Bezier Clip Paths

Consider the gradient checkerboard pattern rendered in Figure 5.3.

Figure 5.3: A Venetian quadratic Bezier-bound gradient checkerboard pattern.

The SVG document in Listing 5.3 demonstrates how to use the SVG path element in order to generate a Venetian gradient checkerboard pattern bound by a quadratic Bezier curve.

Listing 5.3 vVenetianGradientPatternQBCP1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <defs> <pattern id="multiPattern" width="50" height="50" patternUnits="userSpaceOnUse"> <linearGradient id="repeatedGradientDefinition" x1="0" y1="0" x2="50" y2="0" gradientUnits="userSpaceOnUse" spreadMethod="repeat"> <stop offset="0%" style="stop-color:#FF0000"/> <stop offset="100%" style="stop-

color

:#000000"/> </linearGradient> <rect style="fill:url(#repeatedGradientDefinition)" x="0" y="0" width="50" height="50"/> </pattern> <clipPath id="clipPathDefinition" clipPathUnits="userSpaceOnUse"> <path d="m0,0 Q100,0 200,200 T300,200" style="fill:red;stroke:blue;stroke-width:4;"/> <path d="m0,0 l50,50 l50,-50"/> <rect x="30" y="50" width="40" height="80"/> <circle cx="100" cy="50" r="10"/> <circle cx="150" cy="90" r="40"/> <circle cx="200" cy="125" r="10"/> <ellipse cx="250" cy="150" rx="40" ry="20"/> </clipPath> </defs> <g transform="translate(50,50)" clip-path="url(#clipPathDefinition)" stroke="black" fill="none"> <rect style="fill:url(#multiPattern)" x="0" y="0" width="400" height="400"/> </g> </svg>

Remarks

The SVG code in Listing 5.3 contains the same quadratic Bezier curve as Listing 5.1, and it uses this Bezier curve as a clip path while rendering a gradient checkerboard pattern consisting of rectangles. These rectangles are rendered with vertical linear gradient shading that varies linearly from red to black in order to create a 'Venetian shading' effect. Now look at the SVG defs element, which starts with the definition of a checkerboard pattern whose id attribute has the value checkerPattern , followed by an SVG clipPath element whose id attribute equals clipPathDefinition .

The actual rendering takes place in the SVG g element, which first translates the origin from the point (0,0) to the point (50,50). Notice how the SVG g element also contains the following line that specifies the clip path that is defined in the SVG defs element:

clip-path="url(#clipPathDefinition)" stroke="black" fill="none">

Now that the ' core ' definition and code is in place, you can add various SVG elements as you see fit; in this example, we have an SVG rect element, three SVG circle elements, and one SVG ellipse element, all of which have the same fill attribute applied to them.

---