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.
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...