Inline SVG is written directly in the HTML markup, which makes its shapes available for direct styling and modification. An img referencing an SVG is simpler when you only need to display the picture. Think about what the picture adds to the story, not just whether it looks nice on the screen.
What You Need to Know
For meaningful inline SVG, give it an accessible name and appropriate semantics. Do not paste untrusted SVG markup, because it can contain active or unsafe content.
Example: See It in Action
Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<svg viewBox="0 0 120 50" role="img" aria-labelledby="logo-title">
<title id="logo-title">Blue rectangle logo</title>
<rect x="5" y="5" width="110" height="40" fill="royalblue" />
</svg>
<img src="images/logo.svg" alt="School logo">Let’s Understand the Example
- Img displays an image. Src chooses the file and alt provides a useful text alternative.
- Svg describes vector graphics that stay sharp when resized.
- Role describes an accessibility role when native HTML semantics do not already provide it.
- Aria-labelledby uses one or more existing element ids to name another element.
- Id gives one element a unique name within the page, so a link, label, or script can point to it.
- Width gives a useful size hint; for images, accurate dimensions help the browser reserve space.
An image appears only if its file path is correct. If it is informative, its alt text should share the same useful meaning; if it is decoration, empty alt text is often right.
What Should You See?
If the image file is available, the picture appears in the page. If not, the browser may show a broken image or fallback text. The example alt text is “School logo”. Check that the text alternative fits the picture’s purpose.
Cover the picture and read the surrounding text aloud. If essential information has disappeared, add a useful text alternative or nearby explanation.
Try It Yourself
- Change the rectangle's fill color, then compare with an external SVG file.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Assuming a vector file is safe merely because it ends in .svg.
- Never guess at an image description. Write alternative text that matches the picture and its purpose on this page.
Key Takeaways
- Inline SVG is written directly in the HTML markup, which makes its shapes available for direct styling and modification.
- Img displays an image. Src chooses the file and alt provides a useful text alternative.
- For meaningful inline SVG, give it an accessible name and appropriate semantics. Do not paste untrusted SVG markup, because it can contain active or unsafe content.