Integrating SVG and Canvas in Web Design

1. Welcome and Icebreaker:

• Icebreaker: “What is the coolest graphic or animation you’ve seen on a website?”

2. Outline the Session:

• Agenda:
  • Using SVG for scalable graphics
  • Drawing with the Canvas API
• Learning Outcomes:
  • Embed and style SVG graphics
  • Draw and animate with Canvas
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

SVG (Scalable Vector Graphics) and Canvas are two ways to create graphics on the web. SVG is XML-based and great for icons and illustrations. Canvas is pixel-based and ideal for dynamic, scriptable graphics.

4. Live Coding Demonstration:

Example of SVG and Canvas:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<canvas id="myCanvas" width="100" 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, 80, 80);
</script>

• Step-by-step:
  • Use <svg> for scalable graphics.
  • Use <canvas> and JavaScript for dynamic drawing.
• Best Practice: Use SVG for static graphics, Canvas for dynamic ones.
• Common Pitfall: Forgetting to set width/height for Canvas.

5. Tasks:

• Exercise:
  • Add an SVG shape and a Canvas drawing to your page.
  • Style the SVG with CSS and draw a shape on the Canvas.