31.Can SVG images be made responsive to user actions?
Yes! SVG images can be made responsive to user actions. SVG supports pointer events, keyboard events and document events.
32.Can we write javascript functions in SVG images?
Yes! SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.
33.Are mouse events, keyboard events supported in SVG?
Yes! SVG elements support mouse events, keyboard events. We’ve used onClick event to call a javascript functions.
34.How to get a SVG document using javascript?
In javascript functions, document represents SVG document and can be used to get the SVG elements.
35.How to get a active SVG element using javascript?
In javascript functions, event represents current event and can be used to get the target element on which event got raised.
36.Which element of SVG is used to create links?
<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).
37.How will you embed an SVG image in HTML page?
SVG image can be embedded using following ways −
using embed tag
using object tag
using iframe
38.How to draw a rectangle in SVG?
‘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)” >
39.How to draw a circle in SVG?
‘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)” >
40.How to draw a ellipse in SVG?
‘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)”>
How to draw a line in SVG?
‘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)”>
