1. What SVG stands for?
SVG stands for Scalable Vector Graphics.
2. What is SVG?
SVG is a XML based format to draw vector images. It is used to draw two - dimensional vector images.
3. What are the features of SVG?
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.
4. What are the advantages of using SVG?
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.
5. What are the disadvantages of using SVG?
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.
6. Which tag of SVG is used to draw a rectangle?
'rect' tag of SVG is used to draw a rectangle.
7. Which tag of SVG is used to draw a circle?
'circle' tag of SVG is used to draw a circle.
8. Which tag of SVG is used to draw a ellipse?
'ellipse' tag of SVG is used to draw a ellipse.
9. Which tag of SVG is used to draw a line?
'line' tag of SVG is used to draw a line.
10. Which tag of SVG is used to draw a closed shape consisting of connected straight lines?
'polygon' tag of SVG is used to draw a closed shape consisting of connected straight lines.
SVG Interview Questions with Answers pdf
11. Which tag of SVG is used to draw a open shape consisting of connected straight lines?
'polyline' tag of SVG is used to draw a open shape consisting of connected straight lines.
12. Which tag of SVG is used to draw any path?
'path' tag of SVG is used to draw any path.
13. Which tag of SVG is used to draw text?
'text' tag of SVG is used to draw text.
14. Which attribute of text tag of SVG represents the x axis cordinates of glyphs?
'x' attribute of text tag of SVG represents the x axis cordinates of glyphs.
15. Which attribute of text tag of SVG represents the y axis cordinates of glyphs?
'y' attribute of text tag of SVG represents the y axis cordinates of glyphs.
16. Which attribute of text tag of SVG represents the shift along with x-axis?
'dx' attribute of text tag of SVG represents the shift along with x-axis.
17. Which attribute of text tag of SVG represents the shift along with y-axis?
'dy' attribute of text tag of SVG represents the shift along with y-axis.
18. Which attribute of text tag of SVG sets the rotation to be applied to all glyphs?
'rotation' attribute of text tag of SVG sets the rotation to be applied to all glyphs.
19. Which attribute of text tag of SVG sets the rendering length of the text?
'textlength' attribute of text tag of SVG sets the rendering length of the text.
20. Which stroke property defines color of text, line or outline of any element?
'stroke' property defines color of text, line or outline of any element.
21. Which stroke property defines thickness of text, line or outline of any element?
'stroke-width' property defines thickness of text, line or outline of any element.
22. Which stroke property defines different types of ending of a line or outline of any path?
'stroke-linecap' property defines different types of ending of a line or outline of any path.
23. Which stroke property used to create dashed lines?
'stroke-dasharray' property used to create dashed lines.
24. What are SVG filters?
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.
25. Name some of the commonly used filers.
SVG provides a rich set of filters. Following is the list of the commonly used filters -
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
26. What are SVG Patterns?
SVG uses <pattern> element to define patterns. Patterns are defined using <pattern> element and are used to fill graphics elements in tiled fashion.
27. What are SVG Gradients?
Gradient refers to smooth transition of one color to another color within a shape.
SVG provides two types of gradients:
Linear Gradients
Radial Gradients
28. What is Linear Gradients in SVG
Linear Gradients represents linear transition of one color to another from one direction to another.
It is defined using <linearGradient> element.
29. What is Radial Gradients in SVG
Radial Gradients represents circular transition of one color to another from one direction to another. It is defined using <radialGradient> element.
30. 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.
31. 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.
32. 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.
33. How to get a SVG document using javascript?
In javascript functions, document represents SVG document and can be used to get the SVG elements.
34. 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.
35. 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
InternationalizedResourceIdentifiers which is complementary to URI UniformResourceIdentifiers.
36. 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
37. 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)" >
38. 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)" >
39. 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)">
40. 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)">
41. How to draw a close ended polygon in SVG?
'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)">
42. How to draw a open ended polygon in SVG?
'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">
43. How to draw a free flow path in SVG?
'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)">
44. Which command of path element moves cursor from one point to another point?
M command of path element move from one point to another point.
45. Which command of path element creates a line?
L command of path element creates a line.
SVG stands for Scalable Vector Graphics.
2. What is SVG?
SVG is a XML based format to draw vector images. It is used to draw two - dimensional vector images.
3. What are the features of SVG?
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.
4. What are the advantages of using SVG?
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.
5. What are the disadvantages of using SVG?
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.
6. Which tag of SVG is used to draw a rectangle?
'rect' tag of SVG is used to draw a rectangle.
7. Which tag of SVG is used to draw a circle?
'circle' tag of SVG is used to draw a circle.
8. Which tag of SVG is used to draw a ellipse?
'ellipse' tag of SVG is used to draw a ellipse.
9. Which tag of SVG is used to draw a line?
'line' tag of SVG is used to draw a line.
10. Which tag of SVG is used to draw a closed shape consisting of connected straight lines?
'polygon' tag of SVG is used to draw a closed shape consisting of connected straight lines.
SVG Interview Questions with Answers pdf
11. Which tag of SVG is used to draw a open shape consisting of connected straight lines?
'polyline' tag of SVG is used to draw a open shape consisting of connected straight lines.
12. Which tag of SVG is used to draw any path?
'path' tag of SVG is used to draw any path.
13. Which tag of SVG is used to draw text?
'text' tag of SVG is used to draw text.
14. Which attribute of text tag of SVG represents the x axis cordinates of glyphs?
'x' attribute of text tag of SVG represents the x axis cordinates of glyphs.
15. Which attribute of text tag of SVG represents the y axis cordinates of glyphs?
'y' attribute of text tag of SVG represents the y axis cordinates of glyphs.
16. Which attribute of text tag of SVG represents the shift along with x-axis?
'dx' attribute of text tag of SVG represents the shift along with x-axis.
17. Which attribute of text tag of SVG represents the shift along with y-axis?
'dy' attribute of text tag of SVG represents the shift along with y-axis.
18. Which attribute of text tag of SVG sets the rotation to be applied to all glyphs?
'rotation' attribute of text tag of SVG sets the rotation to be applied to all glyphs.
19. Which attribute of text tag of SVG sets the rendering length of the text?
'textlength' attribute of text tag of SVG sets the rendering length of the text.
20. Which stroke property defines color of text, line or outline of any element?
'stroke' property defines color of text, line or outline of any element.
21. Which stroke property defines thickness of text, line or outline of any element?
'stroke-width' property defines thickness of text, line or outline of any element.
22. Which stroke property defines different types of ending of a line or outline of any path?
'stroke-linecap' property defines different types of ending of a line or outline of any path.
23. Which stroke property used to create dashed lines?
'stroke-dasharray' property used to create dashed lines.
24. What are SVG filters?
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.
25. Name some of the commonly used filers.
SVG provides a rich set of filters. Following is the list of the commonly used filters -
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
26. What are SVG Patterns?
SVG uses <pattern> element to define patterns. Patterns are defined using <pattern> element and are used to fill graphics elements in tiled fashion.
27. What are SVG Gradients?
Gradient refers to smooth transition of one color to another color within a shape.
SVG provides two types of gradients:
Linear Gradients
Radial Gradients
28. What is Linear Gradients in SVG
Linear Gradients represents linear transition of one color to another from one direction to another.
It is defined using <linearGradient> element.
29. What is Radial Gradients in SVG
Radial Gradients represents circular transition of one color to another from one direction to another. It is defined using <radialGradient> element.
30. 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.
31. 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.
32. 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.
33. How to get a SVG document using javascript?
In javascript functions, document represents SVG document and can be used to get the SVG elements.
34. 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.
35. 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
InternationalizedResourceIdentifiers which is complementary to URI UniformResourceIdentifiers.
36. 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
37. 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)" >
38. 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)" >
39. 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)">
40. 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)">
41. How to draw a close ended polygon in SVG?
'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)">
42. How to draw a open ended polygon in SVG?
'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">
43. How to draw a free flow path in SVG?
'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)">
44. Which command of path element moves cursor from one point to another point?
M command of path element move from one point to another point.
45. Which command of path element creates a line?
L command of path element creates a line.
No comments:
Post a Comment