SVG - Interview Questions

SVG stands for Scalable Vector Graphics.

SVG is a XML based format to draw vector images. It is used to draw two − dimentional vector images.

Following are the core features of SVG −

• SVG, Scalable Vector Graphics is an XML based language to define vector based graphics.

• SVG is intended to display images over the web.

• Being vector images, SVG image never loses quality no matter how they are zoomed out or resized.

• SVG images supports interactivity and animation.

• SVG is a W3C standard.

• Others image formats like raster images can also be clubbed with SVG images.

• SVG integrates well with XSLT and DOM of HTML.

Following are the advantages of using SVG images −

• Use any text editor to create and edit SVG images.

• Being XML based, SVG images are searchable, indexable and can be scripted and compressed.

• SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized.

• Good printing quality at any resolution.

• SVG is an Open Standard.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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 <pattern> element to define patterns. Patterns are defined using <pattern> element and are used to fill graphics elements in tiled fashion.

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

• Linear Gradients

• Radial Gradients

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

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

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

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

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

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

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

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

SVG image can be embedded using following ways −

• using embed tag

• using object tag

• using iframe

'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)" >

'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)" >

'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)">

'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)">

'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)">

'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">

'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)">

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

L command of path element creates a line.

H command of path element creates a horizontal line.

V command of path element creates a vertical line.

C command of path element creates a curve.

S command of path element creates a smooth curve.

Q command of path element creates a quadratic Bezier curve.

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

A command of path element creates a elliptical arc.

Z command of path element closes the path.

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