Explore topic-wise InterviewSolutions in .

When commands are in Upper case, these represents absolute path. In case their lower case commands are used, then relative path is used.

Z command of path element closes the path.

A command of path element creates a elliptical arc.

T command of path element creates a smooth quadratic Bezier curve.

Q command of path element creates a quadratic Bezier curve.

S command of path element creates a smooth curve.

C command of path element creates a curve.

V command of path element creates a vertical line.

H command of path element creates a horizontal line.

L command of path element creates a line.

M command of path element move from one point to another point.

'path' tag of SVG is used to draw a free flow path. Following is the commonly used attribute −

d − path data,usually a set of commands like moveto, lineto etc.

Example −

<path d = "M 100 100 L 300 100 L 200 300 z" stroke = "black" stroke-width = "3" fill = "rgb(121,0,121)">

'polyline' tag of SVG is used to draw a open ended polygon. Following is the commonly used attribute −

points − List of points to make up a polygon.

Example −

<polyline points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" stroke = "black" stroke-width = "3" fill = "none">

'polygon' tag of SVG is used to draw a polygon. Following is the commonly used attribute −

points - List of points to make up a polygon.

Example −

<polygon points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" stroke = "black" stroke-width = "3" fill = "rgb(121,0,121)">

'line' tag of SVG is used to draw a line. Following are the commonly used attributes −

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

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

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

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

Example −

<line x1 = "20" y1 = "20" x2 = "150" y2 = "150" stroke = "black" stroke-width = "3" fill = "rgb(121,0,121)">

'ellipse' tag of SVG is used to draw a ellipse. Following are the commonly used attributes −

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

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

• rx − x-axis radius of the ellipse.

• ry − y-axis radius of the ellipse.

Example −

<ellipse cx = "100" cy = "100" rx = "90" ry = "50" stroke = "black" stroke-width = "3" fill = "rgb(121,0,121)">

'circle' tag of SVG is used to draw a circle. Following are the commonly used attributes −

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

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

• r − radius of the circle.

Example −

<circle cx = "100" cy = "100" r = "50" stroke = "black" stroke-width = "3" fill = "rgb(121,0,121)" >

'rect' tag of SVG is used to draw a rectangle. Following are the commonly used attributes −

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

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

• width − width of the rectangle.

• height − height of the rectangle.

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

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

Example −

<rect x = "100" y = "30" width = "300" height = "100" style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >

SVG image can be embedded using following ways −

• using embed tag

• using object tag

• using iframe

<a> element is used to create hyperlink. "xlink:href" attribute is used to pass the IRI (Internationalized Resource Identifiers) which is complementary to URI (Uniform Resource Identifiers).

In javascript functions, event represents current event and can be used to get the target element on which event got raised.

In javascript functions, document represents SVG document and can be used to get the SVG elements.

Yes! SVG elements support mouse events, keyboard events. We've used onClick event to call a javascript functions.

Yes! SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.

Yes! SVG images can be made responsive to user actions. SVG supports pointer events, keyboard events and document events.

Radial Gradients represents circular transition of one color to another from one direction to another. It is defined using <radialGradient> element.

Linear Gradients represents linear transition of one color to another from one direction to another. It is defined using <linearGradient> element.

Gradient refers to smooth transition of one color to another color within a shape. SVG provides two types of gradients −

• Linear Gradients

• Radial Gradients

SVG uses <pattern> element to define patterns. Patterns are defined using <pattern> element and are used to fill graphics elements in tiled fashion.

SVG provides a rich set of filters. Following is the list of the commonly used filters −

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

SVG uses <filter> element to define filters. <filter> element uses an id attribute to uniquely identify it.Filters are defined within <def> elements and then are referenced by graphics elements by their ids.

'stroke-dasharray' property used to create dashed lines.

'stroke-linecap' property defines different types of ending of a line or outline of any path.

'stroke-width' property defines thickness of text, line or outline of any element.

'stroke' property defines color of text, line or outline of any element.

'textlength' attribute of text tag of SVG sets the rendering length of the text.

'rotation' attribute of text tag of SVG sets the rotation to be applied to all glyphs.

'dy' attribute of text tag of SVG represents the shift along with y-axis.

'dx' attribute of text tag of SVG represents the shift along with x-axis.

'y' attribute of text tag of SVG represents the y axis cordinates of glyphs.

'x' attribute of text tag of SVG represents the x axis cordinates of glyphs.

'text' tag of SVG is used to draw text.

'path' tag of SVG is used to draw any path.

'polyline' tag of SVG is used to draw a open shape consisting of connected straight lines.

'polygon' tag of SVG is used to draw a closed shape consisting of connected straight lines.

'line' tag of SVG is used to draw a line.

'ellipse' tag of SVG is used to draw a ellipse.

'circle' tag of SVG is used to draw a circle.

'rect' tag of SVG is used to draw a rectangle.

Following are the disadvantages of using SVG images −

• Being text format size is larger then compared to binary formatted raster images.

• Size can be big even for small image.