SVG Interview Questions and Answers

Q1. What is SVG?

Ans: Scalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control

Q2. What are the features of SVG?

Ans: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.

Q3. How to perform embed SVG in HTML?

Ans: SVG files are embedded into HTML documents by using , and tags.

• The tag is supported for all major browsers.
• The tag supports scripting.
• Adobe SVG view recommends to use the EMBED tag while embedding in HTML page.
• Note that the tag name is capitalized.
• Following is an example for tag:

< embed src="rectangle.svg" height="100" width="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" >

Q4. List some predefined shapes available in SVG?

Ans: Basic predefined shapes available in SVG

• straight lines,
• polygons,
• circles,
• ellipses,
• rectangles with or without rounded corners

Q5. What is SVG-VML-3D ?

Ans: SVG-VML-3D is a free JavaScript library which can be used to draw and manipulate 3D objects in html pages by using SVG or VML. The JavaScript code which has to be typed into the html page to define the Scene (3D Objects, Viewer Position, Light, ...) is the same for SVG and VML. If the browser is IE, then automatically VML will be used, otherwise SVG will be used.

Q6. What is Metadata?

Ans: Metadata is data about data. In SVG titles, descriptions, subjects, creators and other properties about the SVG image is its MetaData.

Q7. List some advantages and disadvantages of using SVG?

Ans:

Advantages of SVG

• Scalable
• Easy to create
• Smaller in Size
• Accessible DOM Node-Based API
• Easier to create very detailed graphics

Disadvantages of SVG

• Complex Development structure
• Performance issues
• Compatibility Issues

Q8. Mention what are the slider available in d3.js?

Ans: The slider available in d3.js are

• Default slider
• Slider with start value
• Slider with slide event
• Slider with slide event
• Slider with custom axis
• Slider with min, max, and step values
• Vertical Slider

Q9. Which tag of SVG is used to draw a rectangle?

Ans: ‘rect’ tag of SVG is used to draw a rectangle.

Q10. Which tag of SVG is used to draw a circle?

Ans: ‘circle’ tag of SVG is used to draw a circle.

Q11. Which tag of SVG is used to draw a ellipse?

Ans: ‘ellipse’ tag of SVG is used to draw a ellipse.

Q12. Which tag of SVG is used to draw a line?

Ans: ‘line’ tag of SVG is used to draw a line.

Q13. Explore the possibilities of SVG?

Ans: Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.
SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handled devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.
SVG is a royalty-free vendor-neutral open standard developed under the W3C (World Wide Web Consortium) Process.
Adobe has taken a leadership role in the development of the SVG specification and continues to ensure that its authoring tools are SVG compatible.

Q14. Define VRML?

Ans: VRML stands for Virtual Reality Modeling Language.It is an open Standard programming Language used for creating three-dimensional (3-D) designs and Web-based models, textures, and illusion. VRMLis also known as Virtual Reality Markup Language.

Q15. List major internet browsers support SVG

Ans:

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

Q16. Where you can use SVG images.

Ans: Following are few practical applications for SVG.

• Graphs
• Road Map
• Complex UI elements
• Logos and simple animated games.
• In creating Responsive Ads.
• Embedded Systems
• GIS and Mapping

Q17. Mention what does path generators include in it?

Ans: Path generator includes

• svg.line- Make a new line generator
• svg.line.radial- Make a new radial line generator
• svg.area – Make a new area generator
• svg.chord – Make a new chord generator and so on

Q18. Mention what is the difference between jQuery and d3.js?

Ans:

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

Q20. How to get a active SVG element using javascript?

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

Q21. Which stroke property defines thickness of text, line or outline of any element?

Ans: ‘stroke-width’ property defines thickness of text, line or outline of any element.

Q22. How to draw a rectangle in SVG?

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

Q23. What are SVG filters?

Ans: 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.

Q24. What are SVG Patterns?

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

Q25. How to draw a open ended polygon in SVG?

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

Q26. Can we write javascript functions in SVG images?

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

Q27. How to draw a free flow path in SVG?

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

Q28. Explain how you can several classes at once?

Ans: To set several classes at once you can use the object literal as
selection.classed({ ‘foo’:true, ‘bar’: false})

Q29. Are mouse events, keyboard events supported in SVG?

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

Q30.  What are available filters in SVG?

Ans: The available filters in SVG are:

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight