SVG & Canvas

All HTML topics

∙ Chapter 32

SVG & Canvas

SVG is vector graphics (crisp at any size). Canvas is a drawing surface controlled by JavaScript (great for games and charts).

graphics.php

📝 Edit Code

<style>body{font-family:sans-serif;padding:16px}canvas{border:1px solid #ddd;border-radius:12px}</style><h3>SVG (no JS)</h3><svg width="220" height="120" viewBox="0 0 220 120" role="img" aria-label="Simple SVG badge">  <defs>    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">      <stop offset="0" stop-color="#00e5ff"/>      <stop offset="1" stop-color="#7c4dff"/>    </linearGradient>  </defs>  <rect x="8" y="8" width="204" height="104" rx="16" fill="url(#g)"/>  <text x="110" y="72" text-anchor="middle" font-size="22" font-family="Arial" fill="#071018" font-weight="700">HTML5</text></svg><h3 style="margin-top:18px">Canvas (JS drawing)</h3><canvas id="c1" width="220" height="120"></canvas><script>  const c = document.getElementById('c1');  const ctx = c.getContext('2d');  ctx.fillStyle = '#0f1322'; ctx.fillRect(0,0,c.width,c.height);  ctx.beginPath(); ctx.arc(65,60,36,0,Math.PI*2); ctx.fillStyle='#00e5ff'; ctx.fill();  ctx.beginPath(); ctx.arc(135,60,36,0,Math.PI*2); ctx.fillStyle='#7c4dff'; ctx.fill();  ctx.fillStyle = '#e8eaf6'; ctx.font = 'bold 14px Arial'; ctx.fillText('Canvas', 78, 66);</script>

👁 Live Preview

💡 SVG elements are real DOM nodes. Canvas is pixels you redraw with code.

PreviousHTML Landing

HTML Tutorial

NextAll Topics →