HTML Canvas aur SVG Tags Kya Hote Hain?

Introduction to Web Graphics

HTML me, <canvas> aur <svg> do powerful tags hain jinka use web pages par graphics banane ke liye hota hai. Dono hi visuals create karte hain, lekin unke kaam karne ka tarika aur use cases alag-alag hain.

1. The <canvas> Element

<canvas> element ek container ki tarah kaam karta hai jisme JavaScript ke through graphics (shapes, lines, images) dynamically draw kiye jaate hain. Yeh raster-based hai, yaani yeh pixels par kaam karta hai.

Key Features:

• JavaScript Dependent: Graphics draw karne ke liye JavaScript zaroori hai.
• Pixel-Based: Zoom karne par quality kharab ho sakti hai (pixelation).
• Performance: Complex scenes, animations, aur games ke liye behtar performance deta hai.
• No DOM Nodes: Canvas ke andar banaye gaye shapes ke apne DOM nodes nahi hote, isliye event handling thoda complex hota hai.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 80); // x, y, width, height
</script>

2. The <svg> Element

SVG ka matlab hai Scalable Vector Graphics. Yeh XML-based format hai jo 2D graphics ko define karta hai. SVG vector-based hota hai, yaani isme shapes mathematical formulas se define hote hain.

Key Features:

• Scalable: Kisi bhi size par zoom karne par quality maintain rehti hai.
• DOM Nodes: Har SVG shape ek DOM element hota hai, isliye unpar CSS aur JavaScript event listeners aasaani se apply kiye ja sakte hain.
• Accessibility: SVG text accessible hota hai aur search engines use read kar sakte hain.
• File Size: Simple graphics ke liye file size chhota hota hai.

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

Canvas vs. SVG: Kab Kya Use Karein?

Key Takeaways

• Canvas: Dynamic, pixel-based graphics ke liye best hai, jahan high performance zaroori ho (jaise games).
• SVG: Scalable, high-quality graphics ke liye best hai, jahan har element par control chahiye (jaise logos, charts).
• SVG accessibility aur SEO ke liye behtar hai.
• Canvas complex animations aur large number of objects ke liye better performance deta hai.