HTML · Quick Reference

Lesson 29 — SVG Basics Cheat Sheet

HTML

In one line: There are three ways to use SVG. Your choice depends on whether you need CSS styling, animation, or just a static image:

Key Ideas

1Inline SVG vs <img> vs CSS. There are three ways to use SVG. Your choice depends on whether you need CSS styling, animation, or just a static image:

2Basic Shapes. SVG has six basic shape elements. All accept fill (inside color) and stroke/stroke-width (border) attributes — or inherit them from CSS.

3viewBox — The SVG Coordinate System. viewBox defines the internal coordinate system: viewBox="min-x min-y width height". The SVG scales its contents to fill the width/height of the element while preservin...

4Accessible SVG. SVG accessibility depends on whether the graphic conveys information or is purely decorative:

Code Examples

<!-- Method 1: External file via img -->
<img src="logo.svg" alt="BitWithBite logo"
     width="120" height="40">

<!-- Method 2: Inline — CSS can target fill/stroke -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24...

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">

  <!-- Rectangle: x, y = top-left corner; rx = border-radius -->
  <rect x="5" y="10" width="40" height="30"
        rx="4" fill="#ef4444"/>

  <!-- Circle: cx,cy = c...

<!-- viewBox="0 0 24 24" means:
     The drawing space is 24x24 units
     The SVG element can be any actual pixel size -->

<!-- Same SVG, rendered at 24px -->
<svg viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy...