Press enter to skip the top menu

Scalable Vector Graphics

Learning Outcomes

On completion of this page you will know how to:

Go to top

Introduction

Transformation means to produce change. This can be a model or a movie star being transformed in the makeup room my hiding all blemishes under makeup. It can also be a room or a building being transformed from being cold and uninviting to a warm and welcoming place through the skills and expertise of the interior decorators. Regarding SVG it could mean altering the size, position or shape of an element

Go to top

Translating

An introduction to translate

The facility translate is the first component of Transformation that we shall look at. It is also the simplest. Before we begin examining the code in Listing 1 below, we shall first look at what this faciliy can do. As its name inplies, translate moves entities across the width and height of our SVG file being rendered on your computer screen.

To move an element 200 units to the right across the screen you use transform = translate(200). This will move then entitiy 200 units to the right from its current position. It does not move it along the y-axis. If you wanted to move the entity the same distance to the left you would use transform = translate(-200).

If you wish to move the element vertically along the y-axis you would use transform = translate(0,200). This means not to move horizontally but to move downwards 200 units. Again if you wish to move upwards you would use transform = translate(-200).

The code transform = translate(400,200) moves an entity 400 units to the right and 200 units downwards. Similarly the code transform = translate(-400,-200) would move the entity 400 units to the left and 200 units upwards.

Examining the code

The code below contains different example of how the translate works.

Line 2 defines a rectangle that is the same size as the viewBox. This rectangle simply forms a yellow background, against which we can display our translated entities.

Line 4 defines a white 100 x 100 rectangle, which is placed at (100,100). We shall not be translating this rectangle. Instead all other rectangles, apart from one, will be positioned in the same position as this and then translated to another position. The white rectangle will act as a reference point so we can see the effect that the code had on moving the other rectangles.

At line 6 a 100 X 100 rectangle is defined and positioned at (100, 100) and filed with blue.. It is then translated 300 units to the right and 300 units downwards, thus being repositioned at (400,400). This is a two dimensional translation as the rectangle was translated both horizontally and vertically.

At lines 9 and 10 two rectangles are defined to the starting position of (100,100) and are filled with magenta and purple respectively. The rectangle at line 10 is translated using transform="translate(250), while the other is translated using translate(600,0). They are the two rectangles on the same row as the white rectangle and their horizontal positions are 350 and 700 respectively.

Listing 1
                            <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                <rect x="0" y="0" width="1000" height="1000" stroke="blue"  fill="yellow"></rect>
                                <!--OUR MARKER RECT-->
                                <rect x="100" y="100" width="100" height="100" fill="white" ></rect>
                                <!--A TWO DIMENSIONAL TRANSLATION-->
                                <rect x="100" y="100" width="100" height="100" fill="blue" transform="translate(300,300)"></rect>
                            
                                <!--A HORIZONTAL TRANSLATION-->
                                <rect x="100" y="100" width="100" height="100" fill="magenta" transform="translate(250)"></rect>
                                <rect x="100" y="100" width="100" height="100" fill="purple" transform="translate(600,0)"></rect>
                            
                                <!--A VERTICAL TRANSLATION-->
                                <rect x="100" y="100" width="100" height="100" fill="blueviolet" transform="translate(0,400)"></rect>
                            
                                <!--A DIFFERENT ORIGIN-->
                                <rect x="600" y="400" width="100" height="100" fill="firebrick" transform="translate(0,300)"></rect>
                            
                                <!--FILLING IN THE CORNERS-->
                                <rect x="100" y="100" width="100" height="100" fill="darkblue" transform="translate(-100, -100)"></rect>
                                <rect x="100" y="100" width="100" height="100" fill="darkblue" transform="translate(-100, 800)"></rect>

                                <rect x="100" y="100" width="100" height="100" fill="darkblue" transform="translate(800, 800)"></rect>
                                <rect x="100" y="100" width="100" height="100" fill="darkblue" transform="translate(800, -100)"></rect>
                            </svg>

At line 13 we have an example of a vertical translation. The 100 X 100 rectangle is opositioned at (100,100) and the translation code is transform="translate(0,400). The zero means that there is no horizontal translation while the 400 means to move it down by 400 units. Thus the rectangle is now positioned at (100,500).

By now you may be thinking that only only elements placed at (100,100) can be translated. This is not the case. Remember we said earlier that the white rectangle at (100,100) was there as a reference point only. To demonstrate that rectangles originating at other positions can also be translated we have an example at line 16. This is also a 100 X 100 rectangle but its original position is (600,400). The command transform="translate(0,300) causes it to be repositioned at (600,700).

Finaly we look at moving backwards. Notice that so far we have translated only from left to right or top to bottom; We have moved no elements right to left or bottom to top. We shall address this issue now.

Spanning lines 19 - 22 we have four 100 X 100 rectangles positioned at (100,100). Each is filled with darkblue. We are to move those into each of the four corners of our page.

The rectangle defined at line 19 has a translation code of transform="translate(-100, -100)". This move 100 units left and 100 units upwards, thus giving us the new position of (0,0), or in other words the top left corner.

At line 20 the translation code is transform="translate(-100, 800)". This means move one hundred units left and 800 units downwards. The new position will now be (0,900) which is the bottom left hand corner.

At lines 21 the translation codes are transform="translate(800, 800)". This will give a new position of (900,900) which is the bottom right hand corner. No negative movement isn this one.

Finally line 22 has the code of transform="translate(800, -100)". This means move the the position (900,0), which is the top right hand corner.

Fig 1
Go to top

Scaling

Elements positioned at the origin, i.e (0,0)

Listing 2 
                            <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                <rect x="0" y="0" width="1000" height="1000" stroke="blue"     fill="yellow"></rect>
                                <rect x="0" y="0" width="100" height="100" stroke="red" fill="orange" transform="scale(4)"></rect>
                                <rect x="0" y="0" width="100" height="100" stroke="red" fill="blue" transform="scale(3)"></rect>
                                <rect x="0" y="0" width="100" height="100" stroke="red" fill="maroon" transform="scale(2)"></rect>
                                <rect x="0" y="0" width="100" height="100" stroke="black" fill="white" transform="scale(1)"></rect>
                            </svg>

In line 1 above we define the SVG element as being a 1000 X 1000 square. The viewPort is the exact same dimensions.

In line 2 we define a rectangle of the same dimensions as the viewPort and colour it yellow. We shall be doing any transformations on this rectangle, either in this example or in any other example. We shall be using it simply as a background image, against which we shall be showing transformations of other rectangles.

At lines 3 - 6 we define four rectangles. All have their position at the origin, i.e. the point (0,0), and have a width of 100. All have different colours so that they can be distinguished from each other.

At line 3 the rectangle has a colour of orange and a scale value of 4. Since there is no other value supplied for the scale this means the the rectangle will be scaled by a factor of 4 in both the x and y direction. This is why it is shown an orange coloured rectangle with a size of 400 X 400 in Fig 3 below.

The same explanation applies to rectangles defined at lines 4 and 5.

At line 6 the rectangle is defined as having a scale value of 1. This means that it does not move and retains its original position at (0,0).

Fig 2

Elements not on the origin

Listing 3
                            <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                <rect x="0" y="0" width="1000" height="1000" stroke="blue" fill="yellow"></rect>
                                <rect x="100" y="100" width="100" height="100" stroke="red" fill="orange" transform="scale(4)"></rect>
                                <rect x="100" y="100" width="100" height="100" stroke="red" fill="blue" transform="scale(3)"></rect>
                                <rect x="100" y="100" width="100" height="100" stroke="red" fill="maroon" transform="scale(2)"></rect>
                                <rect x="100" y="100" width="100" height="100" stroke="black" fill="white" transform="scale(1)"></rect>
                            </svg>

The code in Listing 2 is almost identical to that in Listing 1: the size and colour of the rectangles are the same and the scale values applied to them are the same. Despite this the display shown in Fig 2 is very different from that in Fig 1. Why?

There are two reasons for this: firstly the rectangles now have their top left hand corner at (100,100) and secondly, the scale function has an unusual way of scaling elements.

The way scaling occurs is as follows:

  • The distance from the origin, i.e. (0,0), to the top left corner of the element is measured on both the x and y axes. These values are then multiplied by value of the scale. This gives the new coordinates of the element to be scaled.
  • The width and height of the element to be scaled is now multiplied by value of the scale function, thus completing the scaling.

We shall demonstrate this using the orange rectangle defined at line 3 above. Its top left hand corner is at (100,100) and the scale value is 4. This rectangle is 100 units from (0,0) on both the x and y axes. To start the scaling these values are multiplied by 4, thus positioning the rectangle at (400,400). The sides of the rectangle, which happen to be 100 units each, are also multiplied by 4, thus giving us the orange rectangle in Fig 2.

The rest of the rectangles can be explained the same way.

Fig 3

Scale has two values

Listing 4
                            <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                <rect x="0" y="0" width="1000" height="1000" stroke="blue"     fill="yellow"></rect>
                                <rect x="100" y="100" width="100" height="100" stroke="black" fill="white"></rect>
                                <rect x="100" y="100" width="100" height="100" stroke="red" fill="blue" transform =" scale(1,4)"></rect>
                            </svg>

This code defines a rectangle with its top-left corner at (100, 100) and dimensions of 100x100 pixels. The transform="scale(1, 4)" attribute scales the rectangle. The first value in scale (1) maintains the original width, while the second value (4) stretches the height by a factor of 4. This results in a tall, narrow rectangle.

Fig 4
Listing 5
                        <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"  viewBox="0 0 1000 1000" version="1.1">
                            <rect x="0" y="0" width="1000" height="1000" stroke="blue"  fill="yellow"></rect>
                            <rect x="100" y="100" width="100" height="100" stroke="black" fill="white"></rect>
                            <rect x="100" y="100" width="100" height="100" stroke="red" fill="blue" transform="scale(4,1)"></rect<
                        </svg>

Similar to the previous example, this code also defines a 100x100 rectangle at (100, 100). However, the transform="scale(4, 1)" attribute now scales the rectangle 4 times its original width while keeping the original height. This produces a wide rectangle.

Fig 5
Listing 6
                        <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                            <rect x="0" y="0" width="1000" height="1000" stroke="blue"
                             fill="yellow"></rect>
                            <rect x="100" y="100" width="100" height="100" stroke="black" fill="white"></rect>
                            <rect x="100" y="100" width="100" height="100" stroke="red" fill="blue" transform="scale(2,3)"></rect>
                        </svg>

This code defines a 100x100 rectangle at (100, 100). The transform="scale(2, 3)" attribute scales the rectangle by a factor of 2 in the x-direction and by a factor of 3 in the y-direction. This results in a rectangle that is both wider and taller than the original.

Fig 6
Listing 7
                        <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                            <rect x="0" y="0" width="1000" height="1000" stroke="blue"     fill="yellow"></rect>
                            <rect x="100" y="100" width="100" height="100" stroke="black" fill="white"></rect>
                            <rect x="100" y="100" width="100" height="100" stroke="red" fill="blue" transform="scale(4,3)"></rect>
                        </svg>

This code defines a 100x100 rectangle at (100, 100). The transform="scale(4, 3)" attribute scales the rectangle by a factor of 4 in the x-direction and by a factor of 3 in the y-direction. This results in a rectangle that is significantly wider and taller than the original.

Fig 7
Go to top

Rotating

Listing 8
                                <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                    <rect x="0" y="0" width="1000" height="1000" fill="yellow"></rect>
                                
                                    <rect x="200" y="200" width="100" height="100" fill="blue" transform="rotate(22.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="firebrick" transform="rotate(45,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="darkmagenta" transform="rotate(67.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blueviolet" transform="rotate(90,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blue" transform="rotate(112.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="firebrick" transform="rotate(135,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="darkmagenta" transform="rotate(157.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blueviolet" transform="rotate(180,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blue" transform="rotate(202.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="firebrick" transform="rotate(225,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="darkmagenta" transform="rotate(247.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blueviolet" transform="rotate(270,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blue" transform="rotate(292.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="firebrick" transform="rotate(315,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="darkmagenta" transform="rotate(337.5,500,500)"></rect>
                                    <rect x="200" y="200" width="100" height="100" fill="blueviolet" transform="rotate(360,500,500)"></rect>
                                </svg>

Listing 8, Figure 8: This block demonstrates rotating a rectangle around a central point (500, 500). Each element is drawn with the same initial position and dimensions but rotated by an additional 22.5 degrees from the previous one. This showcases how the rotate() function works with different angles.

Fig 8

Listing 9
                                <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                    <rect x="0" y="0" width="1000" height="1000" fill="yellow"></rect>
                                
                                    <rect x="200" y="200" width="600" height="600" fill="blue" transform="rotate(22.5,500,500)"></rect>
                                    <rect x="200" y="200" width="600" height="600" fill="blue" transform="rotate(45,500,500)"></rect>
                                    <rect x="200" y="200" width="600" height="600" fill="blue" transform="rotate(67.5,500,500)"></rect>
                                    <rect x="200" y="200" width="600" height="600" fill="blue" transform="rotate(90,500,500)"></rect>
                                </svg>

Listing 9, Figure 9: Here, a larger rectangle is rotated by 22.5 degrees, 45 degrees, 67.5 degrees, and 90 degrees, all with the same center of rotation (500, 500). This illustrates how the rotation affects a larger element and how it changes with increasing angles.

Fig 9

Listing 10
                                <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1">
                                    <rect x="0" y="0" width="1000" height="1000" fill="blue"></rect>
                                    <defs>
                                        <pattern id="little-dots" width="10" height="10" patternUnits="userSpaceOnUse">
                                            <circle cx="3" cy="3" r="3" fill="chocolate" stroke-width="3" stroke="goldenrod"></circle>
                                        </pattern>
                                    </defs>
                                    <rect x="400" y = "400" width="200" height="200" fill="darkorange"></rect>
                                    <rect x="400" y = "400" width="200" height="200" fill="url(#little-dots)"></rect>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1"  transform="rotate(11.25, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(22.5, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(33.75, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(45, 500, 500)"></ellipse>
                                
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(56.25, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(67.5, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(78.75, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(90, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(101.25, 500, 500)"></ellipse>
                                
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(112.5, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(123.75, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(135, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(146.25, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(157.5, 500, 500)"></ellipse>
                                
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(168.75, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(180, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(191.25, 500, 500)"></ellipse>
                                
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(202.5, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(213.75, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(225, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(236.25, 500, 500)"></ellipse>
                                
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(247.5, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(258.75, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(270, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(281.25, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(292.5, 500, 500)"></ellipse>
                                
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(303.75, 500, 500)"></ellipse> 
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(315, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(337.5, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1" transform="rotate(326.25, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1"   transform="rotate(348.75, 500, 500)"></ellipse>
                                    <ellipse cx="350" cy="500" rx="100" ry = "15" fill="burlywood" stroke="beige" stroke-width="1"  transform="rotate(360, 500, 500)"></ellipse> 
                                </svg>

Listing 10, Figure 10: This block combines rotation with other elements (ellipses and a pattern). Each ellipse is rotated around the point (500, 500) by specific degrees, creating a decorative pattern. This example shows how rotation can be used in conjunction with other SVG features to create more complex designs.

Fig 10

Key Points about Rotation rotate() rotates an element around a specified point. rotate(angle, cx, cy) takes three parameters: angle: The rotation angle in degrees. Positive values rotate clockwise, negative values counterclockwise. cx: The x-coordinate of the center of rotation. cy: The y-coordinate of the center of rotation. If cx and cy are omitted, the element is rotated around its own origin.

Go to top

Skewing

Listing 11
                        <svg x="0" y="0" width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
                            <rect x="0" y="0" width="1000" height="1000" fill="yellow"></rect>
                        
                            <rect x="200" y="100" width="600" height="100" fill="crimson" transform="translate(500,150) skewX(30) translate(-500,-150)"></rect>
                            <rect x="200" y="100" width="600" height="100" stroke="darkblue" fill="none" stroke-width="4"></rect>
                        
                            <rect x="200" y="300" width="600" height="100" fill="crimson" transform="translate(500,350) skewX(-30) translate(-500,-350)"></rect>
                            <rect x="200" y="300" width="600" height="100" stroke="darkblue" fill="none" stroke-width="4"></rect>
                        
                            <rect x="100" y="600" width="200" height="200" fill="crimson" transform="translate(200,700) skewY(30) translate(-200,-700)"></rect>
                            <rect x="100" y="600" width="200" height="200" stroke="darkblue" fill="none" stroke-width="4"></rect>
                        
                            <rect x="700" y="600" width="200" height="200" fill="crimson" transform="translate(800,700) skewY(-30) translate(-800,-700)"></rect>
                            <rect x="700" y="600" width="200" height="200" stroke="darkblue" fill="none" stroke-width="4"></rect>

                        </svg>

Listing 11, Figure 11: This block demonstrates the skewX() and skewY() transformations. The first two elements show skewX(). The first rectangle is skewed by 30 degrees to the right, and the second by -30 degrees to the left. The next two elements show skewY(). The third rectangle is skewed by 30 degrees downwards, and the fourth by -30 degrees upwards. The translate() functions are used to center the skewing effect on the rectangles.

Key Points about Skewing skewX() skews an element along the x-axis. skewY() skews an element along the y-axis. skewX(angle) and skewY(angle) take one parameter: angle: The skewing angle in degrees.

Go to top

Revision

Multi Choice

Fill in the blanks

Go to top

Assignment

Explain the concept of transformation in SVG. What are the different types of transformations that can be applied to SVG elements?

Describe the purpose of the `translate()` function. How does it affect the position of an element? Provide an example of how you would use the `translate()` function to move an element 100 units to the right and 50 units down.

Explain how the `scale()` function works. What happens when you scale an element by a factor of 2? What happens when you scale it by a factor of 0.5? Provide an example of how you would use the `scale()` function to make an element twice as wide and half as tall.

Describe the `rotate()` function and its parameters. How do you specify the angle of rotation and the point of rotation? Provide an example of how you would use the `rotate()` function to rotate an element 45 degrees clockwise around its center point.

Explain the concept of skewing. What is the difference between `skewX()` and `skewY()`? Provide an example of how you would use the `skewX()` function to skew an element by 30 degrees along the x-axis.

How can you combine multiple transformations in SVG? Provide an example of how you would translate, scale, and rotate an element in a single `transform` attribute.

What is the purpose of the `viewBox` attribute? How does it affect the way SVG content is displayed? Provide an example of how you would use the `viewBox` attribute to zoom in on a specific portion of an SVG image.

Explain the role of the `preserveAspectRatio` attribute. What are the different values it can take, and how do they affect the scaling and positioning of SVG content within the viewport?

Choose one of the SVG images from the webpage and describe the transformations that have been applied to its elements. Explain how each transformation contributes to the final appearance of the image.

Create your own SVG image using at least three different types of transformations. Provide the code for your image and explain the purpose of each transformation you have used.