CSS can certainly be responsive to a degree, if written to be, but there are definitely some features of SVG that go beyond CSS capabilities. This has more to do with the fact that it’s a graphics format—designed for adaptable scaling from the start, with a simple layout model—than anything else. And of course, CSS has some advantages of its own because it has such a huge range of layout options/techniques.
Edit: I also maintain my resume as responsive HTML. I haven’t taken the time to address print at all, but having previewed my own print rendering it definitely needs a lot of work before it’s print/PDF ready.
Yep and I fully intend to when I get back to that. I also intend to extract my dark mode styles in the same way so I can add an optional/progressively enhanced setting to override the prefers-color-scheme query for visitors who (like me) have a non-global preference.
You still haven't given a specific example of how SVG can be responsive. Are you just talking about proportional scaling (resizing the shapes as the container's size changes)? Because if so you can accomplish that in CSS by using percentages for size/position
Having a chart as an SVG grow or shrink in size based on the size of the browser windows is radically easier with SVG than CSS.
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.
The coining of “responsive web design” was a reference to architecture which responds to its present occupants. It’s not about changing shape, it’s about making the same content and experience available regardless of environment. Changing shape or layout is a technique to achieve that, not a defining characteristic.
Regarding changing layout in SVG, you just need the `use` tag.
Again, by your definition, every non-fixed-width HTML page could be called responsive. I don’t think so.
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.
> Again, by your definition, every non-fixed-width HTML page could be called responsive. I don’t think so.
> 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).
Okay, I’ll give three examples from recent work on my personal site:
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.
It’s responsive exactly the same as css, but it gives you composability (reuse of template elements) and size-to-fit text (given a container of size X and text Y, render the text at the maximum size that fits), which are both lacking in html+css.
Edit: I also maintain my resume as responsive HTML. I haven’t taken the time to address print at all, but having previewed my own print rendering it definitely needs a lot of work before it’s print/PDF ready.