Input HarborISSUE #20 of 46

svg · vector graphics in markup

FormaVSCaptain Invalid Input

Forma saysSVG draws vector graphics with markup — shapes are real elements you can style, animate, and click.

Where canvas is pixels, SVG is XML. <svg> contains shape elements — <rect>, <circle>, <line>, <path> — that live in the DOM. You can target them with CSS, attach event listeners, and they stay razor-sharp at any zoom.

Use SVG for icons, logos, charts, and anything that must scale crisply or respond to interaction. Use canvas when you're pushing thousands of pixels per frame (games). The viewBox defines the coordinate space.

Power-ups you unlock

SVG shapes are DOM elements — stylable, clickable
Resolution-independent: crisp at any size
viewBox sets the internal coordinate system
SVG for icons/logos/charts · canvas for heavy pixel work

Captain Invalid Input attacks — common mistakes

Using canvas for a logo that then looks blurry when scaled
Omitting viewBox so the SVG does not scale responsively
Thousands of SVG nodes for a game (canvas would be faster)

Boss battleDraw a circle and a rect in an SVG, then add a CSS :hover rule that changes the circle’s fill.

Example code

<!doctype html>
<html><head><meta charset="utf-8">
<style>circle:hover{fill:#8aff9d;cursor:pointer}</style>
</head>
<body style="background:#06040d;display:grid;place-items:center;height:100vh;margin:0">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <rect x="20" y="40" width="100" height="100" fill="#b388ff" rx="8"/>
    <circle cx="210" cy="100" r="50" fill="#ffcf6b"/>
  </svg>
</body></html>

▶ Open the interactive comic issue

‹ Canvas · Text · Images · Transforms Svg · Paths · Gradients · Animation ›