Inline SVG in HTML: Using Scalable Vector Graphics Inline

Inline SVG lets you place scalable vector graphics directly in your HTML so icons, logos, charts, and illustrations can be styled, sized, and made accessible without loading a separate image file.

Quick answer: Use inline SVG when you want full CSS control, crisp scaling, and better accessibility than a raster image. Put the SVG markup directly in the page, and use viewBox, fill, stroke, and ARIA labels to make it work well.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, attributes, and how browsers render images.

1. What Is Inline SVG?

Inline SVG means writing <svg> markup directly inside your HTML document instead of referencing an external SVG file with <img> or background-image.

It is part of the DOM, so CSS can target its shapes.
It scales cleanly at any size because it is vector-based.
It can include text, shapes, paths, gradients, and metadata.
It can be made accessible with a title, description, and ARIA attributes.

Inline SVG is especially useful for icons, logos, simple illustrations, and diagrams that need to match the current page style.

2. Why Inline SVG Matters

Many web assets need to look sharp on high-density screens and at many sizes. Inline SVG solves that problem better than bitmap images because it is resolution-independent.

It also matters because inline SVG is easy to style. You can change colors on hover, adjust dimensions with CSS, and even animate parts of the graphic using CSS alone in many cases.

For accessibility, inline SVG can include meaningful labels, which is important when the graphic communicates information rather than serving as decoration.

3. Basic Syntax or Core Idea

The basic idea is simple: place an svg element in your HTML, give it a viewBox, and define shapes inside it.

Minimal inline SVG

This example draws a simple circle. Notice that the SVG is normal HTML content, not a separate file.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" aria-hidden="true">
  <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

The viewBox defines the internal coordinate system, while width and height control the rendered size. The aria-hidden="true" attribute marks decorative graphics so assistive technologies ignore them.

How the parts work together

xmlns identifies the SVG namespace. In modern HTML it is usually harmless to include it, especially when you copy SVG from editors or design tools. The shape element, such as circle, rect, or path, describes what to draw.

4. Step-by-Step Examples

Example 1: A reusable icon

This is a typical inline icon that inherits text color from its parent. That makes it easy to match buttons, links, and navigation.

<button type="button">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor" />
  </svg>
  Alerts
</button>

This pattern works well for decorative icons inside controls. The text still provides the accessible name for the button, and the SVG follows the text color automatically.

Example 2: A labeled graphic

When the SVG carries meaning, add a title and connect it to the graphic with ARIA. This helps screen reader users understand the image.

<svg viewBox="0 0 200 120" role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">Quarterly growth chart</title>
  <desc id="chart-desc">A simple bar chart showing steady growth across four quarters.</desc>
  <rect x="20" y="70" width="25" height="30" fill="#4f46e5" />
  <rect x="60" y="55" width="25" height="45" fill="#4f46e5" />
  <rect x="100" y="40" width="25" height="60" fill="#4f46e5" />
  <rect x="140" y="25" width="25" height="75" fill="#4f46e5" />
</svg>

This version is better than a decorative icon because it communicates information. The title and description give the graphic a usable text alternative.

Example 3: Styling with CSS

Inline SVG can respond to CSS just like HTML elements. You can target it directly or target internal shapes when they have classes.

<svg class="logo" viewBox="0 0 120 40" aria-hidden="true">
  <path class="mark" d="M10 20 L30 5 L50 20 L30 35 Z" />
  <text x="60" y="26">Brand</text>
</svg>

With inline SVG, the internal elements can be styled from a stylesheet. That is not possible with a regular image file loaded through <img>.

Example 4: Using SVG as a badge

This example shows how an SVG can be used in a small UI status badge where consistent scaling matters.

<span class="status">
  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
    <circle cx="8" cy="8" r="7" fill="#16a34a" />
  </svg>
  Online
</span>

Because it is inline, the badge stays crisp at different zoom levels and on high-resolution displays.

5. Practical Use Cases

Navigation icons inside links or buttons.
Brand logos in headers and footers.
Status indicators such as online/offline badges.
Simple charts or diagrams that need accessible text.
Illustrations that must adapt to page theme colors.
UI accents that need hover, focus, or active state styling.

Inline SVG is usually the best choice when the graphic belongs to the interface and should behave like part of the page, not just like an external asset.

6. Common Mistakes

Mistake 1: Forgetting the viewBox

An SVG without a proper viewBox often scales badly or appears cropped, especially when its visible dimensions change.

Problem: The browser has no internal coordinate system to scale from, so the graphic may render inconsistently or not fit the space you expect.

<svg width="24" height="24">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

Fix: Add a viewBox that matches the coordinate space used by the shapes.

<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

The corrected version scales correctly because the browser knows how the graphic’s coordinates map to its display size.

Mistake 2: Using inline SVG for decorative icons without hiding them

Decorative SVGs should not be announced by screen readers if they do not add meaning.

Problem: A decorative icon without aria-hidden or another appropriate label can be read out unnecessarily, creating noise for assistive technology users.

<svg viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

Fix: Mark purely decorative graphics as hidden from assistive technologies.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" />
</svg>

The fixed version is better because screen readers can skip decorative content.

Mistake 3: Using fixed fills that cannot adapt to theme or text color

Hard-coded colors can make icons look wrong in dark mode or inside styled components.

Problem: A locked fill color ignores surrounding text color and makes reuse harder across themes.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" fill="#111827" />
</svg>

Fix: Use currentColor when the icon should follow text color.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" fill="currentColor" />
</svg>

This works because the SVG now inherits the surrounding CSS color.

7. Best Practices

Use inline SVG for graphics that need styling or theming

If the graphic should match text color, spacing, or hover state, inline SVG is a strong choice.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path fill="currentColor" d="M12 2L2 22h20L12 2z" />
</svg>

Using currentColor keeps the icon flexible and reduces duplication.

Provide text alternatives for meaningful graphics

If the SVG conveys information, give it a name. A title, description, or visible text can serve that purpose depending on context.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="logo-title">
  <title id="logo-title">Acme logo</title>
  <circle cx="50" cy="50" r="40" />
</svg>

This makes the graphic understandable to users who do not see it visually.

Keep icons simple and consistent

For interface icons, use the same viewBox size and stroke style across the set. That reduces alignment problems and makes sizing predictable.

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path d="M4 12h16" fill="none" stroke="currentColor" />
</svg>

Consistency helps your interface feel polished and makes SVGs easier to reuse.

8. Limitations and Edge Cases

Inline SVG increases HTML size, so very large illustrations may be better as separate assets.
Browser rendering can differ slightly for complex filters, masks, and clipping paths.
Copying SVG from design tools can leave unnecessary metadata or overly complex paths.
Text inside SVG may not behave exactly like HTML text for wrapping and layout.
If you want to reuse the same graphic many times, duplicating inline SVG markup can become repetitive.
When SVG code is generated from outside sources, sanitize it carefully before inlining it into a page.

One common “not working” situation is an icon that suddenly looks invisible. That often happens because the shape uses fill="none", a transparent color, or the SVG is being clipped by an incorrect viewBox.

9. Practical Mini Project

Let’s build a simple profile card that uses inline SVG for both a decorative avatar mark and an accessible status icon. This shows how SVG fits naturally into real HTML content.

<article class="profile-card">
  <header>
    <svg viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
      <circle cx="24" cy="24" r="22" fill="currentColor" opacity="0.15" />
      <path d="M24 12a8 8 0 1 0 0 16a8 8 0 1 0 0-16zm0 18c-6 0-11 3-11 7v1h22v-1c0-4-5-7-11-7z" fill="currentColor" />
    </svg>
    <h2>Maya Chen</h2>
    <p>
      <svg viewBox="0 0 16 16" width="16" height="16" role="img" aria-labelledby="status-title">
        <title id="status-title">Online</title>
        <circle cx="8" cy="8" r="6" fill="#16a34a" />
      </svg>
      Online now
    </p>
  </header>
</article>

This mini project combines decorative SVG and informative SVG in a realistic layout. The avatar mark is hidden from assistive technology, while the status icon is labeled because it carries meaning.

10. Key Points

Inline SVG places vector markup directly in the HTML document.
It scales cleanly and works well for icons, logos, and diagrams.
It can be styled with CSS and inherits page context more easily than external images.
Use viewBox for reliable scaling.
Mark decorative SVG as hidden and label meaningful SVG for accessibility.
Use currentColor when the SVG should follow surrounding text color.

11. Practice Exercise

Create a small notification banner that includes one decorative SVG icon and one meaningful SVG indicator.

Add a decorative warning icon that is hidden from screen readers.
Add a second SVG that shows a status dot and is labeled as “New”.
Use viewBox on both SVGs.
Make the decorative icon inherit color from the text.

Expected output: A banner that says “Updates available” with a decorative icon before the text and a labeled “New” status indicator after it.

Hint: Use aria-hidden="true" for the decorative icon and role="img" with aria-labelledby for the meaningful one.

Solution:

<aside class="notification">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor" />
  </svg>
  <span>Updates available</span>
  <svg viewBox="0 0 16 16" width="16" height="16" role="img" aria-labelledby="new-title">
    <title id="new-title">New</title>
    <circle cx="8" cy="8" r="6" fill="#f59e0b" />
  </svg>
</aside>

This solution works because the decorative icon stays silent to assistive technology while the status indicator gets an accessible name.

12. Final Summary

Inline SVG is one of the most practical ways to add scalable graphics to HTML. It keeps graphics sharp at any size, lets you style shapes with CSS, and gives you much better control over accessibility than a flat image file.

For the best results, remember the essentials: include a proper viewBox, hide purely decorative SVGs, label meaningful ones, and use currentColor when you want icons to adapt to the page theme.

If you are building interfaces with icons, logos, or simple diagrams, inline SVG is usually the most flexible option. Next, try replacing one image-based icon in your own project with inline SVG and compare how much easier it is to style and make accessible.