HTML Academy · Lesson

Inline SVG vs img and object

Choose the right SVG embedding method for your use case.

Inline SVG vs img and object is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 -->

CSS background-image SVG

Use SVG as a CSS background for decorative icons:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

object Element SVG

embed SVG with <object> for interactive SVG:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

Inline SVG

Embed SVG directly in HTML for full control:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Inline SVG Advantages

Why use inline SVG:

Full CSS styling: fill, stroke, transitions, animations
JavaScript interaction: select SVG elements, listen for events
currentColor: inherit color from parent CSS
No extra HTTP request
Can be part of the accessibility tree with role and title

Inline SVG Disadvantages

Inline SVG drawbacks:

HTML file becomes larger
Not cached separately by the browser
Cannot easily reuse the same SVG on multiple pages without duplication
Code repetition for repeated icons

use Element for Sprite

Define SVG icons once, reference them with <use>:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

Accessible SVG

Make inline SVGs accessible:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

currentColor Trick

Use currentColor to inherit text color from CSS:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Quick Check

What is the main advantage of inline SVG over using an img src SVG?

Recap: SVG Embedding

SVG embedding essentials:

<img src> — simple; no CSS/JS access; cached
CSS background-image — decorative only
<object data> — interactive SVG; somewhat isolated
Inline SVG — full CSS/JS control; no extra request
SVG sprite with <symbol> + <use> — efficient reuse

Frequently asked questions

Is the “Inline SVG vs img and object” lesson free?

Yes — the full text of “Inline SVG vs img and object” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Inline SVG vs img and object”?

Choose the right SVG embedding method for your use case. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Inline SVG vs img and object” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy