A Beginner’s Guide to HTML SVG (Scalable Vector Graphics)

#webdev #programming #javascript #beginners

If you’ve ever wanted to add sharp, scalable graphics to your website without worrying about pixelation, SVG (Scalable Vector Graphics) is your best friend. Unlike traditional image formats (PNG, JPG), SVG is resolution-independent—meaning it looks crisp on any screen, no matter how much you zoom in.

In this post, we’ll explore the basics of SVG, common shapes, gradients, and a quick comparison with Canvas.

🔹 What is SVG?

SVG stands for Scalable Vector Graphics. It’s an XML-based markup language for describing 2D graphics that can be embedded directly in HTML.

✅ Key points:

SVG is resolution independent.
Graphics are written in XML, so they’re text-based and editable.
Interactive & Animatable with CSS and JavaScript.
W3C standard, supported in all modern browsers.

🔹 The `<svg>` Element

The <svg> tag acts as a container for vector graphics. Inside it, you can draw shapes, paths, circles, text, and more.

Example: Simple Circle

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

This creates a yellow circle with a green border.

🔹 Common SVG Elements

🟦 Rectangle

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" 
        stroke="red" stroke-width="6" fill="blue" />
</svg>

You can add rounded corners and opacity:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" 
        width="150" height="150"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

⭐ Polygon (Star Shape)

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
           style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

🌈 Gradients + Text

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#fff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

This creates a gradient ellipse with text inside it.

🔹 SVG vs Canvas

Both SVG and Canvas can draw graphics in HTML, but they serve different purposes:

Feature	SVG	Canvas
Resolution	Independent (always sharp)	Dependent (pixel-based)
Interactivity	Event handlers supported	No event handling
Text rendering	Great	Poor
Performance	Slower with many objects	Fast for complex animations/games
Best use case	Icons, charts, scalable graphics	Real-time rendering, games