SVG Interview Questions

SVG Interview Questions | Freshers & Experienced

  • Sharad Jaiswal
  • 07th Dec, 2021

About Svg

Scalable Vector Graphics (SVG) helps and does it very well to solve a part of that problem. Though they have their limitations, for certain occasions, SVGs can be very helpful and, if you have a great design team, you also can create a much more visually amazing experience without placing an unreasonable burden on the browser or hindering the load times.SVG is XML based vector image format for 2-dimensional graphics which supports interactivity and animation.SVG images are highly scalable and did NOT lose any quality when zoomed or resized. Here we are going to discuss some basic interview questions on SVG 2018.

Key Features of Svg

Below are few major features of Svg

Vector-based graphics

W3C Recommendation


Open Standard

Created with pure XML

Dynamic and interactive

Lossless data compression

Supports Gradients and patterns


Practice Best SVG Interview Questions and Answers;

Q1. What is SVG?

SVG stands for Scalable Vector Graphics. It is a standard graphics file type that is used for rendering two-dimensional images on the internet. It is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and to define vector-based graphics for the Web.

Q2. How to add SVG in HTML?

In order to add SVG on webpage or HTML, you can use the following tags mentioned below:

  • Using an <object> Tag
  • Using an <embed> Tag
  • Within an <iframe>
  • Using <svg> Tag
  • Using an <img> Tag

Q3. Enlist major advantages and disadvantages of SVG?

Some of the major advantages and disadvantages of SVG are as follows:

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


Q4. What is VML in SVG?

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. SVG uses VML for describing images in vector format rather than its original format as an application of XML.

Q5. What is VRML in SVG?

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

Q6. Enlist few predefined shapes available in SVG?

Some of the predefined shapes available in SVG are as follows :

  • Straight lines
  • Polygons
  • Circles
  • Ellipses
  • Rectangles with or without rounded corners

Q7. What is Radial Gradients in SVG?

SVG is consists of an element known as Radial Gradient in order to allow authors to define radial gradients to fill or stroke graphical elements. It can be defined by a center point, an ending shape, and two or more color-stop points. It produces a ring/rings of color instead of stripes. Syntax -

Q8. What are SVG filters? Enlist some commonly used filters?

The SVG filter is basically an effect that 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 as follows:

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


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

In SVG, the element is the SVG tag that is used to draw or create a rectangle and variations of a rectangle. For example -

  <svg width="800" height="220">
  <rect width="800" height="200" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />


Q10. What are SVG Patterns?

SVG pattern is basically an element that defines the pattern in graphics using HTML. You can use inside an SVG to create an SVG pattern. You can define the shapes inside of that and then you have to define the area of the shape by specifying its color, borders, etc.

Q11. List out different types of Gradients supported by SVG?

In SVG, Gradients consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. There are basically two types of Gradients supported by SVG:

  • Linear gradients 
  • Radial gradients


Q12. What is masking in SVG?

SVG is consists of a feature known as masking in SVG which is used to apply a mask to an SVG shape. This mask determines what parts of the SVG shape that is visible, and with what transparency. You can use an element inside an SVG document to add masking effects to HTML elements and other SVG graphics.

About Author :

  • Author of SVG Interview Questions

    Sharad Jaiswal

    My name is Sharad Jaiswal, and I am the founder of Conax web Solutions. My tech stacks are PHP, NodeJS, Angular, React. I love to write technical articles and programming blogs.

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.