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:

<!DOCTYPE html>
<html>
<body>

<svg width="500" height="500">
  <rect x="50" y="50" width="200" height="200" style="fill:green;stroke:orange;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
 
</body>
</html>

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

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

Example:

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="450">
  <line x1="5" y1="5" x2="150" y2="150" style="stroke:rgb(0,0,255);stroke-width:3" />
</svg>

</body>
</html>

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

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

Example:

<!DOCTYPE html>
<html>
<body>

<svg height="250" width="250">
  <circle cx="70" cy="70" r="40" stroke="red" stroke-width="3" fill="pink" />
</svg> 
 
</body>
</html>

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

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

Example:

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <path d="M250 10 L100 200 L400 200 Z" />
</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <polyline points="10,20 40,30 55,45 76,125 125,135 210,200" style="fill:none;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
      
      <h1>SVG Text</h1>
      
      <svg width="950" height="950">
         <g>
            <text x="40" y="23" >Text: </text>
            <text x="40" y="40" fill="rgb(121,0,121)">WWW.JavaTPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

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:

<!DOCTYPE html>
<html>
   <title>SVG Stroke Example</title>
   <body>
   
      <h1>SVG Stroke</h1>
      
      <svg width="500" height="500">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="blue" d="M 50 50 L 300 50" />
            <path stroke="orange" d="M 50 70 L 300 70" />
            <path stroke="red" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

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:

<!DOCTYPE html>
<html>
   <title>SVG Stroke Example</title>
   <body>
      
      <h1>SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="blue" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="orange" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="red" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

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:

<!DOCTYPE html>
<html>
   <title>SVG Stroke Example</title>
   <body>
      
      <h1>SVG Stroke</h1>
      
      <svg width="900" height="900">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="square" stroke-width="7" 
            stroke="blue" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="7" 
            stroke="orange" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="butt" stroke-width="7"
            stroke="red" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

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

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

Example:

<!DOCTYPE html>
<html>
   <title>SVG Stroke Example</title>
   <body>
   
      <h1>SVG Stroke</h1>
      
      <svg width="900" height="900">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="blue" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="orange" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20, 10, 5, 5, 5, 10" stroke-width="6" 
            stroke="red" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

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

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

Example:

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.javatpoint.org/2000/svg"
    xmlns:xlink="http://www.javatpoint.org/1999/xlink">
    
    <g>
      <line x1="10" y1="10" x2="90" y2="10"
          style="stroke:green;"/>

      <rect x="10" y="25" height="45" width="80"
          style="stroke: black; fill: red; stroke-width:2"/>

      <text x="10" y="100" style="stroke: blue; fill:orange">
        Text grouped with shapes</text>
    </g>

</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="T2">
<feTurbulence baseFrequency=".06" type="fractalNoise"/>
</filter>
<rect x="30" y="10" height="100" width="100" filter="url(#T2)"/>

</svg>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>

<h2>Blur effect</h2>

<svg height="250" width="250">
<filter id="p1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />

</svg>
</body>
</html>

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:

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>SVG Pattern</h1>
      
      <svg width="950" height="950">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 3 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="orange" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="40" >Triangle using the Pattern </text>
            <rect x="100" y="100" width="300" height="300" stroke="orange" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

26) What are Gradients in SVG?

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

SVG gradients are two types:

Linear Gradient
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:

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" />
</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" />
</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>

<svg xmlns="http://www.javatpoint.org/2000/svg"
xmlns:xlink="http://www.javatpoint.org/1999/xlink">

<circle cx="70" cy="70" r="30" style="fill: purple; fill-opacity: .5; stroke:     black; stroke-width: 1.5;">
<animate
 attributeName="r" attributeType="XML" 
 from="30" to="50" begin="0s" dur="6s" fill="freeze" />
</circle>

</svg>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<a xlink:href="https://www.javatpoint.com/svg-tutorial">
<circle cx="50" cy="80" r="20" style="fill: red;"/>
<rect x="90" y="60" width="40" height="40" style="fill: green;"/>
</a>

</svg>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <defs>
      <clipPath id="clip">
          <rect x="15" y="15" width="40" height="40" />
      </clipPath>
  </defs>

  <circle cx="25" cy="25" r="30"
          style="fill: #0000ff; clip-path: url(#clip); " />
</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
 <defs>
  <mask id="mask1" x="0" y="0" width="100" height="100" >
    <rect x="0" y="0" width="100" height="100"
        style="stroke:none; fill: #ffffff"/>
  </mask>
</defs>

<rect x="1" y="1" width="200" height="200"
    style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
</svg>

</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="0" y1="0" x2="100" y2="0" style="stroke: black; stroke-width: 2"/>
<line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2;"/>

<rect x="70" y="30" width="20" height="20" style="fill: gray;"/>
<rect x="70" y="30" width="20" height="20"
 transform="rotate(45)" style="fill: black;"/>

</svg>
</body>
</html>

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:

<circle 
cx="70" cy="70" r="40" 
stroke="red" 
stroke-width="3" 
fill="pink" >

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:

<rect
x="50" y="50" 
width="200" height="200" 
style="fill:red; 
stroke:black; 
stroke-width:5; 
fill-opacity:0.2; 
stroke-opacity:0.9" >

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:

<ellipse 
cx="250" cy="100" 
rx="120" ry="70" 
style="fill:red;
stroke:black;
stroke-width:3" > 

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:

<path 
d="M250 10 L100 200 L400 200 Z">

SEO Interview Questions	HTML Interview Questions
PL/SQL Interview Questions	SQL Interview Questions
Oracle Interview Questions	Android Interview Questions
SQL Server Interview Questions	MySQL Interview Questions
Java Basics Interview Questions	Java OOPs Interview Questions
Spring Interview Questions	Hibernate Interview Questions