Inline SVG vs img Tag

When to Use Inline vs External

Inline SVG is fully scriptable and stylable with CSS. External SVG via <img> is simpler but CSS/JS cannot reach inside it.

Example

<!-- External: simple, cached, no CSS/JS inside -->
<img src="logo.svg" width="120" alt="Logo">

<!-- Inline: CSS/JS control, slightly larger HTML -->
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path class="logo-shape" d="M50 10 L90 90 L10 90 Z"/>
</svg>

<!-- Object: external file but scriptable from within the SVG -->
<object data="interactive.svg" type="image/svg+xml" width="200" height="200"></object>

HTML

Full Editor

Pro Tip

Use inline SVG when you need CSS hover effects or JS interactivity on the shapes.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned