HtmlHow-ToBeginner · 3 min read

How to Add SVG in HTML: Simple Syntax and Examples

You can add SVG in HTML by using the <svg> tag directly in your HTML, or by linking an external SVG file with the <img> tag. Inline SVG lets you style and animate the graphic easily, while the <img> tag is simple for static images.

📐

Syntax

There are two main ways to add SVG in HTML:

Inline SVG: Use the <svg> element directly in your HTML code. This lets you write SVG shapes and styles inside your page.
External SVG file: Use the <img> tag with the src attribute pointing to an SVG file.

Inline SVG example syntax:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

External SVG example syntax:

<img src="image.svg" alt="Description" />

html

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Output

A red circle with a black border inside a 100x100 pixel square.

💻

Example

This example shows how to add an inline SVG circle and an external SVG image using the <img> tag. The inline SVG can be styled and changed easily, while the external SVG is loaded like a normal image.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SVG in HTML Example</title>
</head>
<body>
  <h2>Inline SVG</h2>
  <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150">
    <rect width="150" height="150" fill="#90caf9" />
    <circle cx="75" cy="75" r="60" stroke="#0d47a1" stroke-width="5" fill="#42a5f5" />
  </svg>

  <h2>External SVG Image</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg" alt="Example SVG" width="150" />
</body>
</html>

Output

A blue circle inside a light blue square shown inline, and below it an external SVG image loaded from the web.

⚠️

Common Pitfalls

Forgetting the xmlns attribute: Inline SVG should include xmlns="http://www.w3.org/2000/svg" in the <svg> tag for full compatibility, especially in XHTML.
Using <img> without alt text: Always add alt for accessibility.
Trying to style external SVG with CSS: You cannot style an external SVG loaded with <img> from your CSS; inline SVG is needed for styling.
Incorrect file path: Make sure the SVG file path in src is correct to avoid broken images.

html

<!-- Wrong: Missing xmlns in inline SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

<!-- Right: Include xmlns attribute -->
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

Output

The first SVG might not render correctly in some browsers; the second SVG with xmlns renders properly.

📊

Quick Reference

Summary tips for adding SVG in HTML:

Use <svg> inline for interactive or styled graphics.
Use <img> for simple static SVG images.
Always include alt text for accessibility when using <img>.
Include xmlns attribute in inline SVG for best compatibility.
Check file paths carefully when linking external SVG files.

✅

Key Takeaways

Add SVG inline with

Use tag to include external SVG files like regular images.

Always provide alt text for SVG images to support accessibility.

Include xmlns attribute in inline SVG for browser compatibility.

Check file paths carefully to avoid broken SVG images.