Dynamically growing/shrinking a piechart in CSS is much more difficult to implement. Where as with SVG, it just works as-is and no additional effort needs to be done to make it work.
By your definition any bitmap is “responsive”
SVG can’t really be responsive since values are generally declared as attributes. Good luck changing a path via media query.
The most responsive SVGs really only hide/show detail depending on size, but they don’t reshuffle unless you literally have both layouts in the SVG.
Regarding changing layout in SVG, you just need the `use` tag.
Responsive does include other methods as well, but nobody looks at a CSS-less page and calls that responsive because the text always fits the window. That’s just too broad of a definition.
The comment I was replying to specifically mentioned that “SVGs are responsive because they resize without additional effort.” That’s blatantly false. “No additional effort” only gives you an SVG that scales (just like images can, and you don’t call images responsive)
On review, however, SVGs can be made responsive, it’s just that it’s not easier than regular HTML.
> Responsive does include other methods as well, but nobody looks at a CSS-less page and calls that responsive because the text always fits the window. That’s just too broad of a definition.
Why? You’re the one making the claim here. The original coining of the term and the author’s 10 year piece certainly talk about other techniques. But not as some formal definition, rather as ways to achieve the original goal: one design which serves all. If the design has the default layout, why would it need to do more?
> The comment I was replying to specifically mentioned that “SVGs are responsive because they resize without additional effort.” That’s blatantly false. “No additional effort” only gives you an SVG that scales (just like images can, and you don’t call images responsive)
Now this is beyond the pale. Just search “responsive images” and filter for before the picture tag and srcset attribute and you’ll see that this is exactly what was expected. Of course you can do more now, but I don’t think it’s even common practice except when automated by tooling.
But more than that, depending on usage, there are ways SVG can scale that raster images can’t. Position and size can scale independently. Images which benefit from it can change aspect ratio without a problem (you can see an example of this on my personal site, link in profile, scaling from very wide to very narrow).
1. vector-effect[1] allows you to specify, per element, how different aspects of its rendering scale—or don’t—proportional to the containing viewBox.
2. You can nest viewBox coordinates (symbol element or nested SVG) to override the relative proportions of child elements without actually changing the space they take up on their container.
3. You can actually scale real (accessible) text, as if it’s a graphic, to fit a container (textLength attribute) without weird hacks or JS.
1: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/v...