Javatpoint Logo
Javatpoint Logo
SVG Interview Questions

SVG Interview Questions

A list of top frequently asked SVG interview questions and answers are given below:

1) What is the full form of SVG?

The full form of SVG is scalable vector graphics.

2) What is SVG?

SVG is an XML based format. It is used to draw vector images of two-dimensions, and due to the vector image, if you zoom out or resize the SVG image, it will never lose quality.


3) Which tag is used to draw a rectangle in SVG?

The <rect> tag is used to draw a rectangle in SVG.

Example:


4) Which tag is used to draw a line in SVG?

The <line> tag is used to draw a line in SVG.

Example:


5) Which tag is used to draw a circle in SVG?

The <circle> tag is used to draw a circle in SVG.

Example:


6) Which tag is used to draw any path in SVG?

The <path> tag is used to draw any path in SVG.

Example:


7) Which tag is used to create an open shape of connected straight lines in SVG?

The <polyline> tag is used to create an open shape of connected straight lines in SVG.

Example:


8) Which tag is used to create a closed shape of connected straight lines in SVG?

The <polygon> tag is used to create a closed shape of connected straight lines in SVG.


9) Which tag is used to draw text in SVG?

The <text> tag is used to draw text in SVG.

Example:


10) Which command of path element creates a line?

"L" command is used to create a line.


11) Which command of path element closes the path in SVG?

"Z" command is used to close the path.


12) Which command of path element is used to move the cursor from one point to another point?

"M" command of path element is used to move the cursor from one point to another point.


13) Which command of path element is used to create a horizontal line?

"H" command of path element is used to create a horizontal line.


14) Which command of path element is used to create a vertical line?

"V" command of path element is used to create a vertical line.


15) Which command of path element is used to create a smooth curve?

"S" command of path element is used to create a smooth curve.


16) Which property of stroke defines the color of text, line or outline of an element?

The <stroke> property defines the color of the text, line or outline of an element in SVG.

Example:


17) Which property of stroke defines the thickness of text, line or outline of an element?

The <stroke-width> property defines the thickness of text, line or outline of an element.

Example:


18) Which property of stroke defines different types of ending of a line or outline of any path?

The <stroke-linecap> property defines different types of ending of a line or outline of any path.

Example:


19) Which property of stroke used to create dashed lines?

The <stroke-dasharray> property is used to create dashed lines.

Example:


20) Which SVG element is used to group SVG shapes?

The <g> element is used to group SVG shapes.

Example:


21) How to add SVG in HTML?

Use any of the following tag to add SVG in HTML:

  • Use an <object> tag
  • Use an <embed> tag
  • Use an <iframe> tag
  • Use <svg> tag
  • Use an <img> tag etc.

22) What is Filters in SVG?

The <filter> element of SVG is used to define the filter. It is used to add special effects to SVG graphics. The <filter> element uses an id attribute to identify it uniquely.

Example:


23) List some commonly used SVG filters?

A list some commonly used filters is as follows:

  • <feComposite>
  • <feColorMatrix>
  • <feMerge>
  • <feComponentTranfer>
  • <feImage>
  • <feComposite>
  • <feOffset>
  • <feGaussianBlur> etc.

24) Which filter is used to show blur effect in SVG?

SVG <feGaussianBlur> filter is used to show blur effect in SVG.

Example:


25) What is Pattern in SVG?

SVG <pattern> element is used to define patterns. It is used to fill graphics elements in tiled fashion.

Example:


26) What are Gradients in SVG?

Gradients define as a smooth transition from one color to another color.

SVG gradients are two types:

  1. Linear Gradient
  2. Radial Gradient

27) What is SVG Linear Gradient?

A Linear gradient is a transition from one color to another. The <linearGradient> element is used to define the linear gradient.

Example:


28) What is Radial Gradient?

The Radial gradient is a circular transition from one color to another. The <radialGradient> element is used to define the radial gradient.

Example:


29) List some major internet browser support SVG?

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

30) Which element is used to animate the SVG graphics?

The <animate> element is used to animate the SVG graphics.

Example:


31) Can images of SVG be made responsive to user actions?

Yes! Images of SVG can be made responsive to user action. SVG supports document event, keyboard events, and pointer events.


32) Can we write JavaScript functions in an SVG image?

Yes! We can write JavaScript function in an SVG image.


33) Which element is used to create links in SVG?

The <a> element is used to create links in SVG. The "xlink:href" attribute is used to specify the URL of link file.

Example:


34) Which element is used to clip an SVG shape according to a certain path?

The <clipPath> element is used to clip an SVG shape according to a certain path.

Example:


35) What is SVG masking?

SVG masking is used to determine that what part of the SVG shape is visible and with what transparency. SVG <mask> element defines the SVG masking.

Example:


36) Name some of the commonly used SVG tools?

Some of the commonly used SVG tools are as follows:

  • Inkscape
  • Adobe Illustrator
  • Apache Batik
  • Snap
  • SVG-edit

37) Which transformation is used to rotate the coordinate system by a specified angle?

The <rotate> element is used to rotate the coordinate system by a specified angle.

Example:


38) How to draw a circle in SVG?

SVG <circle> tag is used to draw a circle. The following attributes are used to draw a circle:

r: It defines the radius of the circle.

cx: It defines the x coordinates of the center of the circle.

cy: It defines the y coordinates of the center of the circle.

Example:


39) How to draw a rectangle in SVG?

SVG <rect> tag is used to draw a rectangle. The following attributes are used to draw a rectangle:

x: It defines the position of the top left corner of the rectangle.

y: It defines the position of the top right corner of the rectangle.

width: It defines the width of the rectangle.

height: It defines the height of the rectangle.

fill-opacity: It is used to define the opacity of the fill color. Its range can be 0 to 1.

stroke-opacity: It defines the opacity of the stroke color. Its range can be 0 to 1.

Example:


40) How to draw an ellipse in SVG?

SVG <ellipse> tag is used to draw an ellipse. The following attributes are used to draw an ellipse:

rx: It defines the horizontal radius.

ry: It defines the vertical radius.

cx: It defines the x coordinate of the center of the ellipse.

cy: It defines the y coordinate of the center of the ellipse.

Example:


41) How to draw a free flow path in SVG?

SVG <path> tag is used to draw a path. The following attributes are used to draw an ellipse:

d: It contains the path data which is usually a set of command like lineto, moveto, etc.

Example: