HTML Graphics - Introduction

Graphics Technologies in HTML

HTML supports three main graphics technologies: images (<img> tag), Canvas (bitmap graphics), and SVG (vector graphics).

Images are static and loaded from files (JPEG, PNG, GIF, WebP, etc.).

Canvas provides a JavaScript API for drawing dynamic 2D graphics pixel by pixel.

SVG (Scalable Vector Graphics) uses XML-based markup to create resolution-independent vector images.

<!-- Static image -->
<img src="photo.jpg" alt="A photograph" width="400" height="300">

<!-- Canvas element (requires JavaScript) -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 200, 100);
</script>

<!-- SVG graphic -->
<svg width="400" height="300">
  <rect x="50" y="50" width="200" height="100" fill="blue" />
</svg>

When to Use Each Technology

Use images (<img>) for photographs, logos, icons, and static graphics from design tools.

Use Canvas for dynamic graphics, animations, game graphics, data visualizations, and pixel manipulation.

Use SVG for logos, icons, diagrams, charts, and graphics that need to scale without quality loss.

SVG graphics remain sharp at any size, while Canvas and images become pixelated when scaled up.

Canvas has better performance for complex animations with many objects, while SVG is better for interactive graphics with DOM manipulation.

<!-- Image: Best for photos -->
<img src="landscape.jpg" alt="Mountain landscape">

<!-- Canvas: Best for dynamic content -->
<canvas id="game" width="800" height="600"></canvas>
<script>
  // Draw game graphics, animations
  const ctx = document.getElementById('game').getContext('2d');
  // Animation loop, particle effects, etc.
</script>

<!-- SVG: Best for scalable graphics -->
<svg viewBox="0 0 100 100" width="200">
  <!-- Scales perfectly to any size -->
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

Canvas vs SVG Comparison

Canvas is resolution-dependent (bitmap) - it's a fixed grid of pixels. SVG is resolution-independent (vector) - it scales perfectly.

Canvas doesn't retain objects - you draw pixels and they're done. SVG retains a DOM structure - elements can be modified and animated.

Canvas is better for pixel-perfect rendering and many objects. SVG is better for fewer objects that need interactivity.

Canvas uses JavaScript to draw everything. SVG can be styled with CSS and manipulated with JavaScript.

Canvas doesn't support event handlers on shapes. SVG supports event handlers on individual elements.

<!-- Canvas: Immediate mode rendering -->
<canvas id="pixels" width="200" height="200"></canvas>
<script>
  const ctx = document.getElementById('pixels').getContext('2d');
  ctx.fillRect(10, 10, 50, 50); // Draws pixels, then forgets
  // To change: must clear and redraw everything
</script>

<!-- SVG: Retained mode rendering -->
<svg width="200" height="200">
  <rect id="box" x="10" y="10" width="50" height="50" fill="red" />
</svg>
<script>
  // Can modify directly via DOM
  document.getElementById('box').setAttribute('fill', 'blue');
</script>

Combining Graphics Technologies

You can use multiple graphics technologies together in the same page.

For example, use SVG for UI elements and icons, Canvas for a game or visualization, and images for photos.

SVG can be embedded inline or loaded as an image file.

Canvas and SVG can interact with other HTML elements and be styled with CSS.

<!-- Combined example -->
<div class="dashboard">
  <!-- SVG icon -->
  <svg width="40" height="40" class="icon">
    <circle cx="20" cy="20" r="15" fill="blue" />
  </svg>
  
  <!-- Canvas chart -->
  <canvas id="chart" width="600" height="400"></canvas>
  
  <!-- Photo -->
  <img src="profile.jpg" alt="User profile" width="100" height="100">
</div>