• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML SVG

← Previous Next →

SVG stands for Scalable Vector Graphics. It is an XML-based format used to draw shapes, lines, icons, logos and illustrations directly in the browser. Unlike images made of pixels, SVG graphics are made of mathematical paths. This means they do not lose quality when resized. SVG is ideal for responsive websites, dashboards, diagrams and anywhere you need sharp graphics at any size. In this chapter, you will learn how SVG works, how to write SVG code, how to draw common shapes and how it differs from canvas.

What Is SVG

SVG is a markup language, similar to HTML, but created for graphics. Shapes in SVG are elements like <circle>, <rect>, <line> and <path>. You style these shapes using attributes such as fill, stroke and stroke-width. The browser reads the SVG and draws each shape as a separate object. Because SVG elements live in the DOM, you can style them with CSS and interact with them with JavaScript.

Basic SVG Syntax

<svg width="200" height="150">
  <circle cx="80" cy="75" r="40" fill="lightblue" />
</svg>

This simple example shows a circle drawn inside an SVG container.

Why Use SVG

SVG is useful because it stays sharp at any size. If you zoom in, the edges remain crisp. This makes SVG a popular choice for:

  • icons

  • charts

  • logos

  • buttons

  • UI illustrations

  • interactive diagrams

Because SVG can be animated and styled with CSS, it works well for modern web interfaces.

SVG Container and Viewport

Every SVG graphic starts with the <svg> tag. You define its width and height like a normal element. SVG also supports a special attribute called viewBox that helps control the internal drawing area.

Example

<svg width="300" height="200" viewBox="0 0 300 200">
</svg>

The viewBox controls scaling. It is very useful when you want your SVG to resize properly on different screens.

Drawing Rectangles in SVG

Rectangles are created using the <rect> element. You can control position, size, corner radius and colors.

Example

<svg width="300" height="200">
  <rect x="20" y="20" width="120" height="80" fill="lightgreen" stroke="black" />
</svg>

x and y define the position. rx and ry can be added for rounded corners.

Drawing Circles and Ellipses

SVG has separate elements for circles and ellipses.

Circle Example

<svg width="200" height="150">
  <circle cx="80" cy="70" r="40" fill="orange" />
</svg>

Ellipse Example

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="60" ry="30" fill="pink" />
</svg>

Circles use one radius. Ellipses use two (horizontal and vertical).

Drawing Lines and Polylines

Lines are created using the <line> element. For more complex shapes, you can use <polyline>.

Line Example

<svg width="300" height="150">
  <line x1="20" y1="20" x2="200" y2="20" stroke="red" stroke-width="3" />
</svg>

Polyline Example

<svg width="300" height="150">
  <polyline points="20,20 100,50 180,20 260,80" 
            fill="none" stroke="blue" stroke-width="2" />
</svg>

A polyline is useful for graphs and diagrams.

Drawing Polygons

Polygons are closed shapes with straight lines.

Example

<svg width="300" height="150">
  <polygon points="30,30 80,100 130,30" 
           fill="yellow" stroke="black" />
</svg>

This example shows a triangle.

The Path Element

The <path> element is the most powerful drawing tool in SVG. It uses commands to draw curves, straight lines and complex shapes.

Example

<svg width="300" height="200">
  <path d="M20 20 L150 20 C200 60 200 100 150 140" 
        stroke="purple" fill="none" />
</svg>

Some basic path commands:

  • M – move to

  • L – line to

  • C – curve

  • Z – close path

Most icons and logos you see on websites are made using <path>.

Filling and Stroking SVG Shapes

SVG shapes support these styling attributes:

  • fill

  • stroke

  • stroke-width

  • stroke-linejoin

  • stroke-linecap

Example

<svg width="200" height="150">
  <rect x="20" y="20" width="120" height="60" 
        fill="skyblue" stroke="black" stroke-width="3"
        stroke-linejoin="round" />
</svg>

These styling options give you complete control over the appearance.

Adding Text in SVG

SVG text behaves like normal shapes. You can position it anywhere.

Example

<svg width="300" height="150">
  <text x="20" y="40" font-size="24" fill="green">
    SVG Title
  </text>
</svg>

You can rotate, animate and style this text using CSS.

Embedding Images inside SVG

SVG supports images using the <image> tag.

Example

<svg width="300" height="200">
  <image href="photo.jpg" x="20" y="20" width="150" height="100" />
</svg>

This is helpful when mixing vector graphics with photos.

SVG Animation Basics

SVG supports animation through the <animate> element. You can animate colors, positions, sizes and more.

Example

<svg width="200" height="150">
  <circle cx="40" cy="70" r="20" fill="tomato">
    <animate attributeName="cx" from="40" to="160" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

This moves the circle left to right continuously.

SVG vs Canvas

Both SVG and canvas can draw graphics, but they work differently.

SVG Strengths

  • sharp at any size

  • easier for diagrams and UI icons

  • supports CSS styling

  • supports interactivity with DOM events

Canvas Strengths

  • better for animations

  • faster for large data

  • ideal for games and continuous drawing

Choose SVG for static designs or UI elements. Choose canvas for dynamic graphics.

Complete Example Combining Shapes, Text and Lines

<svg width="400" height="220">
  <rect x="20" y="20" width="120" height="70" fill="lightblue" stroke="black" />

  <circle cx="200" cy="60" r="40" fill="pink" />

  <line x1="20" y1="130" x2="350" y2="130" stroke="gray" stroke-width="2" />

  <text x="20" y="180" font-size="20" fill="black">
    SVG Demo Graphic
  </text>
</svg>

This combines shapes and text to form a simple illustration.

Summary of HTML SVG

SVG allows you to create sharp, scalable graphics directly in your web pages. You learned how to draw rectangles, circles, ellipses, lines, polygons, polylines and paths. You also learned how to style these shapes, add text, embed images and even animate elements. SVG is ideal for icons, logos, diagrams and responsive graphics that stay crisp on any screen size.

Practice Questions

Q1. Draw a red rectangle of 200x100 size using SVG.

Q2. Create a green circle with a radius of 40 pixels.

Q3. Add a line from top-left to bottom-right of a 200x100 area.

Q4. Display the text "Welcome to SVG" using the <text> element.

Q5. Create a blue ellipse with rx=50 and ry=25.

Q6. Use <polygon> to create a triangle.

Q7. Style an SVG shape using CSS instead of style attribute.

Q8. Animate a circle’s radius using CSS or JavaScript.

Q9. Use <path> to draw a complex wave shape.

Q10. Create a group of SVG shapes using <g> tag and apply a transformation.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top