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.
The most recent browser versions support most of SVG 1.1.
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.
|<rect x="0" y="0" width="200" height="100" />|
|<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />|
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.
|<svg version="1.1" viewBox="0 0 100 100">|
|<mask id="mask" x="0" y="0" width="100" height="100"|
|<circle cx="50" cy="50" r="50" fill="white" />|
|<circle cx="50" cy="50" r="25" fill="black" />|
|<circle cx="50" cy="50" r="50" fill="blue" mask="url(#mask)" />|
To render a blue circle with a hole.
You can use shapes, text, or paths to define a masking area.
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:
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:
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].
yis not provided, it is assumed to be zero.
y. If y is not provided, it is assumed to be equal to
adegrees about a given point.
If optional parameters
yare 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
yare 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>).
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:
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials