2m

1. What is SVG?

SVG is an XML language, similar to XHTML, which can be used to draw vector graphics. It can be used
to create an image either by specifying all the lines and shapes necessary, by modifying already
existing raster images, or by a combination of both.

 SVG stands for Scalable Vector Graphics

 SVG defines the graphics in XML format
 Every element and every attribute in SVG files can be animated

2. List the parameters of the SVG <rect> with their purpose. Give an
example.

The element is applied to create an SVG rectangle and variations of rectangle

figures

1 x − x-axis co-ordinate of top left of the rectangle. Default is 0.

2 y − y-axis co-ordinate of top left of the rectangle. Default is 0.

3 width − width of the rectangle.

4 height − height of the rectangle.

5 rx − used to round the corner of the rounded rectangle.

6 ry − used to round the corner of the rounded rectangle.

Eg: <svg width="500" height="500">

<rect x="100" y="100" rx="10" ry="10" width="300" height="100"

fill="red" </rect>

</svg>

3. List the parameters of the SVG <circle> with their purpose. Give a code
example.

<circle> element is used to draw circle with a center point and given radius.

1 cx − x-axis co-ordinate of the center of the circle. Default is 0.

2 cy − y-axis co-ordinate of the center of the circle. Default is 0.

3 r − radius of the circle.

Eg: <svg height="100" width="100">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

</svg>

4. List the parameters of the SVG <ellipse> with their purpose. Give code example.

<ellipse> element is used to draw ellipse with a center point and given two radii.

1 cx − x-axis co-ordinate of the center of the ellipse. Default is 0.

2 cy − y-axis co-ordinate of the center of the ellipse. Default is 0.

3 rx − x-axis radius of the ellipse.

4 ry − y-axis radius of the ellipse.

Eg: <svg height="140" width="500">

<ellipse cx="200" cy="80" rx="100" ry="50"

fill="yellow" stroke="purple" stroke-width="2">

</svg>

5. List the parameters of the SVG <line> with their purpose. Give code example.

<line> element is used to draw line with a start point and end point.

1 x1 − x-axis co-ordinate of the start point. Default is 0.

2 y1 − y-axis co-ordinate of the start point. Default is 0.

3 x2 − x-axis co-ordinate of the end point. Default is 0.

4 y2 − y-axis co-ordinate of the end point. Default is 0.

5.stroke-width – the line width

6.stroke – the line color

Eg: <svg height="210" width="500">

<line x1="10" y1="10" x2="200" y2="200" stroke="red"

stroke-width="2" />

</svg>

6. What are the advantages of SVG <tspan> element?

Flexibility: The <tspan> element can be used to define multiple lines of text, each with its own style
and position. This makes it ideal for creating complex text layouts, such as charts, tables, and forms.

Scalability: The <tspan> element is scalable, which means that it can be resized without losing its
quality. This makes it a good choice for use on high-resolution displays.
Portability: The <tspan> element is supported by most web browsers, making it a portable format for
creating text-based content

7. What is the use of SVG stroke-linecap attribute? Write possible values of this attribute

The stroke-linecap attribute is used in SVG (Scalable Vector Graphics) to specify the shape of the
endpoints of a stroke or line. It defines how the line should be terminated at its start and end points.
three possible values: butt, square and round.

butt: The stroke ends with a straight edge that is normal (at 90 degrees) to the direction of the stroke
and crosses its end.

round: The stroke ends with a rounded arc that has a radius equal to half the width of the stroke.

square: The stroke ends with a square that has a side length equal to half the width of the stroke.

Eg: <svg viewBox="0 0 100 100">

<path d="M0 0 L100 0 L100 100 L0 100 Z" stroke="black" stroke-width="10" stroke-linecap="butt"/>

</svg>

8. What is the purpose of SVG stroke-dasharray attribute? Provide example

The stroke-dasharray property in CSS is for creating dashes in the stroke of SVG shapes. The
strokedasharray attribute converts paths into dashes and makes the stroke of an SVG shape rendered
with dashed lines. can also be used to create custom patterns.
eg: <svg width="200" height="100">

<line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="2"

stroke-dasharray="5,3" />

</svg> //output: -----------------

9. Mention the uses of SVG grouping.

1. One reason is if a set of elements share the same attribute.

2. To define a new coordinate system for a set of elements by applying a transformation to each
coordinate specified in a set of elements.

3. Grouping is also useful as the source or destination of a reference.

Grouping in SVG is achieved by the g element. A set of elements can be defined as a group by
enclosing them within a g element.

Eg: <g style="fill:red;stroke:black">

<circle cx="70" cy="100" r="50" />

<rect x="150" y="50" rx="20" ry="20" width="135" height="100" /></g>

10. What is SVG viewbox attribute? List the SVG elements with which viewbox attribute can be
used

The viewBox attribute in SVG is used to define the position and dimensions of the viewport, which is
the rectangular area of the SVG image that is displayed in the browser. The viewBox attribute takes
four values separated by spaces: min-x, min-y, width, and height. These values define the rectangular
area that should be visible within the viewport.

Eg: <svg viewBox="0 0 200 100"></svg>

<marker>

<pattern>

<svg>

<symbol>

<view>

4m:

1. List and explain the advantages of SVG.

1. They’re infinitely scalable: An SVG file is used for any type of graphics that you might need to
scale. Usually, if you try to modify different image sizes, you’ll run into pixelation issues. SVG files, on
the other hand, are infinitely scalable because you’re working with vectors instead of pixels.
2. They’re indexed by Google. SVG files appear in Google image searches, which mean they don’t
pose any downsides from a Search Engine Optimization (SEO) perspective.

3. They’re relatively small in file size. If you take a simple image or illustration and save it in SVG,
JPEG, and PNG formats, the first will usually be much smaller in file size than the rest. However, that
only works for ―simple‖ images, which we’ll discuss in a moment.

4. You can animate SVG files. Since you’re dealing with XML files or code, you can style and animate
SVG files using CSS.

 SVG images can be created and edited with any text editor
 SVG images can be searched, indexed, scripted, and compressed
 SVG images are scalable
 SVG images can be printed with high quality at any resolution
 SVG images are zoomable
 SVG graphics do NOT lose any quality if they are zoomed or resized
 SVG is an open standard
 SVG files are pure XML

2. Explain different ways to view an SVG file.

1. Using a Browser: Unlike other graphics files, when you open an SVG, it’ll launch in your default
browser. That’s because your computer recognizes SVGs not as graphics, but as XML files.

2. Opening SVG Files Using a Text Editor: Since SVG files are XML-based images, you can open and
modify them using a text editor.

3. Using a Photo or Image Editor: Most modern photo editing software includes support for SVG
files. That means you can open, edit them, and then save the changes or export the image to other
formats. When working with an SVG file using photo editing software, you’ll get access to all of the
same tools that you can use to customize other image types. This enables you to edit the SVG, add
more details, delete parts of it, and basically do anything else you want.

4.Using an SVG viewer: There are a number of SVG viewers available online and as desktop
applications. These viewers allow you to view and interact with SVG files in a more detailed way than
a web browser or text editor.

3. Explain different ways of embedding SVG in HTML5

. Using <img> element: To embed an SVG via an <img> element, you justneed to reference it in the
src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no
inherent aspect ratio). If you have not already done so, please read Images in HTML.

Eg:<img src="equilateral.svg"

alt="triangle with all three sides equal" height="87" width="100" />

2. You can also use SVGs as CSS background images, as shown below. In the below code, older
browsers will stick with the PNG that they understand, while newer browsers will load the SVG:

Eg:background: url("fallback.png") no-repeat center;

background-image: url("image.svg");

background-size: contain;

3. Using <SVG> element: You can also open up the SVG file in a text editor, copy the SVG code, and
paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG.
Make sure your SVG code snippet begins with an <svg> start tag and ends with an </svg> end tag.
Here's a very simple example of what you might paste into your document:

Eg:<svg width="300" height="200">

<rect width="100%" height="100%" fill="green" />

</svg>

4. Embedding an SVG with an iframe: You can open SVG images in your browser just like webpages.
So embedding an SVG document with an <iframe> is done just by using src attribute of iframe.Here's
a quick review:

<iframe src="triangle.svg" width="500" height="500">

<img src="triangle.png" alt="Triangle with 3 unequal sides" />

</iframe>

5. Embedding SVG as an <object>: You can also use an HTML <object> element to add SVG images to
a webpage using the code syntax below:
<object data="happy.svg" width="300" height="300"> </object>

6. Embedding SVG as an <embed>: The HTML <embed> element is another way to use an SVG image
in HTML and CSS using this

syntax: <embed src="happy.svg" />.

4. Explain all the SVG path commands.

SVG (Scalable Vector Graphics) path commands are used to define the shape and contours of a path
within an SVG image. Each command is represented by a single character and is followed by one or
more parameters that determine the behavior of the command.

 M (MoveTo): The M command moves the pen to the specified coordinates. The coordinates
are specified as two numbers, separated by a space or comma. The first number is the x-
coordinate, and the second number is the y-coordinate.

 L (LineTo): The L command draws a straight line from the current position of the pen to the
specified coordinates. The coordinates are specified as two numbers, separated by a space or
comma. The first number is the x-coordinate, and the second number is the y-coordinate.

 H (HorizontalLineTo): The H command draws a horizontal line from the current position of
the pen to the specified x-coordinate. The x-coordinate is specified as a number.

 V (VerticalLineTo): The V command draws a vertical line from the current position of the pen
to the specified y-coordinate. The y-coordinate is specified as a number.

 Z (ClosePath): The Z command closes the current path. This means that the pen is moved
back to the starting point of the path.
 Q (QuadraticBezierCurveTo): The Q command draws a quadratic Bézier curve from the
current position of the pen to the specified coordinates. The coordinates are specified as
four numbers, separated by a space or comma. The first two numbers are the control points
of the curve, and the last two numbers are the end point of the curve.
 C (CubicBezierCurveTo): The C command draws a cubic Bézier curve from the current
position of the pen to the specified coordinates. The coordinates are specified as six
numbers, separated by a space or comma. The first three numbers are the control points of
the curve, and the last three numbers are the end point of the curve.

Eg: <svg width="570" height="320">

<g>
<path d="M 100 100 L 300 100 L 200 300 z"
stroke="black" stroke-width="3" fill="red"> </path>
</g>
</svg>


5. Explain SVG path commands to draw curve and arc with examples

1. Cubic Bézier Curve (C/c): The cubic Bézier curve command `C` (or `c` for relative) is used to draw a
curve defined by two control points and an endpoint. The syntax is: `C (x1 y1, x2 y2, x y)` or `c (dx1
dy1, dx2 dy2, dx dy)`. Here's an example:output:
 <path d="M 100 100 C 200 200, 300 200, 400 100" stroke="red" />
This example creates a cubic Bézier curve starting at (100, 100) with two control points: (200, 200)
and (300, 200), and an endpoint at (400, 100).

2. Quadratic Bézier Curve (Q/q):The quadratic Bézier curve command `Q` (or `q` for relative) is used
to draw a curve defined by one control point and an endpoint. The syntax is: `Q (x1 y1, x y)` or `q (dx1
dy1, dx dy)`. Here's an example: output:

<path d="M 100 100 Q 200 200, 300 100" stroke="black" fill="none" />
This example creates a quadratic Bézier curve starting at (100, 100) with one control point at (200,
200) and an endpoint at (300, 100).

3. Elliptical Arc (A/a):The elliptical arc command `A` (or `a` for relative) is used to draw an arc of an
ellipse. It requires parameters for the radii, rotation, arc flags, and sweep flag. The syntax is: `A (rx ry
x-axis-rotation large-arc-flag sweep-flag x y)` or `a (rx ry x-axis-rotation large-arc-flag sweep-flag dx
dy)`. Here's an example: output:

<path d="M 100 100 A 50 30 45 0 1 200 200" stroke="black" fill="none" />

This example draws an elliptical arc starting at (100, 100) with radii 50 and 30, a rotation of 45
degrees, a large arc flag of 0, a sweep flag of 1, and an endpoint at (200, 200).

These examples demonstrate how to use the SVG path commands to draw curves and arcs within an
SVG `<path>` element. By manipulating the control points, endpoints, and other parameters, you can
create various curved and arced shapes within your SVG images.

6. Explain all the SVG Path commands related to line with examples

 Closepath Z ends the current SVG path, returning it to the starting point. The Z command
draws a straight line from the current position back to the first point in the path. The
command has no parameters.

 Eg:<path d="M 100 100 L 200 200 L 300 100 Z" stroke="black" fill="none"
/>
 LineTo (L): This command draws a straight line from the current position of the pen to the
specified coordinates. The coordinates are specified as two numbers, separated by a space or
comma. The first number is the x-coordinate, and the second number is the y-coordinate.

 Eg:<path d="M 100 100 L 200 200" stroke="black" fill="none" />

 HorizontalLineTo (H): This command draws a horizontal line from the current position of the
pen to the specified x-coordinate. The x-coordinate is specified as a number.

 Eg:<path d="M 100 100 H 200" stroke="black" fill="none" />

 VerticalLineTo (V): This command draws a vertical line from the current position of the pen
to the specified y-coordinate. The y-coordinate is specified as a number.

 Eg:<path d="M 100 100 V 200" stroke="black" fill="none" />

7. Explain the use of T command in SVG path drawing with example

The T command in SVG path drawing is used to draw a smooth quadratic Bézier curve from the
current position of the pen to the specified coordinates. The coordinates are specified as three
numbers, separated by a space or comma. The first two numbers are the control points of the curve,
and the last number is the end point of the curve.

The T command is similar to the Q command, but the T command uses the previous control point of
the path as the first control point of the new curve. This makes the curve smoother and more
organic-looking.

Eg: <svg width="200" height="200">

<path d="M 100 100 Q 150 50, 200 100 T 300 100" stroke="black" fill="none"
/>

</svg>

In this example, we start with the command M 100 100 to move the starting point to
(100, 100). Then we use the Q command to draw a quadratic Bézier curve with a
control point at (150, 50) and an endpoint at (200, 100).

After that, we use the T command to draw a smooth quadratic Bézier curve. Since the
previous command was a quadratic Bézier curve ( Q ), the T command automatically
reflects the control point (150, 50) to calculate the new control point, resulting in a
smooth curve. The endpoint of the curve is specified as (300, 100).

8. Explain SVG <text> element with all its attributes

The element is used to define a text. x and y are the main attributes responsible for the text position.
The baseline for the text begins from the bottom-left corner of the first text symbol. It is essential to
set y value larger than the font size. Otherwise, the text does not get into the viewport.

Eg: <svg height="100" width="200" >

<text x="10" y="6" fill="red">The text is not fully visible </text>
<text x="10" y="30" fill="green">The text is fully visible </text>
</svg>

x, y − the absolute x and y coordinates of characters

dx, dy − shift along the x-axis or y-axis (relative coordinates)

rotate − rotation applied to all characters

textlength − rendering length of the text

lengthAdjust − type of adjustment with the rendered length of the text

The x, y, dx, dy, and rotate attributes in the and elements are often used for individual characters
that require minor position adjustments to achieve a visual effect. In the example, the x and y set the
start coordinates of the baseline.

Using the textLength attribute, you can set the length of the text. Herewith the text length is then
adjusted to match the specified length by adjusting the spacing and the size of the glyphs. With the
lengthAdjust attribute, you can specify whether to adjust both the letter spacing and the glyph size
9. Explain SVG <textpath> element with example.

SVG can place text along a path defined by a <path> element. This is making by a <textPath> element
in a few ways:

Attribute href (xlink:href) references to an URL pointing to the <path> element.

Attribute path specifies the SVG path data directly.

Both the path attribute and the href attribute specify a path along which the characters will be
rendered. The text displaying along the curve mostly takes attribute href with reference to the
<path>element. Here is an example

<svg height="300" width="800" >

<path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100"
fill="transparent" />
<path id="my_path2" d="M 50 100 Q 25 10 180 100 T 350 100"transform="translate(0,75)"
fill="transparent" />
<text>
<textPath href ="#my_path1"> Aspose.SVG for .NET is flexible library for SVG files
processing and fully compatible with its specifications. </textPath>
<textPath href ="#my_path2"> Aspose.SVG for .NET is flexible library forSVG files
processing and fully compatible with its specifications. </textPath>
</text>
</svg>

10. Explain different transformation available in SVG.

Refer 11 12 13 14 of 4mark

11. Explain all the variations of SVG translate() function with its parameters.

Translate: The translate() transformation moves the object by a specified amount in the x and y
directions. The amount of the movement is specified as two numbers, separated by a space or
comma. The first number is the x-coordinate, and the second number is the y-coordinate.
1. translate(tx) This variation of the translate() function takes a single parameter tx, which
represents the translation distance along the x-axis. Positive values move the element to the
right, while negative values move it to the left. The y-axis translation remains unaffected.
Example:

<rect x="0" y="0" width="100" height="100" transform="translate(50)" />

2. translate(tx, ty) This variation of the translate() function takes two parameters: tx for the x-
axis translation and ty for the y-axis translation. It allows you to translate an element along
both axes independently. Positive values move the element right and down, while negative
values move it left and up. Example:

<circle cx="100" cy="100" r="50" transform="translate(30, -20)" />

In this example, the circle is translated 30 units to the right along the x-axis and 20 units up along the
y-axis.

3. translate(tx) The translate() function can also be used as a part of a transformation matrix.
In this case, it takes a single parameter tx, which represents the translation distance along
the x-axis. The transformation matrix must include other parameters for scaling, rotation,
and skewing. Example:

<g transform="matrix(1, 0, 0, 1, 50, 50)"> <!-- SVG elements within the group --> </g>

12. Explain all the variations of SVG rotate() function with its parameters

Rotate: The rotate() transformation rotates the object by a specified angle. The angle of rotation is
specified as a number in degrees.

1. rotate(angle) This variation of the rotate() function takes a single parameter angle, which
represents the rotation angle in degrees. Positive angles rotate the element clockwise, while
negative angles rotate it counterclockwise. The rotation is performed around the origin (0,
0). Example:

<rect x="50" y="50" width="100" height="100" transform="rotate(45)" />

In this example, the rectangle is rotated 45 degrees clockwise around the origin.

2. rotate(angle, cx, cy) This variation of the rotate() function takes three parameters: angle, cx,
and cy. The angle represents the rotation angle in degrees, while cx and cy define the
coordinates of the rotation center. The rotation is performed around the specified center
point. Example:

<circle cx="100" cy="100" r="50" transform="rotate(30, 100, 100)" />

13. Explain SVG scale() function with its parameters.

Scale: The scale() transformation scales the object by a specified amount in the x and y directions.
The amount of the scaling is specified as two numbers, separated by a space or comma. The first
number is the x-factor, and the second number is the y-factor.
1. scale(sx) This variation of the scale() function takes a single parameter sx, which represents
the scaling factor along the x-axis. A value greater than 1 enlarges the element, while a value
less than 1 shrinks it. A value of 1 maintains the original size. Example:

<rect x="50" y="50" width="100" height="100" transform="scale(2)" />

In this example, the rectangle is scaled by a factor of 2 along the x-axis, resulting in double the
original width.

2. scale(sx, sy) This variation of the scale() function takes two parameters: sx for the x-axis
scaling factor and sy for the y-axis scaling factor. It allows you to scale an element
independently along both axes. Example:

<circle cx="100" cy="100" r="50" transform="scale(1.5, 0.5)" />

14. Explain SVG skewing with proper parameters used.

Skew: The skew() transformation skews the object by a specified angle in the x and y directions. The
angle of skew is specified as a number in degrees
 1. skewX(angle) The skewX() function skews SVG elements along the x-axis by a specified
angle. The angle parameter represents the skew angle in degrees. Positive angles skew the
elements to the right, while negative angles skew them to the left. Example:

<rect x="50" y="50" width="100" height="100" transform="skewX(30)" />

In this example, the rectangle is skewed 30 degrees to the right along the x-axis, creating a
trapezoidal shape.

2. skewY(angle) The skewY() function skews SVG elements along the y-axis by a specified angle.
The angle parameter represents the skew angle in degrees. Positive angles skew the
elements downward, while negative angles skew them upward. Example:

<circle cx="100" cy="100" r="50" transform="skewY(-20)" />

15. Explain the purpose of all the SVG presentation attributes.

1. fill: Specifies the fill color or pattern of the element, determining its interior color.

2. stroke: Sets the color of the element's outline or stroke.

3. stroke-width: Defines the width of the element's stroke.

4. stroke-dasharray: Determines the pattern of dashes and gaps in the element's stroke.

5. stroke-dashoffset: Specifies the offset of the dash pattern in the element's stroke.

6. opacity: Sets the transparency of the element, where 0 means fully transparent and 1 means
fully opaque.

7. fill-opacity: Determines the transparency of the fill color or pattern.

8. stroke-opacity: Sets the transparency of the stroke color.

9. stroke-linecap: Specifies the shape used to terminate the ends of strokes. It can be round,
square, or butt.
10. stroke-linejoin: Defines the type of corner where two lines meet. It can be miter, round, or
bevel.

11. stroke-miterlimit: Determines the maximum length of mitered line joins. It is only applicable
when stroke-linejoin is set to "miter".
12. transform: Applies transformations such as translation, rotation, scaling, and skewing to the
element.

Eg: <circle cx="100" cy="100" r="50" fill="green" stroke=”red” stroke-width=”5” opacity="0.5"

transform="rotate(45)” />

16. List and explain the SVG color codes.

1. SVG Color Names. There are the 147 color names defined by the Scalable Vector Graphics (SVG)
Specification. You may set named colors like this: stroke="Green" or fill="Red".

2. HEX Color Codes. The code is expressed as follows: #RRGGBB, where each of the two-digit values
is a range of each of the three colors (red, green, blue), with which you select the final value
representing each color. Each two-digit hex pair can have a value from 00 to FF. For example,
#00FF00 is displayed as green, because the green component is set to its maximum value (FF) and
the others are set to 00. You can set the green and red HEX colors like this: stroke="#00FF00" or
fill="#FF0000".

3. RGB(Red, Blue, Green) Color Codes. The values R, G and B are the intensity (in the range from 0
to 255), respectively, of the red, green and blue components of the determined color. You can set the
green and red RGB colors like this: stroke="rgb(0,255,0)" or fill="rgb(255,0,0)".

4. RGBA(Red, Blue, Green, Alpha) Color Codes. RGBA color values are an extension of RGB color
values with an alpha channel that determines the opacity of the color. The alpha parameter is a
number between 0.0 and 1.0 that specifies transparency. You may determine the green and red RGB
colors like this: stroke="rgba(0,255,0,1.0)" or fill="rgba(255,0,0,1.0)".

5. HSL Color Codes. HSL stands for Hue, Saturation and Lightness. Each color has an angle on the RGB
color wheel and a percentage value for the saturation and lightness values. HSL codes for green and
red colors you can set like this: stroke="hsl(120, 100%, 50%)" and fill="hsl(0, 100%, 50%)"

6. HSLA(Hue, Saturation, Lightness, Alpha) Color Codes. HSLA color values are an extension of HSL
color values with an alpha channel that determines the opacity of the color. HSL codes for green and
red colors you can set like this: stroke="hsla(120, 100%, 50%, 1.0)" and fill="hsla(0, 100%, 50%, 1.0)"

17. Mention the rules of SVG color specification.

 If the fill attribute (or fill property of the style attribute) is not specified, the default is black.

 If the fill attribute (or fill property of the style attribute) has none or transparent value, the shapes
filling is transparent

.  If the stroke attribute (or stroke property of the style attribute) is not specified, the stroke is
invisible, is absent. This remains true even if the stroke-width attribute is specified.

 To specify fill color or stroke color, you can use color names, RGB or RGBA values, HEX values, HSL
or HSLA values. Also, you can take gradients and patterns (see the Text Color section or the SVG
Filters and Gradients article).

18. Explain opacity with its usage in SVG.

You can specify the opacity of either the fill or stroke separately in SVG. These are controlled by the
fill-opacity and stroke-opacity attributes. Also, you can use RGBA or HSLA values that are allowed in
SVG and will give the same effect:

 RGBA color values have an alpha channel that determines the opacity of the color. The alpha
parameter is a number between 0.0, meaning ―fully transparent‖, and 1.0, meaning ―fully
opaque‖. For example, rgba(255, 0, 0, 0.5) is displayed as red with 50% opacity.

 HSLA color values are specified with hue, saturation, lightness, and alpha, where an alpha
parameter specifies the opacity. As in RGBA color codes, the alpha parameter is between 0.0 and 1.0.
For example, hsla(0, 100%, 50%, 1) is displayed as pure red, hsla(0, 100%, 50%, 0.5) is displayed as
red with 50% opacity

19. Explain SVG Gaussian blur effect.

he Gaussian blur effect in SVG is a filter that softens the edges of an object by averaging the colors of
the pixels around it. The amount of blur is controlled by the stdDeviation attribute.
The stdDeviation attribute specifies the standard deviation of the Gaussian distribution used to blur
the image. A higher value will result in a more blurred image.

Eg: <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<defs>
<filter id="blurFilter">

<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

</filter>

</defs>

<rect x="50" y="50" width="200" height="100" filter="url(#blurFilter)" />

</svg>
In this example, an SVG rectangle is defined with the coordinates (50, 50) and a size of 200x100. The
<filter> element with the id of "blurFilter" is defined within the <defs> section. Inside the filter, the
<feGaussianBlur> element is used to specify the blurring effect. The in attribute is set to
"SourceGraphic" to indicate that the blur effect should be applied to the entire rectangle. The
stdDeviation attribute controls the amount of blur, with a larger value resulting in a more
pronounced blur effect.

20. Explain SVG drop shadow effect

The SVG drop shadow effect is a visual effect that creates a shadow behind SVG elements, giving
them a sense of depth and separation from the background. It simulates the effect of a light source
casting a shadow onto a surface.

The feDropShadow filter element is used to create a drop shadow effect in SVG. The feDropShadow
element has the following attributes:

 dx: Specifies the horizontal offset of the shadow.

 dy: Specifies the vertical offset of the shadow.

 blur: Specifies the blur radius of the shadow.

 color: Specifies the color of the shadow.

Eg: <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<defs>

<filter id="dropShadowFilter" x="-20%" y="-20%" width="140%" height="140%">

<feDropShadow dx="2" dy="2" stdDeviation="5" />

</filter>

</defs>

<rect x="50" y="50" width="200" height="100" filter="url(#dropShadowFilter)" />

</svg>
In this example, an SVG rectangle is defined with the coordinates (50, 50) and a size of 200x100. The
<filter> element with the id of "dropShadowFilter" is defined within the <defs> section. Inside the
filter, the <feDropShadow> element is used to specify the drop shadow effect. The dx and dy
attributes control the horizontal and vertical offset of the shadow, respectively. The stdDeviation
attribute determines the blurriness of the shadow.

21. Explain lighting effects in SVG. (6)

Lighting effects in SVG allow you to simulate the interaction of light with SVG elements, creating
realistic and dynamic visual effects. SVG provides several lighting effects that can be applied to
elements using filter primitives.
1.The feDiffuseLighting filter element calculates the diffuse lighting effect on an object. The diffuse
lighting effect is the light that is reflected evenly off of an object's surface. The feDiffuseLighting filter
element has the following attributes:

 surfaceScale: Specifies the scale factor for the diffuse lighting effect.

 lightSourceX: Specifies the x-coordinate of the light source.

 lightSourceY: Specifies the y-coordinate of the light source.

 lightSourceZ: Specifies the z-coordinate of the light source.

 lightColor: Specifies the color of the light source.

Eg: <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<defs>

<filter id="diffuseLightingFilter">

<feDiffuseLighting in="SourceGraphic" lighting-color="white">

<fePointLight x="100" y="100" z="50" />

</feDiffuseLighting>

</filter>

</defs>

<rect x="50" y="50" width="200" height="100" filter="url(#diffuseLightingFilter)" />

</svg>

2.The feSpecularLighting filter element calculates the specular lighting effect on an object. The
specular lighting effect is the light that is reflected in a concentrated direction off of an object's
surface. The feSpecularLighting filter element has the following attributes:

 surfaceScale: Specifies the scale factor for the specular lighting effect.

 specularExponent: Specifies the exponent of the specular lighting effect.

 lightSourceX: Specifies the x-coordinate of the light source.

 lightSourceY: Specifies the y-coordinate of the light source.

  lightSourceZ: Specifies the z-coordinate of the light source.

 lightColor: Specifies the color of the light source.

Eg: <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

<defs>

<filter id="specularLightingFilter">

<feSpecularLighting in="SourceGraphic" lighting-color="white" specularConstant="1"

specularExponent="20">

<fePointLight x="100" y="100" z="50" />

</feSpecularLighting>

</filter>

</defs>

<rect x="50" y="50" width="200" height="100" filter="url(#specularLightingFilter)" />

</svg>

3.<fePointLight>: The <fePointLight> element defines a point light source that can be used in
conjunction with other lighting effects. It specifies the position of the light source in 3D space using
the x, y, and z attributes. Example:

<fePointLight x="100" y="100" z="50" />

22. Explain Linear Gradient in SVG

Linear gradients in SVG allow you to create smooth color transitions along a straight line. They are
defined by specifying the start and end points of the gradient and the color stops along the way.

A linear gradient in SVG is a gradient that transitions between colors along a straight line. The line
can be horizontal, vertical, or angled.

The linearGradient element is used to define a linear gradient in SVG. The linearGradient element
has the following attributes:

 x1: Specifies the x-coordinate of the start point of the gradient.

 y1: Specifies the y-coordinate of the start point of the gradient.

 x2: Specifies the x-coordinate of the end point of the gradient.

 y2: Specifies the y-coordinate of the end point of the gradient.

 The stop elements are used to define the colors of the gradient. Each stop element has the
following attributes:

 offset: Specifies the offset of the color along the gradient.

 color: Specifies the color of the gradient.

Eg: <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

<defs>

<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">

<stop offset="0%" stop-color="blue" />

<stop offset="100%" stop-color="red" />

</linearGradient>

</defs>

<rect x="50" y="50" width="100" height="100" fill="url(#myGradient)" />

</svg>
In this example, a linear gradient is defined with the id of "myGradient". The x1 and y1 attributes
specify the starting point of the gradient, while the x2 and y2 attributes specify the ending point. The
values for x1, y1, x2, and y2 can be specified as percentages or absolute values. In this case, the
gradient starts from the top-left corner (0%, 0%) and ends at the bottom-right corner (100%, 100%).

23. Explain Radial Gradient in SVG.

radial gradients in SVG allow you to create smooth color transitions radiating from a center point
outward. They are defined by specifying the center and radius of the gradient, as well as the color
stops along the way.
A radial gradient in SVG is a gradient that transitions between colors along a circular path. The circle
can be centered at any point in the SVG document, and it can have any radius.

The radialGradient element is used to define a radial gradient in SVG. The radialGradient element has
the following attributes:

 cx: Specifies the x-coordinate of the center of the gradient.

 cy: Specifies the y-coordinate of the center of the gradient.

 r: Specifies the radius of the gradient.

 fx: Specifies the x-coordinate of the focus point of the gradient.

 fy: Specifies the y-coordinate of the focus point of the gradient.

The stop elements are used to define the colors of the gradient. Each stop element has the following
attributes:

 offset: Specifies the offset of the color along the gradient.

 color: Specifies the color of the gradient.

To create a radial gradient, you need to define it within the <defs> section of your SVG document
using the <radialGradient> element. The <radialGradient> element requires an id attribute to
uniquely identify the gradient.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

<defs>

<radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

<stop offset="0%" stop-color="blue" />

<stop offset="100%" stop-color="red" />

</radialGradient>

</defs>

<rect x="50" y="50" width="100" height="100" fill="url(#myGradient)" />

</svg>
In this example, a radial gradient is defined with the id of "myGradient". The cx and cy attributes
specify the center point of the gradient, while the r attribute determines the radius of the gradient as
a percentage of the bounding box. The fx and fy attributes allow you to specify the focal point of the
gradient (optional).