Advanced Customization of SVG
By: Anish Antony
Tags: Programming, Coding, SVG, HTML, Web Development

Exploring SVG Part 2

Advanced Customization of SVG

Grouping, Definition, Gradient

Hello Guys, over my previous article we have seen how to make basic shapes using SVG. By extending these basic shapes, it is able to make your own SVG creativity. Here on this article lets discuss how to make the SVG creativity smart and easy with the help of grouping and definition.

Photo by Duy Pham on Unsplash

With the help of grouping and definition, it is able to group a set of SVG elements. This will helps to reuse the group or apply general properties to the group — Let's go to in-depth concepts behind grouping and definition.

Before that I repeat, If you don't have any idea about what happening on SVG or how to draw basic SVG shapes, Then I highly recommend please go through my previous article “All you need to know about SVG Shapes” and come back to here.

Grouping

It can group a set of SVG elements into a container with the help of <g></g> element. The advantage of grouping is it is able to apply the properties to the group so that it will get reflected on the elements inside the group. Another advantage of grouping is it is able to reuse a group very easily, Which means it can able to make the duplicate of a grouped set of the element so that you can skip the code duplication.

Let’s understand the grouping with some examples.

Simple group creation

Here I draw a leaf attached with a petiole. There are two path definitions are here, one is for the leaf and the other one is for the petiole. I group those two paths definitions and make a name for the complete group called “leaf”.

The output of the group ‘leaf’

This is how to create a basic group. Now find out what to do with this group.

The ‘group’ element supports a large set of attributes. The values change on these attributes results in its group elements. Let’s see some major frequently using attributes in the group.

Fill

Fill is normally used to fill the entire group of elements colour. Also, it is possible to override the group level fill by adding the fill attribute for individual elements.

SVG Group by adding fill element

Here is the output for the above script

The output of the group fill

In the above example, you can see that in the leaf path there are no fill attributes. But for the petiole path, it overrides a dark green fill (#388E3C). So in the output, you can see the whole group is replaced with the group fill (#de3e3e) but the fill didn't apply on the overridden portion, petiole.

Color

The attribute colour is for defining the colour. This attribute will not directly be applied to the sub-elements. For applying the defined colour want to set the value as ‘currentcolor’ for the attributes such as fill, stroke, stop-color and light-color so that it will replace the defined colour value to the attribute.

Let's check out how the colour works with the help of some examples.

Defined the colour #de3e3d on color attribute. Applied that colour path fill by defining ‘currentcolor’

Here the output quite similar to the output of the previous example.

The group defined a color attribute in the group and applied it to the inner element by referring ‘currentcolor’

In the example, you can see that on the group it defined a colour (#de3e3e) with the help of color attribute. It is able to apply that color to group elements attribute fill with the name ‘currentcolor’. It will replace the value ‘currentcolor’ with color attribute definition.

Opacity

It is used for adjusting the opacity of group child elements.

Stroke & Stroke Dasharray

This is for adjusting stroke associated properties for the group elements.

Let’s move on to some examples.

The group with stroke, stroke-width and stroke-dasharray.

Here is the complete output for the above code snippet.

Stroke applied leaf output

In the above example, it is applied a stroke of violet with width 3 and make it to dash array with the pattern 6 2. The dash-array means first 6px the line shows and next 2px the line become hidden.

Transform

Now we are moving on to the most important and useful property of SVG element. The transform is not only a group attribute, but It can also apply on elements too. With the help of transform, it is able to do different transformations to the elements or group such as rotate, translate or displacement, skew and scale. Let’s discuss each of these operations in detail

Translate

Translate is used to displacing. Translate accept two parameters x-axis value and optional y-axis value. Based on the value given to the translate function it displaces in additional with x and y-axis value.

Syntax: translate(<x> [<y>])

x new position = x old position+ <x> y new position= y old position+ <y>

Let's apply the translate on our leaf example.

translate example

In the above example, the group ‘leaf’ translate 500 unit right from his actual location. This is because of the transformation call translate(500,0).

The leaf with lower opacity shows the actual position of the group before applying the transformation. Higher opacity group shows the group after transformation.

Scale

It is used for changing the size of the group or element. It accepts two numbers x scale factor and y scale factor. If it is not provided with the value for y then it assumes that both the values are same

Syntax: scale(<x> [<y>])

Here <x> — Scaling factor for x-axis. <y> — Scaling factor for y-axis.

Let’s check out how the scale transformation works on our leaf example

scale transformation

In the above example, I applied two transformations for the group leaf. One is I translated its position to 500 unit right (Which we saw in the earlier example) also applied the x and y scaling factor of 0.5 which will reduce the size of the leaf to half.

The leaf with lower opacity shows the actual position of the group before applying the transformation. Higher opacity group shows the group after transformation.

Rotate

Rotate is used for rotating the element or group. The rotate function accept the rotation access followed by the optional rotation point

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

Here <a> — rotating angle <x> — x-axis displacement for the rotation point <y> — y-axis displacement for the rotation point

Let’s move on to an example of this.

rotate transformation

In the above example, a 30 degree rotate transformation applied at the point (0,450). This result the entire leaf group rotate 30 degrees based on the point (0,450).

The leaf with lower opacity shows the actual position of the group before applying the transformation. Higher opacity group shows the group after transformation.

SkewX and SkewY

These functions are used for skew the x or y-axis with an angle.

Syntax: skewX(<a>)//skew along the x-axis by a degree

skewY(<a>)//skew along the y-axis by a degree

Let's try out how to skew a rectangle on x and y-axis.

Skew transformation example

Here show two rectangles, one is skewed on x-axis by 10 degrees and another one is skewed on y-axis by 10 degrees.

Rectangle with lower opacity shows the actual position of the group before applying the transformation. Higher opacity group shows the group after transformation.

Matrix

With the help of matrix function, it can able to do the combination of the above all operation. But it’s not easy, it’s a bit tough as compared to the above transformations.

The matrix is a 3X3 matrix looks like follows

a c e

b d f -----> matrix(a,b,c,d,e,f)

0 0 1

bottom row for the matrix is always same, So in the SVG matrix function only accept the 6 values of the first two rows. By changing the values of these 6 parameters it is able to do all kind of transformation which we discussed.

Here follows how to apply those transformations in the matrix perspective

Translate

0 0 tx

0 1 ty

0 0 1 Syntax: matrix(1,0,0,1,tx,ty) Rotate

cos(a) -sin(a) 0

sin(a) cos(a) 0

0 0 1 Syntax: matrix( cos(a), sin(a),-sin(a),cos(a),0,0 ) Scale

sx 0 0

0 sy 0

0 0 1 Syntax: matrix(sx,0,0,sy,0,0) SkewX

1 tan(a) 0

0 1 0

0 0 1 Syntax: matrix(1,0,tan(a),1,0,0) SkewY

Skew 1 0 0

tan(a) 1 0

0 0 1 Syntax: matrix(1,tan(a),0,1,0,0)

Let’s check out some examples of matrix transformation.

Matrix transformation example

In the above example, the logic behind the matrix is to rotate the group by 30 degrees and translate the group by 400 unit right. 0.5 is the sin value of 30 and 0.866 is the cos value of 30. The main problem with the matrix transformation is understanding and implementing the matrix logic is a bit complex as compared with other transformations.

The leaf with lower opacity shows the actual position of the group before applying the transformation. Higher opacity group shows the group after transformation.

Grouping is Reusable

One of the super advantages of grouping is able to reuse a group. So that you don’t want to rewrite the group again. It is able to create duplicate groups and can apply the different transformation to the groups, It is done via <use> tag

Let’s see how reusability works in group with some examples.

Group Reusability example

In the above code snippet, it is created the group called “two-leaf” by combining the “leaf ” group and its reflection. The reflection is created by use tag. Also, it reused the “two-leaf” group and make two additional layers of leaf

Here lower left leaf is the actual one, all other leaves are created by reusing lower left one.

Definition

The definition is used to define a graphical object and can use later time. Def tag is used to define a graphical object. For displaying or using the object you want to use the tag <use> and inside of that need to pass the definition URL.

The difference between group and definition is, In the case of grouping the object is already displayed on the view but in the definition, it only displays if it uses the <use> syntax by referring the object id.

Definition mainly used in the case of defining reusable objects and for creating gradients. Let’s see some examples of definition.

Definition example

In the above example, you can see the group leaf is placed under the definition section (<defs>). So it will not directly appear on the view. For making it into view it should need to use the <use> tag.

Here the leaves are created based on the defined leaf.

Another use of the <defs> is for creating a gradient. Let’s see in detail how to create a gradient.

Gradient

An image becomes so perfect only if its colour is impressive. The gradient colours will makes the image so good appearing. Let’s see how to make different gradient colours using SVG.

There are two kinds for gradients are there. Linear Gradient and Radial Gradient

Linear Gradient

The linear gradient is used to define a gradient in a linear way. Linear gradients are generally plotted by using <linearGradient> tag. Inside the <linearGradient>tag, it uses the <stop> element for mentioning the positions of each gradient color. Also, SVG provides n number of ways to customize the linear gradient with the help of attributes. Here follow a few necessary attributes from it.

gradientTransform: With the help of this attribute it is able to apply the transformations over the gradient.

x1: x coordinate starting point of the linear gradient.

x2: x coordinate ending point of the linear gradient.

Radial Gradient

It is used to define a gradient in a radial way. It is implemented by using the tag <radialGradient>. Similar to Linear Gradient, the <stop> attribute is used for defining the gradient colour and its position. Radial Gradient also supports a few attributes for its customization. Here follow the important attributes from it.

cx: Defines the x coordinate of the end circle of the radial gradient.

cy: Defines the y coordinate of the end circle of the radial gradient.

fr: Defines the radius of the start circle of the radial gradient.

fx: Defines the x coordinate of the start circle of the radial gradient.

fy: Defines the y coordinate of the start circle of the radial gradient.

gradientTransform: This attribute provides additional transformations on the gradient.

Let's see the gradients work on SVG with some examples.

SVG different gradient examples

The output of the above code snippet looks like follows.

Different gradient output

Now we have seen how to make SVG more beautiful on this article. I hope you understand it well.