What Makes SVG So Special?

Imagine designing an icon that looks just as sharp on a tiny phone screen as it does on a huge monitor. That’s one of SVG’s biggest strengths!

SVG stands for Scalable Vector Graphics. Instead of storing a picture as pixels, SVG describes shapes using coordinates and instructions.

Meet the <svg> Element

Unlike Canvas, which uses JavaScript to draw pixels, SVG lets you write shapes directly in your HTML.

<svg viewBox="0 0 300 150"
     width="300" height="150"
     role="img" aria-label="Blue circle">
  <circle cx="150" cy="75"
          r="50" fill="#39d5ed" />
</svg>

The viewBox defines the internal coordinate system: starting X, starting Y, width, and height. The browser can then scale the graphic while preserving those coordinates.

For a circle, cx and cy specify its center, while r specifies its radius.

Circles, Rectangles & Lines

SVG provides several built-in shapes, so you can create graphics without complex drawing commands.

<svg viewBox="0 0 400 180">
  <rect x="20" y="30" width="100"
        height="80" fill="#39d5ed" />

  <circle cx="210" cy="70" r="40"
          fill="#4ee4a1" />

  <line x1="280" y1="30"
        x2="370" y2="120"
        stroke="#176b76" stroke-width="6" />
</svg>

Try changing the coordinates. You’ll quickly see how each number affects the final graphic.

Draw More Interesting Shapes

Need a triangle, mountain, or custom shape? SVG offers <polygon> and <path>.

<svg viewBox="0 0 400 200">
  <polygon points="30,170 130,30 230,170"
           fill="#39d5ed" />

  <path d="M200 170 L300 50 L390 170 Z"
        fill="#176b76" />
</svg>

Inside a path’s d attribute, M means move to a point, L means draw a line to a point, and Z closes the path.

Add Some Personality

SVG supports fills, strokes, opacity, and gradients. That means you can build polished illustrations without an image editor.

<svg viewBox="0 0 300 150">
  <defs>
    <linearGradient id="sky" x1="0" y1="0"
                    x2="0" y2="1">
      <stop offset="0%" stop-color="#143c64" />
      <stop offset="100%" stop-color="#39d5ed" />
    </linearGradient>
  </defs>

  <rect width="300" height="150"
        fill="url(#sky)" />
</svg>

The <defs> element stores reusable definitions, and url(#sky) references the gradient by ID.

Put Words in Your Artwork

SVG can display text as part of an illustration using the <text> element.

<svg viewBox="0 0 400 120"
     role="img" aria-labelledby="art-title">
  <title id="art-title">Welcome graphic</title>
  <rect width="400" height="120"
        fill="#143c64" />
  <text x="200" y="70"
        text-anchor="middle"
        font-size="28"
        fill="#4ee4a1">
    Hello, mC0de!
  </text>
</svg>

For meaningful SVG images, provide an accessible name using a <title> element or an appropriate ARIA label. Decorative SVGs can instead be hidden from assistive technology.

Which One Should You Use?

Both SVG and Canvas create graphics, but they work differently.

• SVG: Great for icons, logos, charts, diagrams, and scalable illustrations.
• Canvas: Great for pixel-based drawing, games, and frequently redrawn scenes.
• SVG shapes: Remain individual elements in the document and can be styled or interacted with.
• Canvas shapes: Become pixels on a drawing surface rather than separate document elements.