HTML svg Tag: Scalable Vector Graphics for the Web

The <svg> tag in HTML helps you draw graphics that scale cleanly at any size. You can animate shapes and add interactivity. Also, you can style it with CSS.

Understand the <svg> Tag in HTML

The <svg> tag creates vector graphics in HTML. It works like a container for shapes and paths. You can also use texts and more with it and use it to draw things directly in the browser.

SVG started in 1999 as a W3C recommendation. By 2011, most modern browsers supported it.

A basic SVG includes an open tag and a close tag. Inside them are the shape elements.

Here is an example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

You can embed SVG inline in HTML or link to an external file. Inline gives full control with CSS and JS. External SVG reduces clutter and lets you reuse files.

SVG works in all major browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera.

It also works on Android and iOS.

Here is some advice:

• Remove unused shapes
• Use short attribute names
• Minify with tools like SVGO
• Reuse patterns and symbols

Common SVG Elements

The <circle> element:

Draws a round shape.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

The <rect> element:

Draws a rectangle or square.

<svg width="100" height="100">
  <rect width="80" height="50" x="10" y="25" fill="green" />
</svg>

The <line> element:

Creates a straight line.

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>

The <polygon> element:

Draws a shape with many sides.

<svg width="100" height="100">
  <polygon points="50,10 90,90 10,90" fill="purple" />
</svg>

The <text> element:

Displays text inside the SVG.

<svg width="200" height="60">
  <text x="10" y="35" font-size="30" fill="black">Hello SVG</text>
</svg>

Attributes of the SVG Tag

Here are the basic key attributes:

• width and height to set the size
• viewBox controls the coordinate system
• fill sets the inside color
• stroke adds an outline

How do these attributes change the way the page looks?

The viewBox scales the content while the width and height control how much space the SVG takes. fill and stroke change color and border.

The Inline SVG in HTML

Inline SVG goes straight inside the HTML body. It loads with the page and lets you style or animate parts with CSS or JS.

Here is an example

<!DOCTYPE html>
<html>
<body>

<h1>Show the inline SVG Element</h1>

 <svg width="100" height="100">
  <circle cx="50" cy="50" r="45" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>

</body>
</html>

This draws a circle with a light blue fill and a blue border. You can adjust styles and position directly.

How to Style <svg> Tag in HTML

You can style SVG shapes with CSS just like HTML elements. Here are the commonly used styles:

• fill
• stroke
• stroke-width

You can also use the inline styles or CSS classes; both work.

<svg width="100" height="100" class="icon">
  <rect width="90" height="90" x="5" y="5" />
</svg>

<style>
  .icon rect {
    fill: orange;
    stroke: black;
    stroke-width: 4;
  }
</style>

This SVG draws an orange square with a black border. The class controls the rectangle style with CSS.

SVG vs <img> Tag for Vector Graphics

Use <svg> when you need animation or interaction. You can use <img> to display static SVG files with no change.

Here is a table that shows you key differences:

Examples

Animated Circle Loader:

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" stroke="gray" stroke-width="10" fill="none" />
  <circle cx="60" cy="60" r="50" stroke="blue" stroke-width="10" fill="none"
    stroke-dasharray="314" stroke-dashoffset="314">
    <animate attributeName="stroke-dashoffset" from="314" to="0" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

This example draws a circular loader with a blue ring that spins with animate. The dashed line moves to show that the page loads.

Tooltip on Hover:

<svg width="200" height="100">
  <rect width="200" height="100" fill="skyblue" />
  <title>This is a tooltip</title>
</svg>

This rectangle shows a tooltip when you hover. The <title> tag helps screen readers and shows extra info.

Interactive Button:

<svg width="150" height="50">
  <rect x="0" y="0" width="150" height="50" fill="green" />
  <text x="75" y="30" font-size="20" fill="white" text-anchor="middle">Click Me</text>
</svg>

You can use this SVG as a button. You can attach JS events to it and style it freely.

Complex Polygon Shape:

<svg width="200" height="200">
  <polygon points="100,10 190,190 10,190" fill="gold" stroke="black" stroke-width="5"/>
</svg>

This triangle uses three points and shows how to build custom shapes. You control fill and styles with attributes.

Wrapping Up

In this article, you learned what the <svg> tag does and how to use it to draw and style. You also understood how to animate graphics with it and saw how it compares with <img> and how to control it.

Here is a quick recap:

• Use <svg> to draw scalable shapes
• Use inline SVG for styles and animation
• Use attributes like fill and stroke.
• Style shapes with CSS
• Choose SVG over <img> when you need control
• Use tools to optimize SVG size and performance
• Build what you need from loaders to icons and charts with a few lines of code

FAQs

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<svg width="200" height="100">
  <rect width="200" height="100" style="fill:blue;" />
</svg>

<svg height="110" width="110">
  <circle cx="55" cy="55" r="50" stroke="black" stroke-width="3" fill="red" />
</svg>

Similar Reads