# Canvas, SVG & localStorage — HTML

Source: https://www.geekswithgeeks.com/en/html/html-canvas-svg-localstorage

> A quick tour of HTML5's bigger APIs.

## canvas — pixels via script

`<canvas>` is a blank drawing surface — everything on it is drawn with JavaScript, pixel by pixel. Great for games and charts.

## SVG — shapes as markup

`<svg>` describes shapes as XML tags (`<circle>`, `<path>`) instead of pixels — they scale perfectly at any size.

## localStorage — browser storage

A small key-value store built into every browser that persists even after the tab closes — no server needed.

## A quick look

All three live inside plain HTML, driven by a little script.

```html
<canvas id="c" width="100" height="100"></canvas>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>
<script>
  localStorage.setItem('theme', 'dark');
  console.log(localStorage.getItem('theme')); // "dark"
</script>
```