← Back to All Tags

<svg>

Defines a container for Scalable Vector Graphics

✨ HTML5

Definition and Usage

The <svg> tag is a container for SVG (Scalable Vector Graphics). SVG is used to define vector-based graphics for the web in XML format.

SVG graphics are scalable and do not lose quality if they are zoomed or resized. They are defined in XML format and can be directly embedded into HTML pages.

Key advantages of SVG:

  • Scalable - can be scaled to any size without losing quality
  • Lightweight - typically smaller file sizes than raster images
  • Editable - can be created and edited with any text editor
  • Searchable - text within SVG is indexable and selectable
  • Animatable - supports CSS and JavaScript animations
  • Accessible - better accessibility than bitmap images
Tip: SVG images can be styled with CSS and manipulated with JavaScript, making them perfect for interactive graphics and icons.
Note: SVG is ideal for logos, icons, charts, and illustrations that need to scale across different screen sizes and resolutions.

Browser Support

The <svg> tag is supported in all major browsers:

Chrome
Chrome
4.0+
Firefox
Firefox
3.0+
Safari
Safari
3.2+
Edge
Edge
9.0+
Opera
Opera
9.0+

Attributes

Attribute Value Description
width number Sets the width of the SVG viewport
height number Sets the height of the SVG viewport
viewBox min-x min-y width height Defines the coordinate system and aspect ratio for the SVG
xmlns http://www.w3.org/2000/svg Defines the XML namespace for SVG (required for standalone SVG files)
preserveAspectRatio alignment [meet|slice] Controls how the SVG scales to fit its container

The <svg> tag also supports the Global Attributes in HTML.

Examples

Basic Shapes - Circle

Draw a simple circle using SVG:

Example

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#745af2" />
</svg>

Rectangle with Stroke

Create a rectangle with border and fill:

Example

<svg width="300" height="200">
  <rect x="50" y="50" width="200" height="100"
        fill="#4CAF50"
        stroke="#333"
        stroke-width="3" />
</svg>

Path - Complex Shapes

Use path element to draw complex shapes:

Example

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- Heart shape -->
  <path d="M100,170
           C75,145 20,120 20,80
           C20,55 40,40 60,40
           C75,40 90,50 100,65
           C110,50 125,40 140,40
           C160,40 180,55 180,80
           C180,120 125,145 100,170 Z"
        fill="red" />
</svg>

SVG Icon

Create a reusable icon with viewBox:

Example

<svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <!-- Home icon -->
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
  <polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>

Animated SVG

Add animations to SVG elements:

Example

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#745af2">
    <animate attributeName="r"
             from="50"
             to="80"
             dur="1s"
             repeatCount="indefinite"
             direction="alternate" />
  </circle>
</svg>

<!-- Or with CSS animation -->
<style>
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }

  .animated-circle {
    animation: pulse 2s infinite;
    transform-origin: center;
  }
</style>

<svg width="200" height="200">
  <circle class="animated-circle" cx="100" cy="100" r="50" fill="#4CAF50" />
</svg>

Gradients

Apply linear and radial gradients to shapes:

Example

<svg width="300" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#745af2;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#667eea;stop-opacity:1" />
    </linearGradient>
  </defs>

  <rect x="20" y="20" width="260" height="160" fill="url(#grad1)" rx="10" />
</svg>

Inline vs External SVG

Different ways to include SVG in HTML:

Example

<!-- Inline SVG (Best for interactivity) -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#745af2" />
</svg>

<!-- External SVG as image -->
<img src="logo.svg" alt="Logo" width="100" height="100">

<!-- SVG as background image (CSS) -->
<style>
  .bg-svg {
    background-image: url('pattern.svg');
    width: 300px;
    height: 200px;
  }
</style>

<!-- Using object tag -->
<object data="diagram.svg" type="image/svg+xml" width="400" height="300">
  <img src="fallback.png" alt="Diagram">
</object>

SVG vs Canvas vs Image

Feature SVG Canvas Image (PNG/JPG)
Type Vector-based Raster-based Raster-based
Scalability Perfect at any size Pixelated when scaled Pixelated when scaled
File Size Small for simple graphics N/A (drawn in browser) Larger, depends on resolution
Performance Good for few objects Better for many objects Best for static images
Manipulation CSS, JavaScript, DOM JavaScript only Limited
Accessibility Excellent (text is selectable) Poor (just pixels) Requires alt text
Best For Icons, logos, charts, UI Games, complex animations Photos, complex graphics

Common SVG Elements

  • <circle> - Draws a circle
  • <rect> - Draws a rectangle
  • <ellipse> - Draws an ellipse
  • <line> - Draws a straight line
  • <polyline> - Draws a series of connected lines
  • <polygon> - Draws a closed shape with straight sides
  • <path> - Draws complex shapes using commands
  • <text> - Adds text to SVG
  • <g> - Groups SVG elements together
  • <defs> - Defines reusable elements
  • <use> - Reuses defined elements

Accessibility with Title and Desc

Make SVG graphics accessible to screen readers:

Example

<svg width="200" height="200" role="img" aria-labelledby="title desc">
  <title id="title">Company Logo</title>
  <desc id="desc">A circular logo with the company name in the center</desc>

  <circle cx="100" cy="100" r="80" fill="#745af2" />
  <text x="100" y="105" text-anchor="middle" fill="white" font-size="24">
    Company
  </text>
</svg>
Accessibility Tip: Always include <title> and <desc> elements for meaningful graphics. Use role="img" and aria-labelledby for better screen reader support.

Best Practices

  • Always use the viewBox attribute for responsive SVGs
  • Optimize SVG files using tools like SVGO before deployment
  • Use inline SVG when you need CSS/JS manipulation
  • Include <title> and <desc> for accessibility
  • Remove unnecessary metadata and comments from exported SVGs
  • Use semantic grouping with <g> elements
  • Prefer SVG over icon fonts for better accessibility
  • Use <defs> and <use> to avoid repetition
  • Keep SVG code clean and readable for maintainability
  • Test SVG rendering across different browsers

Try it Yourself

Interactive Examples

Here are some live SVG examples:

Circle

Rounded Rectangle

Triangle

Gradient

Default CSS Settings

Most browsers will display the <svg> element with the following default values:

Default CSS

svg {
  display: inline-block;
  overflow: hidden;
}

Related Tags

  • <canvas>

    Used to draw graphics via JavaScript

  • <img>

    Defines an image

  • <picture>

    Defines container for multiple images

  • <object>

    Defines embedded object

  • <embed>

    Defines embedded content

  • <figure>

    Specifies self-contained content