SVG Interview Questions with Answers

SVG Interview Questions
Download SVG Interview Questions PDF

Below are the list of Best SVG Interview Questions and Answers

SVG stands for Scalable Vector Graphics.

You can add SVG on your webpage or HTML by using following any of following ways.

  • Using an <object> Tag
  • Using an <embed> Tag
  • Within an <iframe>
  • Using <svg> Tag
  • Using an <img> Tag
Advantages of SVG
  • Highly 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

VML stands for Vector Markup Language. It is a special type of language based on XML which is basically used to facilitate graphics on the internet including various websites. In recent times, VML capability has been implemented by Microsoft into its official web browser Internet explorer of version 5.0. SVG or Scalable Vector Graphics is also an XML based language. VML in SVG is used in describing images in vector format rather than its original format as an application of XML.

Basic predefined shapes available in SVG

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

Also, read 30 bootstrap interview questions 2020

Metadata is data about data. In SVG titles, descriptions, subjects, creators and other properties about the SVG image is its MetaData.
radialGradient is an element of SVG that allows authors to define radial gradients to fill or stroke graphical elements.It produces a ring (or rings) of color instead of stripes.Here is sample code to define an ellipse with a radial gradient from blue to red:

<svg height="150" width="500">


<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(0,0,255);

stop-opacity:0" />

<stop offset="100%" style="stop-color:(255,0,0);stop-opacity:1" />



<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />


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. VRML is also known as Virtual Reality Markup Language.
  • Internet Explorer 9+
  • Firefox 4+
  • Chrome 4+
  • Safari 4+
  • Opera 9.5+
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

Further Reading About SVG:

SVG is an open-standard XML format for two-dimensional vector graphics as defined by the World Wide Web Consortium. The SVG filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result. Some of the commonly used SVG filters are:

  • <feBlend> - filter for combining images.
  • <feColorMatrix> - filter for color transforms.
  • <feDistantLight> - filter for lighting
  • <fePointLight> - filter for lighting
  • <feSpotLight> - filter for lighting
  • <feOffset> - filter for drop shadows
  • <feDisplacementMap>


The SVG tag is used to draw any path. It can be also used to draw advanced shapes combined from lines, arcs, curves, etc. with or without fill.

The function used to the contents of the repository is Command svn list file:///home/mysurface/repo/programming_repo