SVG: Browser Support, Features, Known Issues

What is SVG?

SVG is an XML-based markup language for two-dimensional vector graphics, published by the W3C SVG Working Group. The format describes shapes, paths, text, gradients, filters, and animations as plain text inside .svg files served with the image/svg+xml MIME type. Browsers render SVG inline, inside img tags, or as a CSS background, with full DOM and CSS access.

Which browsers does SVG support?

Every modern browser renders SVG natively, with global support around 97%. Chrome, Edge, Firefox, Safari, Opera, Samsung Internet, and the Android Browser all ship basic SVG, and Internet Explorer 9+ provides partial coverage.

What are the key features of SVG?

SVG packs a complete two-dimensional graphics stack into a markup language, with shapes, gradients, filters, animations, and full DOM access. The headline features cover drawing primitives, styling, animation, and accessibility.

• Drawing primitives: rect, circle, ellipse, line, polyline, polygon, and path elements describe every two-dimensional shape, with the path element handling Bezier curves, arcs, and complex outlines.
• Text rendering: text, tspan, and textPath elements lay out real, selectable, accessible text along any baseline or curve, and screen readers expose the text to assistive technology.
• Gradients and patterns: linearGradient, radialGradient, and pattern elements fill any shape with smooth color transitions or repeating tiles, all defined inside the SVG file itself.
• Filters and effects: filter primitives such as feGaussianBlur, feColorMatrix, feDropShadow, and feTurbulence build Photoshop-style image processing chains directly in the browser.
• Animation via SMIL and CSS: animate, animateMotion, animateTransform, and set elements run keyframe animations without JavaScript, and SVG attributes are also animatable via CSS transitions and the Web Animations API.
• Scriptable DOM: every SVG element is a live DOM node, so JavaScript can change attributes, attach event listeners, and read getBoundingClientRect on any shape.
• Clipping and masking: clipPath and mask elements crop any shape or raster image to an arbitrary outline, and the mask alpha channel works on every modern browser.
• Reusable symbols: defs, symbol, and use elements let one SVG file act as a sprite sheet, where multiple use references render the same icon at different sizes and colors.
• Accessibility and SEO: title and desc elements expose names and descriptions to screen readers, and search engines index SVG text content like any other HTML.

How do you check if a browser supports SVG?

Run a quick feature-detection script in the DevTools console. The browser exposes the SVG DOM through document.createElementNS, so a single check confirms whether SVG is supported and the inline svg element interface name.

• Open DevTools: Right-click any page, choose Inspect, and switch to the Console tab.
• Paste the feature-detection snippet: Copy the snippet below and paste it into the console.
• Run the detection: Press Enter. The console prints whether SVG is supported and the element interface name.
• Inspect the rendered svg: Confirm the appended svg draws the red rectangle and getBoundingClientRect reports a positive width and height.

// Paste this into the DevTools console to confirm SVG support in this browser.
const svgNS = "http://www.w3.org/2000/svg";
const test = document.createElementNS(svgNS, "svg");

if (test && typeof test.createSVGRect === "function") {
  console.log("SVG is supported in this browser.");

  const rect = document.createElementNS(svgNS, "rect");
  rect.setAttribute("width", "100");
  rect.setAttribute("height", "50");
  rect.setAttribute("fill", "tomato");
  test.appendChild(rect);
  test.setAttribute("width", "120");
  test.setAttribute("height", "60");
  document.body.appendChild(test);

  const box = rect.getBoundingClientRect();
  console.log("Rendered rect dimensions:", box.width, "x", box.height);
  console.log("SVG element interface:", test.constructor.name);
} else {
  console.log("SVG is not supported in this browser.");
}

If the console prints "SVG is not supported in this browser", you are running a pre-IE 9 build or a fringe text-only browser. Every Chromium, Gecko, and WebKit release in active use logs a positive result.

What are the known issues with SVG?

SVG is universal today, but a small set of cross-browser quirks still bite real projects. The common pain points are Safari's incomplete SVG 2 coverage, SMIL deprecation noise, sandboxed img embeds, filter performance, and sanitizer behavior.

• Safari skips parts of SVG 2: WebKit lacks the morph d attribute, the isPointInFill and isPointInStroke methods, and full geometry-properties via CSS. Animations that morph paths fall back to JavaScript on Safari.
• SMIL is alive but discouraged: Chrome announced an intent to deprecate SMIL animation, then walked it back. SMIL still works in Chrome, Edge, Firefox, and Safari, but the spec recommends CSS animation or the Web Animations API for new code.
• External SVG inside img tags loses interactivity: When SVG is referenced from img, the browser blocks scripts and external resource loads. Use inline SVG or an object element when you need event listeners or scripted animation.
• Filter performance varies by engine: Heavy filter chains, such as a large feGaussianBlur stdDeviation or stacked feTurbulence layers, ship faster on Chromium than on WebKit. Profile filter-heavy pages in Safari before relying on them at scale.
• Sanitizers strip SVG features: Email clients, WYSIWYG editors, and document sanitizers often strip script, style, foreignObject, and event-handler attributes. Avoid these when SVG must survive a sanitizer pass.
• Internet Explorer is partial only: IE 9 to 11 supports SVG 1.1 but lacks SMIL animation, several filter primitives, and the use element with external href values. Polyfill svgxuse or inline the symbols for IE-era browsers.
• Mobile background-image scaling needs viewBox: Some Android Browser builds require a viewBox attribute for SVG used as a CSS background-image, otherwise the image renders at its raw width and ignores background-size.

In my experience, the trickiest production failure is Safari's filter pipeline. A drop-shadow that looks crisp in Chrome can render with banding or a slow paint on iPhone, especially over scrolled content. Test every filter you ship on a real iPhone before assuming the desktop result is the truth.

Citations

All SVG version numbers and platform notes in this guide come from these primary sources:

• W3C - SVG 1.1 Second Edition Recommendation: w3.org/TR/SVG11
• W3C - SVG 2 Candidate Recommendation: w3.org/TR/SVG2
• W3C - SVG Working Group: w3.org/Graphics/SVG
• W3C - Browser Support for SVG synopsis: w3.org/2010/09/svg_browser.php
• MDN Web Docs - SVG: developer.mozilla.org/en-US/docs/Web/SVG
• MDN Web Docs - SVG Element Reference: developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element
• MDN Web Docs - SVG as an image: developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image
• Wikipedia - SVG: en.wikipedia.org/wiki/SVG
• WebKit - Feature status: webkit.org/status
• Chrome Platform Status - SVG features: chromestatus.com/features#svg
• IANA - image/svg+xml media type: iana.org/assignments/media-types/image/svg+xml
• Mozilla Hacks - SVG category: hacks.mozilla.org/category/svg