SVG (Scalable Vector Graphics) is fundamentally different from raster formats like JPG, PNG and WebP. Raster formats store images as pixels; SVG stores them as instructions (lines, curves, shapes, fills). The result scales infinitely — an SVG logo renders crisply on a smartwatch and a 4K billboard from the same file.
SVG is the right choice for any image that has clear geometric structure: logos, icons, illustrations, charts, UI graphics, diagrams. For photographic content, SVG is the wrong choice — there's no efficient way to describe a photograph as vector paths.
SVG is text-based XML markup, which means it's editable in any text editor, can be styled with CSS, animated with smooth interpolations, and made interactive with JavaScript. The main practical concern is file size: many SVG exports from design tools include editor metadata that has nothing to do with the rendered image — running a one-time optimisation pass typically cuts 40–70% of file size with no visible difference.
History — introduced 1999
By: W3C (World Wide Web Consortium)
SVG 1.0 became a W3C recommendation in 2001 after several years of development. The format languished commercially through the 2000s as Flash dominated rich-graphics-on-the-web. Browser support became universal with the death of IE in the mid-2010s, and SVG has since become the standard format for logos, icons and UI graphics across the modern web.
How it works
SVG describes images as XML markup. A circle is <circle cx='50' cy='50' r='40' />. A path is a sequence of move/line/curve commands inside <path d='...' />. Fills, strokes, gradients, masks, filters and animations are all described declaratively in markup.
Because SVG is markup, it's processed by browsers the same way HTML is — parsed into a DOM tree, styled with CSS, rendered through the same graphics pipeline. This is why SVGs can be styled in CSS, animated with smooth interpolation, and made interactive with JavaScript event handlers.
Strengths and weaknesses
Strengths
- Infinite scaling — same file renders crisply at any size from 16px to 16,384px.
- Tiny file sizes for typical UI graphics — most icons are under 2 KB.
- Editable in any text editor or design tool.
- Styled with CSS, animated with smooth interpolation, interactive with JavaScript.
- First-class accessibility — text inside SVG is real text, indexed and read by screen readers.
Weaknesses
- Wrong format for photographic content — there's no efficient way to describe a photograph as vector paths.
- Default exports from design tools are often 2–4× larger than necessary — editor metadata padding the file.
- Complex SVGs with thousands of paths can hit performance limits on mobile devices.
- Some SVG features (foreignObject, advanced filters) have inconsistent browser support.
When to use it
- Logos and brand marks
- Icons and UI graphics
- Illustrations and explainer graphics
- Charts, diagrams and data visualisations
- Any graphic that needs to render crisply at multiple sizes (responsive design)
When NOT to use it
- Photographs — there's no efficient way to describe photographic content as vector paths. Use JPG / WebP.
- Pixel art — SVG's anti-aliasing softens pixel-perfect renders. Use PNG.
- Complex 3D renders — vector descriptions of 3D scenes balloon in size.
- Anywhere SVG-as-markup isn't acceptable (some restrictive CMSes, email clients) — export as PNG at the largest expected size.
Browser support
Global coverage: 100%
| Browser | Support |
|---|---|
| Chrome | All versions |
| Firefox | All versions |
| Safari | All versions |
| Edge | All versions |
| Legacy / notes | Universal in any browser made in the last decade. |
Performance considerations
- Optimised SVGs are typically the smallest format on the page — well under 10 KB even for complex graphics.
- Default exports from Illustrator / Inkscape / Sketch often carry 40–70% bloat from editor metadata. Run an optimiser pass — gains are essentially free.
- Complex SVGs with thousands of paths can be CPU-intensive to render on mobile. Simplify path data where possible.
SEO considerations
- Text content inside SVG is indexed by search engines — useful for labelled charts and illustrations.
- Always include a <title> element inside SVG used for content — it's read by screen readers and surfaced in search.
- Inline SVG (<svg> directly in HTML) and <img src='*.svg'> are indexed similarly by Google.
Common mistakes
- Shipping the default Illustrator / Inkscape export without optimisation — typically 40–70% larger than necessary.
- Using SVG for photographic content — produces enormous files and no quality benefit.
- Adding the editor's metadata namespaces (sodipodi:, inkscape:, rdf:) to the production SVG — strip them.
- Using complex path data with 10 decimal places of precision when 2 decimal places would render identically.
Frequently asked questions
- Is SVG better than PNG for icons?
- Almost always yes. A typical icon is 1–3 KB as optimised SVG vs 8–15 KB as PNG, and the SVG scales crisply at any size. Use PNG only when SVG isn't supported by the target environment.
- Why is my SVG so large?
- Almost certainly editor metadata. Design tools (Illustrator, Inkscape, Sketch) export SVGs with extensive editor-specific metadata that doesn't affect the rendered image. Running an SVG optimiser cuts 40–70% of file size with no visible difference.
- Can I animate SVG?
- Yes — three ways: CSS animations (most common, well-supported), Web Animations API in JavaScript, or SVG's own SMIL animations (less well-supported). For most use cases CSS animations are the right choice.
- Is SVG safe to use inline in HTML?
- Yes for content you control. SVG can contain JavaScript (<script> elements), so user-uploaded SVGs need sanitising before embedding. For your own logos and icons, inline SVG is fine.
- Does SVG support transparency?
- Yes — SVG renders transparently by default. Fills and strokes can be partially transparent via the fill-opacity, stroke-opacity, or opacity attributes.