Loading...
HTML SVG
SVG (Scalable Vector Graphics) draws shapes with math, so icons stay sharp at any size. HTML can host SVG inline or as a file.
Direct answer
Inline: put an <svg>…</svg> tree in the page. File: <img src="icon.svg" alt="…">. Inline SVG can be styled with CSS more easily; img is simpler for static icons.
Tiny inline SVG circle
html
HTML Code
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>SVG as an image file
html
HTML Code
<img src="images/logo.svg" alt="Site logo" width="120">Try it
- Paste the circle SVG into a practice page
- Resize width/height — it should stay sharp
- Export or download a simple .svg and load it with
img - Provide accessible naming (
altoraria-label)
Easy mistakes
- Forgetting accessible labels on meaningful SVG
- Huge inline SVGs that bloat HTML when a file would do
- Assuming every old browser quirk still blocks SVG (modern browsers handle it)
Summary
- SVG is resolution-independent graphics
- Inline or via
img - Label meaningful graphics
- Great for icons and simple illustrations
🧠 Test Your Knowledge
Ready to Start
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
3
Questions
70%
To Pass
∞
Time
∞
Attempts
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top