SVG 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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:
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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.
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.
And this is how it is displayed.
Here’s an example of a radialGradient.
Which looks like this when rendered:
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)
is equivalent to applying the transformation matrix [a b c d e f]
.
x
and y
. If y
is not provided, it is assumed to be zero.
x
and y
. If y is not provided, it is assumed to be equal to x
.
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>)
.
a
degrees.
a
degrees.
Here are two examples
Which renders this:
And in the second case, we add a skew along the X axis to both elements.
That renders this:
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