HTML5 Tutorial – SVG Clipping, Gradient, Transforms

image_thumb1SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

You can find an overview of SVG a previous section, you’ll learn about Basic Shapes, Path, Text, and Fonts. In this section, you will learn more things you can do with shapes and text, such as clipping, gradients, tranforms.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

The most recent browser versions support most of SVG 1.1.

Clipping

So what happens when you want to remove a piece of your drawing. For example, supposed you want to show only a part of a circle.

Clipping refers to removing parts of elements defined by other parts. In this case, any half-transparent effects are not possible, it’s an all-or-nothing approach.

Masking on the other hand allows soft edges by taking transparency and grey values of the mask into account.

Create a clip using the clipPath element and then using a clip-path attribute on the element you want clipped.

The following example makes the circle into a semi circle.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<svg>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
</body>
</html>

Which renders as:

image

You can use shapes, text, or paths to define the clipping area.

Masking is a combination of opacity values and clipping.

In the following example, you can put a hole into a circle.


<!DOCTYPE html>
<html>
<head>
<title>Masking</title>
</head>
<body>
<svg version="1.1" viewBox="0 0 100 100">
<defs>
<mask id="mask" x="0" y="0" width="100" height="100"
maskUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="50" fill="white" />
<circle cx="50" cy="50" r="25" fill="black" />
</mask>
</defs>
<circle cx="50" cy="50" r="50" fill="blue" mask="url(#mask)" />
</svg>
</body>
</html>

To render a blue circle with a hole.

image

You can use shapes, text, or paths to define a masking area.

Gradient

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.

There are two main types of gradients in SVG:

  • Linear
  • Radial

The ramp of colors to use on a gradient is defined by the ‘stop’ elements that are child elements to either the ‘linearGradient’ element or the ‘radialGradient’ element.

Gradients are then referenced using ‘fill’ or ‘stroke’ properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.

Here’s an example of a linearGradient.


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

And this is how it is displayed.

image

Here’s an example of a radialGradient.


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Which looks like this when rendered:

image

Transforms

The subject of SVG coordinates and transformations is large. You can find basic information about this subject from the W3C SVG specification.

Transform is the attribute that kick starts altering the position or size of an image through animation. By providing ‘transform’ in the information code for a shape, you begin a process of change and create movement.

Here are what you can do with transform attribute in SVG (from Mozilla Developer Network).

 

matrix(<a> <b> <c> <d> <e> <f>)

This transform definition specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

translate(<x> [<y>])

This transform definition specifies a translation by x and y. If y is not provided, it is assumed to be zero.

scale(<x> [<y>])

This transform definition specifies a scale operation by x and y. If y is not provided, it is assumed to be equal to x.

rotate(<a> [<x> <y>])

This transform definition specifies a rotation by a degrees about a given point.
If optional parameters x and y are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].
If optional parameters x and y are supplied, the rotate is about the point (x, y). The operation represents the equivalent of the following transform definitions list: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).

skewX(<a>)

This transform definition specifies a skew transformation along the x axis by a degrees.

skewY(<a>)

This transform definition specifies a skew transformation along the y axis by a degrees.

 

Here are two examples


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Which renders this:

image

And in the second case, we add a skew along the X axis to both elements.


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

That renders this:

image

References

Gradients and Patterns in the SVG Spec.

Coordinate Systems, Transformations and Units

Sample Code

Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials