SVG for Web Developers: Embedding, Styling, and Optimization

Everything web developers need about SVG — embedding, CSS styling, sprites, and accessibility.

SVG is one of the most useful tools in a web developer's toolkit. This guide covers embedding methods, CSS styling, sprite sheets, accessibility, and optimization.

Three Ways to Embed SVG in HTML

1. <img> tag — simplest method, browser caches it, but you cannot style internals with CSS.
2. Inline SVG — full CSS control, JavaScript interaction, currentColor inheritance. Best for icons.
3. CSS background-image — good for decorative elements, but not accessible or styleable.

Styling SVG with CSS

Inline SVG elements accept CSS properties like fill, stroke, stroke-width, and opacity. Using fill="currentColor" lets icons inherit text color automatically from their parent.

SVG Sprite Sheets

For sites with many icons, create a single hidden SVG with <symbol> elements. Reference each icon with <use href="#icon-name"/>. One file, one request, many icons.

Accessibility

Add role="img" and aria-labelledby with a <title> element for meaningful SVGs. Use aria-hidden="true" for decorative ones.

Optimization

Run SVGs through SVGOMG or svgo CLI for 30-70% size reduction. Enable gzip/Brotli compression on your server for an additional 60-80% transfer reduction.

If you have PNG icons that need to be SVG, convert them free with Shape to Vector — upload, convert, download, embed.