AzureDays

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.

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.

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).