SVG (Scalable Vector Graphics) describes shapes with XML-derived markup—paths, rects, text, gradients.
Authoring modes
- Inline
<svg>: style with CSS, manipulate with JS, inherit accessibility improvements. - External file via
img: simple embedding but internal nodes inaccessible to host CSS/JS. object/embed: hybrid behaviors depending on browser—test thoroughly.
Icons & sprites
- Optimize with SVGO; remove editor cruft.
- Use
symbol/usesprites or component libraries for consistency.
Accessibility
- Add
title/descelements oraria-labelon meaningful graphics. - Decorative SVGs:
aria-hidden="true"when purely visual.
Security & CSP
Inline SVG can carry scripts in foreign content edge cases—sanitize user-uploaded SVG aggressively; CSP script-src still matters.
Example — inline icon
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="currentColor"/>
</svg>Rendered output
Icon inherits
currentColor from CSS—ideal for buttons and links.
Important interview questions and answers
- Q: Why should video/audio include fallbacks and tracks?
A: Codec support differs by browser and captions/transcripts are essential for accessibility and compliance. - Q: When is inline SVG better than bitmap icons?
A: For scalable, styleable, lightweight icons that inherit CSS and remain sharp across densities. - Q: What is a common embed risk with third-party iframes?
A: Privacy/performance overhead and policy issues; lazy-load and apply consent/security constraints where needed.
Tip: Inline SVG scales cleanly; great for icons if you optimize paths.