What's missing from SVG

The SVG logo, with pieces of it separated and floating away, like a puzzle with missing pieces.

SVG is very cool for displaying graphics on the web but, like any web technology, there's always more we could be doing with it, whether it's fixing bugs and browser inconsistencies, adding new features to unlock new use cases, or improving performance.

I wanted to learn more, so I asked around and analyzed a few different sources of developer signals on the topic.

Here are the sources I used:

What's missing from SVG - The short version

Here's the short version of what web developers feel is missing from SVG:

  1. Styling and theming external SVG assets

    Developers want SVGs used via <img>, background-image, favicons, and sprites to be as styleable as inline SVGs: pass theme values, use currentColor and custom properties, without duplicating markup or inlining every icon.

    Good news, CSS Linked Parameters is meant to solve this problem. And look at that: Firefox just landed support for it, and my team at Microsoft is working on implementing in Chromium too. So this is coming for sure!


  2. Consistent SVG/CSS integration and platform parity

    Developers expect SVG to behave like the rest of the platform: CSS support (z-index, geometry properties, calc(), filters, blend/backdrop effects), clearer feature overlap with CSS graphics, and fewer surprises across browsers.


  3. Reliable text layout and typography in graphics

    Developers need real text support for charts and diagrams: wrapping, overflow handling, sizing, alignment, etc. so localization and accessibility do not require manual line-breaking or path outlines.


  4. Performance

    Developers tend to avoid SVG features because rendering, animation, and filter performance is unpredictable or expensive. They need fast, battery-friendly behavior for common effects and complex scenes so SVG is safe to use beyond static icons.


  5. Smoother animation and morphing workflows

    Beyond raw performance, developers find SVG animation harder to author than it should be. They want easier animations and shape/path morphing.


  6. Responsive sizing, scaling, and viewBox control

    Developers struggle to make SVGs adapt cleanly to layouts and containers: they want CSS-driven scaling, responsive or container-query-aware viewBox behavior, sensible sizing when width/height or viewBox are missing, and non-uniform scaling that preserves stroke widths.


  7. Robust reuse, linking, and resource boundaries

    Developers want <use>, symbols, external references, fonts, gradients, and resources to work reliably across files, components, and Shadow DOM without ID collisions, CORS/caching edge cases, or broken references that make design-system reuse fragile.


  8. Better programmability and geometry ergonomics

    Developers need modern APIs and better authoring for paths and geometry (path data manipulation, accurate boxes/lengths, stroke alignment, markers, multiple strokes).


  9. Interop stability and steady SVG evolution

    Developers see long-standing spec and implementation gaps as a trust issue. They want better interoperability, clearer specs, and visible progress on long-requested features. Choosing SVG should not feel risky.


  10. Accessibility and semantics for complex graphics

    Developers need better, consistent support for semantic relationships, ARIA graphics roles, and assistive-technology behavior across embedding modes, so accessible charts and diagrams can be created in SVG without workarounds.


  11. Reliable foreignObject and embedded HTML

    Developers want to mix HTML layout inside SVG graphics via foreignObject, but inconsistent positioning and rendering across browsers makes this too unreliable.


If you want to read the full analysis, check out the sections below.

SVG tickets from the Chromium bug tracker

The Chromium bug tracker lets users upvote tickets, which can be a good signal of developer needs and pain points. I looked at all the open tickets in the SVG component, sorted them by number of votes, and only kept those that had at least 5 upvotes.

Looking at votes alone can be dangerous. Some bugs are much older, and have collected more votes over time. Some feature proposals are new and mostly unknown even if they solve a common developer problem. That being said, using this to filter down the list of tickets is a good starting point to avoid being overwhelmed by too much data.

The most important signal here is not any single issue, but the concentration of votes around a few recurring themes:

  1. SVG as a reusable, themeable web asset

    Developers want to treat SVG files like the modern web assets they should be: cacheable, reusable, stylable, to unlock design systems, icons, theming, etc.

    • <use> cross-origin/CORS issue
    • Raster image loading in SVG
    • Caching/reload bugs
    • Resources in display:none
    • Nested external references
    • CSS Linked Parameters
    • CSS styling of <use>/<symbol>
    • CSS presentation-attribute mapping issues
  2. SVG as a first-class web platform citizen

    Developers want use the same CSS and layout concepts they already known. SVG should behave like the rest of the platform.

    • Support z-index
    • Support calc() lengths
    • Trade geometry properties for CSS
    • presentation attributes
    • Support backface-visibility
    • Fix mix-blend-mode
  3. SVG programmability

    Developers don't only want to display graphics, they want to manipulate them.

    • Path Data API
    • getBBox(options)
    • Bounding-box correctness
    • pathLength
    • Geometry APIs
    • Coordinate/length correctness
  4. Modern text and layout in SVG

    Developers need real text, not outlines, because accessibility and localization matter. SVG text still feels like a separate platform in many ways.

    • Support inline-size
    • Support white-space
    • Support text-overflow
    • Improve <textPath>
    • Kerning issues
    • Font metrics issues
    • Decoration handling
    • Support shape-inside
  5. SVG performance

    Developers need SVG to be reliable.

    • Expensive re-layouts
    • Animation performance
The full list of open tickets

Interop focus area proposals about SVG

  1. SVG styling, theming, and reuse

    Developers want to use SVG the easy way (<img>, background-image, favicons), but that's exactly where SVG becomes least flexible.

    • Link parameters for styling non-inline SVG
    • Dark mode for SVG
    • SVG favicons
  2. SVG rendering and effects

    SVG should be capable of rich visual effects, but cross-browser behavior is inconsistent, buggy, or incomplete.

    • SVG filters
    • CSS filters on inline SVG elements
    • SVG interoperability bugs
  3. SVG reuse and <use> consistency

    Developers experience friction around SVG reuse.

    • Allow omission of fragment when using <use>
    • CSS selectors should not pierce the shadow root created by <use>
All SVG interop focus area proposals

SVG issues in the State of CSS 2025 survey

In the State of CSS 2025 survey is a free-form question titled Shapes and graphics pain points.

Many of the responses mention SVG. In the results, an "SVG issues" category was created to group them all together, and it ended up in 2nd place, meaning that SVG is the second most common pain point for developers using graphics in CSS.

Below is my interpretation of the free-form comments in this category. I've grouped them by theme, and sorted by the number of comments in each theme.

  1. Better CSS styling and coloring of external SVGs

    Developers want SVGs to behave more like regular HTML/CSS content:

    • Style SVGs loaded via <img>, background-image, or external files.
    • Use currentColor and CSS custom properties (var(--*)) in external SVGs.
    • Easily recolor SVGs from CSS.
    • Apply CSS styles consistently regardless of how SVGs are embedded.
    • Access SVG markup for styling even when SVGs are referenced externally.
    • Reduce differences between SVG color mechanisms (fill, stroke) and CSS (color).
  2. SVG vs. CSS feature overlap, integration, and choosing the right tool

    Developers find the relationship between SVG, CSS Shapes, masks, clip-paths, gradients, and other graphics features confusing and inconsistent:

    • Better integration between SVG and CSS.
    • More SVG capabilities available directly in CSS.
    • Ability to create arbitrary shapes in CSS without resorting to SVG.
    • Clearer guidance on when to use SVG vs clip-path vs masks vs CSS shapes.
    • Consistency between equivalent SVG and CSS features.
  3. Easier creation and editing of complex shapes and paths

    Creating custom shapes is difficult without dedicated vector design tools.

    • Easier authoring of SVG paths and arcs.
    • Better tooling for creating complex shapes.
    • Improved support for reusing vector-defined shapes in CSS.
    • Less reliance on Illustrator/Figma for shape generation.
  4. Responsive sizing, scaling, and viewBox control

    Developers struggle to make SVGs adapt cleanly to different layouts and containers.

    • Control SVG scaling behavior with CSS.
    • Change viewBox responsively.
    • Container-query-like behavior for SVG viewports.
    • Better sizing rules when width/height or viewBox are missing.
    • Non-uniform scaling while preserving stroke widths.
  5. Browser interoperability and inconsistent behavior

    SVG behavior still varies too much across browsers and embedding modes.

    • Consistent CSS support across browsers.
    • Consistent handling of CSS custom properties.
    • Fix Safari-specific SVG issues.
    • Reduce rendering artifacts and positioning inconsistencies.
  6. Better SVG filter support and CSS access to filter features

    Filters are powerful but difficult to use.

    • More complete SVG filter support across browsers.
    • Control SVG filter parameters from CSS.
    • Make SVG filters available directly as CSS features.
    • Improve filter support for backdrop-filter.
  7. Animation and morphing

    SVG animation is perceived as harder than it should be.

    • Easier SVG animations.
    • Better support for shape/path morphing.
    • Clearer animation workflows.
  8. SVG layout and rendering limitations

    Some SVG-specific layout features feel outdated compared to HTML/CSS.

    • Ability to control rendering order with concepts like z-index.
    • Better CSS control of SVG coordinates (x, y).
    • Improved interaction between SVG elements and surrounding content.
All comments

Social media question about SVG

To complement the above results, I also asked what was missing from SVG on Mastodon, Bluesky, and LinkedIn.

Developers love SVG's potential, but they feel it is trapped between HTML/CSS integration gaps, poor performance, and a lack of evolution. The highest-impact work would likely be making SVG assets easier to use as normal web assets: styleable, themeable, accessible, performant, and interoperable across embedding modes.

  1. CSS integration and styling external SVGs

    Developers want to use SVG as an ordinary external asset, via the <img> tag or CSS background-image while still being able to style and theme it from the page.

    This affects icons, design systems, theming, dark mode, component libraries, charts, etc.

  2. Performance: animations, filters, and rendering cost

    Developers perceive SVG as risky for production when animation, filters, or complex rendering are involved. Developers will avoid using SVG features entirely if they believe the features are expensive, unpredictable, or battery-hostile.

    There are two sub-themes here:

    • General SVG rendering/animation performance (transforms, path animations, CSS animations, SMIL animation, d animation, and graph/data-viz animation).
    • Filter performance. Filter performance is specifically called out. This is important because SVG filters are one of SVG's most unique capabilities compared to CSS.
  3. Text layout, wrapping, and flow

    SVG text is too low-level. Developers want "real text in a box", with wrapping, flow, sizing, and containers that adapt naturally.

    This is a long-standing SVG usability gap that affects charts and data visualizations, diagrams, localization, and responsive graphics.

  4. Interop, spec gaps, and stagnation

    Developers see SVG as under-specified, inconsistently implemented, and not evolving fast enough. This comes down to platform trust, just like the performance theme above, pushing developers to avoid SVG features entirely.

  5. Linking and reusing

    SVG reuse mechanisms are powerful but full of edge cases: IDs collide, resources cannot cross boundaries, gradients fail in sprites, fonts and stylesheets do not behave predictably, and Shadow DOM integration is painful.

    Developers want reusable SVG assets that do not break when used in components, sprites, Shadow DOM, or design systems.

  6. Accessibility

    Developers building accessible charts and diagrams struggle to express relationships, roles, and semantics inside SVG in a way assistive technologies understand consistently.

  7. Geometry, paths, strokes, markers, and authoring ergonomics

    Several SVG primitives are awkward or underspecified from an authoring perspective.

    • Stroke alignment and position
    • Multiple strokes on one element
    • Markers
    • Path syntax

    Some of which are very old, indicating strong frustration.

  8. ForeignObject / embedded HTML behavior

    foreignObject is useful because it lets developers mix HTML layout with SVG graphics, but interop issues prevent reliable use.

All responses