Inline SVG & HTML5 Canvas Elements

Embedding resolution-independent vectors and procedural 2D pixel grids

« HTML iFrames, Sandbox & Web APIs« Previous HTML Templates & Web Components (<template>, <slot>) »Next »

HTML5 natively supports vector graphics via inline <svg> markup and raster drawing buffers via the <canvas> element.

Inline SVG vs Image Tag

<img src="icon.svg">: Loads external vector file, but cannot be styled with CSS fill: currentColor or interacted with by page JavaScript.

Inline <svg>: Embeds vector shapes directly into the HTML DOM. Benefits include zero extra HTTP requests, CSS theming, and full DOM event listener support.

<canvas id="myCanvas">: Provides an empty drawing canvas controlled via JavaScript getContext("2d").

Inline Responsive SVG Icon in HTML

Try It Yourself »

<button class="btn">
  <!-- Inline SVG inherits text color via currentColor -->
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
  Continue
</button>

<canvas id="chartCanvas" width="400" height="200">
  Your browser does not support HTML5 Canvas.
</canvas>

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What is a major advantage of inlining `<svg>` directly into your HTML compared to using `<img src="icon.svg">`?

« Previous: HTML iFrames, Sandbox & Web APIs Next: HTML Templates & Web Components (<template>, <slot>) »