SVG Introduction

What You’ll Learn

This page is a self-contained introduction to SVG (Scalable Vector Graphics)—sharp, resolution-independent graphics for the web. You will understand what SVG is, how to write basic shapes, and how to style and animate them.

👋 Introduction

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. As a web standard maintained by the W3C, SVG is supported by all major modern browsers.

Unlike raster images (JPEG, PNG, GIF), SVG graphics are defined by math—lines, curves, and fills—so they scale to any size without losing quality. That makes SVG ideal for icons, logos, charts, diagrams, and responsive interfaces.

🤔 What is SVG?

SVG stands for Scalable Vector Graphics. It is a powerful, flexible image format widely used for web graphics. SVG files are text-based: XML tags define shapes, paths, colors, and transforms that the browser renders on screen.

Because SVG is part of the DOM when inlined, you can target elements with CSS, attach event listeners with JavaScript, and animate properties—something raster images cannot do as flexibly.

🔑 Key Features of SVG

• Scalability — scale up or down without pixelation; perfect for responsive design
• Interactivity — elements support clicks, hovers, and scripting
• Accessibility — add <title> and <desc> for screen readers
• Style control — style with CSS: fills, strokes, filters, transitions
• Compact file size — often smaller than bitmaps for icons and simple illustrations

🧐 Why Use SVG?

There are several reasons SVG is an excellent choice for web graphics:

1. Resolution independence — vector graphics look sharp on retina displays and when zoomed
2. SEO friendly — text inside SVG can be indexed; use meaningful labels where appropriate
3. Performance — simple SVGs load quickly; HTTP caching works like any static asset
4. Styling and scripting — customize with CSS and JavaScript for themes and interactions

💡 Basic Structure of an SVG File

An SVG document is XML. Here is a minimal inline example in HTML:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

📝 Explanation

• <svg> — root element; sets canvas size and the SVG namespace
• <circle> — a circle shape with these attributes:
  • cx, cy — x and y coordinates of the center
  • r — radius
  • stroke — border color
  • stroke-width — border thickness
  • fill — interior color

🖌️ Common SVG Elements

Here are the most commonly used SVG shape elements:

Explore each shape in the sidebar tutorials, starting with SVG Circle and SVG Rectangle.

📄 Styling SVG

SVG elements can be styled with CSS classes, inline styles, or a <style> block inside the SVG:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .myCircle {
      fill: blue;
      stroke: black;
      stroke-width: 2;
    }
  </style>
  <circle class="myCircle" cx="50" cy="50" r="40" />
</svg>

🧠 How it works

The circle uses the CSS class .myCircle for fill and stroke instead of presentation attributes. External stylesheets can target inline SVG with selectors like svg .myCircle { fill: green; } when the SVG is embedded in HTML.

📄 Animating SVG

SVG supports animations through the <animate> element and SMIL (Synchronized Multimedia Integration Language). Here is a simple radius animation:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="r" from="10" to="40" dur="1s"
             repeatCount="indefinite" />
  </circle>
</svg>

🧠 How it works

The <animate> element changes the r attribute over one second, repeating forever. For new projects, also consider CSS transitions/keyframes or JavaScript—they have broader tooling support than SMIL in some browsers.

🔗 Ways to Use SVG on a Web Page

• Inline SVG — paste markup directly in HTML (best for CSS/JS control)
• <img src="icon.svg"> — simple, cacheable, no script access to internals
• CSS background — background-image: url(icon.svg)
• <object> / <embed> — legacy embedding options

For responsive icons, add viewBox="0 0 100 100" and size with CSS width/height instead of fixed pixels alone.

Examples Gallery

Five starter snippets. Use View Output to preview here, or open Try It Yourself to edit and run live in the browser.

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="45"
          fill="#ef4444" stroke="#1e293b" stroke-width="4" />
</svg>

<svg width="140" height="80" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="120" height="60" rx="12"
        fill="#3b82f6" />
</svg>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,5 61,38 95,38 68,59 79,91 50,71 21,91 32,59 5,38 39,38"
           fill="#fbbf24" stroke="#b45309" stroke-width="2" />
</svg>

<style>
  .btn-icon { fill: #64748b; transition: fill 0.2s; cursor: pointer; }
  .btn-icon:hover { fill: #2563eb; }
</style>
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <circle class="btn-icon" cx="24" cy="24" r="20" />
</svg>

<svg viewBox="0 0 24 24" width="48" height="48"
     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <path fill="currentColor"
        d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22
           7 14.14l-5-4.87 6.91-1.01L12 2z" />
</svg>

📋 SVG vs Canvas vs Raster Images

Learn more in the Canvas Introduction when you need JavaScript pixel drawing.

🎉 Conclusion

SVG is a versatile, powerful format for creating web graphics. Its scalability, performance benefits, and ease of styling and animation make it a great choice for modern web design.

By understanding the basics of SVG and how to use it, you can create high-quality, responsive graphics for your website—from favicons and icons to charts and hero illustrations.

• SVG is XML-based vector markup supported by all modern browsers.
• Use shape elements, path, CSS, and optional animation.
• Prefer viewBox for responsive icons and illustrations.
• Next: draw your first shape in the SVG Circle tutorial.

💡 Best Practices