0Pricing
HTML Academy · Lesson

Inline SVG vs img and object

Choose the right SVG embedding method for your use case.

Three Ways to Embed SVG

SVG (Scalable Vector Graphics) can be embedded in three ways:

  • <img src="icon.svg"> — simple, cached, no JS/CSS access
  • <object data="chart.svg"> — inline interaction, separate document
  • Inline SVG inside HTML — full CSS/JS access, no extra request

img src SVG

The simplest method: reference SVG as an image:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

All lessons in this course

  1. Inline SVG vs img and object
  2. Basic SVG Shapes rect circle path
  3. SVG viewBox and Responsive Scaling
  4. Animating SVG with CSS and SMIL
← Back to HTML Academy