HTML SVG – Solved Practice Questions

By /

Introduction

SVG (Scalable Vector Graphics) is an XML-based format used to draw shapes, icons, charts, and illustrations directly in HTML. Unlike normal images, SVG graphics remain sharp when resized because they are vector-based. In this chapter, you’ll learn the basics of HTML SVG through beginner-friendly solved practice questions.

Question 1

Problem Statement

Create a simple SVG drawing area.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Example</title>
</head>
<body>

    <h1>Simple SVG</h1>

    <svg width="300" height="150"
         style="border:1px solid black;">
    </svg>

</body>
</html>

Output

Simple SVG

+----------------------------+
|                            |
|                            |
|                            |
+----------------------------+

Step-by-Step Explanation

  • <svg> creates a drawing area.
  • width defines the width.
  • height defines the height.
  • The border makes the SVG area visible.

Question 2

Problem Statement

Draw a rectangle using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Rectangle</title>
</head>
<body>

<svg width="300" height="180">

    <rect
        x="40"
        y="30"
        width="180"
        height="80"
        fill="skyblue"
        stroke="black"
        stroke-width="2">
    </rect>

</svg>

</body>
</html>

Output

A sky-blue rectangle with a black border appears.

Step-by-Step Explanation

  • <rect> draws a rectangle.
  • x and y set its position.
  • fill adds the inside color.
  • stroke adds the border color.

Question 3

Problem Statement

Draw a circle using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Circle</title>
</head>
<body>

<svg width="300" height="200">

    <circle
        cx="120"
        cy="90"
        r="60"
        fill="orange"
        stroke="black"
        stroke-width="2">
    </circle>

</svg>

</body>
</html>

Output

An orange circle with a black border appears.

Step-by-Step Explanation

  • <circle> draws a circle.
  • cx and cy define the center.
  • r specifies the radius.
  • fill and stroke control colors.

Question 4

Problem Statement

Draw a line using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Line</title>
</head>
<body>

<svg width="300" height="180">

    <line
        x1="20"
        y1="20"
        x2="250"
        y2="120"
        stroke="red"
        stroke-width="4">
    </line>

</svg>

</body>
</html>

Output

A red diagonal line appears.

Step-by-Step Explanation

  • <line> creates a straight line.
  • x1, y1 define the starting point.
  • x2, y2 define the ending point.
  • stroke sets the line color.

Question 5

Problem Statement

Draw an ellipse using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Ellipse</title>
</head>
<body>

<svg width="320" height="200">

    <ellipse
        cx="150"
        cy="90"
        rx="90"
        ry="50"
        fill="lightgreen"
        stroke="black"
        stroke-width="2">
    </ellipse>

</svg>

</body>
</html>

Output

A light green ellipse with a black border appears.

Step-by-Step Explanation

  • <ellipse> draws an oval shape.
  • cx and cy specify the center.
  • rx defines the horizontal radius.
  • ry defines the vertical radius.

Question 6

Problem Statement

Draw a polygon using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Polygon</title>
</head>
<body>

<svg width="300" height="220">

    <polygon
        points="150,20 280,180 20,180"
        fill="gold"
        stroke="black"
        stroke-width="2">
    </polygon>

</svg>

</body>
</html>

Output

A gold-colored triangle with a black border appears.

Step-by-Step Explanation

  • <polygon> creates a closed shape.
  • The points attribute defines each corner.
  • The browser automatically connects the points.

Question 7

Problem Statement

Draw a polyline using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Polyline</title>
</head>
<body>

<svg width="320" height="180">

    <polyline
        points="20,100 80,40 140,100 200,40 260,100"
        fill="none"
        stroke="blue"
        stroke-width="4">
    </polyline>

</svg>

</body>
</html>

Output

A blue zigzag line appears.

Step-by-Step Explanation

  • <polyline> draws multiple connected lines.
  • Unlike <polygon>, it does not close the shape automatically.
  • It is useful for graphs and line charts.

Question 8

Problem Statement

Display text using SVG.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Text</title>
</head>
<body>

<svg width="350" height="120">

    <text
        x="30"
        y="70"
        font-size="30"
        fill="purple">
        Learn SVG
    </text>

</svg>

</body>
</html>

Output

Learn SVG

Step-by-Step Explanation

  • <text> displays text inside the SVG.
  • x and y determine the text position.
  • font-size changes the text size.
  • fill changes the text color.

Question 9

Problem Statement

Draw multiple SVG shapes in one drawing.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple SVG Shapes</title>
</head>
<body>

<svg width="400" height="220">

    <rect
        x="20"
        y="20"
        width="100"
        height="60"
        fill="skyblue">
    </rect>

    <circle
        cx="220"
        cy="50"
        r="35"
        fill="orange">
    </circle>

    <line
        x1="20"
        y1="150"
        x2="350"
        y2="150"
        stroke="red"
        stroke-width="3">
    </line>

</svg>

</body>
</html>

Output

A blue rectangle, an orange circle, and a red horizontal line appear.

Step-by-Step Explanation

  • One SVG can contain multiple shapes.
  • Each element is drawn independently.
  • Shapes can be combined to create illustrations and diagrams.

Question 10

Problem Statement

Create a complete SVG example with different shapes and text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Complete SVG Example</title>
</head>
<body>

<svg
width="450"
height="250"
style="border:1px solid black;">

    <rect
        x="20"
        y="20"
        width="120"
        height="70"
        fill="lightblue">
    </rect>

    <circle
        cx="240"
        cy="55"
        r="35"
        fill="orange">
    </circle>

    <ellipse
        cx="360"
        cy="55"
        rx="45"
        ry="25"
        fill="lightgreen">
    </ellipse>

    <line
        x1="20"
        y1="140"
        x2="420"
        y2="140"
        stroke="red"
        stroke-width="3">
    </line>

    <text
        x="120"
        y="210"
        font-size="28"
        fill="purple">
        HTML SVG
    </text>

</svg>

</body>
</html>

Output

A webpage displays:

• A light blue rectangle
• An orange circle
• A light green ellipse
• A red horizontal line
• Purple text reading "HTML SVG"

Step-by-Step Explanation

  • Multiple SVG elements can be used together.
  • Each shape has its own attributes.
  • SVG graphics remain sharp at any size.
  • SVG is ideal for icons, logos, diagrams, and charts.

Key Takeaways

  • <svg> creates a scalable vector graphics area.
  • SVG graphics remain sharp when resized.
  • <rect> draws rectangles.
  • <circle> draws circles.
  • <ellipse> creates oval shapes.
  • <line> draws straight lines.
  • <polygon> creates closed shapes.
  • <polyline> creates connected open lines.
  • <text> displays text inside an SVG.
  • SVG is widely used for icons, logos, charts, and illustrations.

Frequently Asked Questions (FAQs)

1. What is SVG?

SVG (Scalable Vector Graphics) is an XML-based format for creating vector graphics in HTML.

2. What is the advantage of SVG over normal images?

SVG images remain clear and sharp at any size without losing quality.

3. Which SVG element draws a rectangle?

The <rect> element.

4. Which SVG element draws a circle?

The <circle> element.

5. What is the difference between <polygon> and <polyline>?

<polygon> creates a closed shape, while <polyline> creates an open connected line.

6. Can SVG display text?

Yes. The <text> element displays text inside an SVG.

7. Is SVG responsive?

Yes. SVG graphics can scale without losing quality.

8. Where is SVG commonly used?

SVG is used for logos, icons, charts, diagrams, maps, and illustrations.

9. Is SVG supported by modern browsers?

Yes. All major modern browsers support SVG.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top