4 ms·

This is interesting. I really wish this super small library named Chartist was more actively developed. It's only 10kb in size and generates SVG charts. The h

This is interesting. I really wish this super small library named Chartist was more actively developed. It's only 10kb in size and generates SVG charts. The huge benefit of SVG is that it's natively responsive and also prints extremely well. Wheres CSS doesn't https://gionkunz.github.io/chartist-js/ https://gionkunz.github.io/chartist-js/

brundolf 6y ago
I'm not sure I understand how SVG is more natively responsive than CSS? I also haven't had problems printing with CSS - I maintain my resume as a styled HTML document - though I haven't done a ton of web printing so there could be problem cases I haven't faced
- eyelidlessness 6y ago
  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.
  - brundolf 6y ago
    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
    - tiffanyh 6y ago
      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.
      - brundolf 6y ago
        Sorry, but I can't really agree
      - thitcanh 6y ago
        That’s not responsive. That just means scalable. Responsive means that it changes shape depending on size. 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.
        eyelidlessness 6y ago
        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.
        thitcanh 6y ago
        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.
    - danielheath 6y ago
      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.
    - eyelidlessness 6y ago
      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: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/v...
  - monoideism 6y ago
    You can also set a special stylesheet just for printing: <link rel="stylesheet" media="print" href="print.css">
    - eyelidlessness 6y ago
      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.

brundolf 6y ago

I'm not sure I understand how SVG is more natively responsive than CSS? I also haven't had problems printing with CSS - I maintain my resume as a styled HTML document - though I haven't done a ton of web printing so there could be problem cases I haven't faced

eyelidlessness 6y ago
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.
- brundolf 6y ago
  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
  - tiffanyh 6y ago
    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.
    - brundolf 6y ago
      Sorry, but I can't really agree
    - thitcanh 6y ago
      That’s not responsive. That just means scalable. Responsive means that it changes shape depending on size. 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.
      - eyelidlessness 6y ago
        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.
        thitcanh 6y ago
        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.
  - danielheath 6y ago
    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.
  - eyelidlessness 6y ago
    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: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/v...
- monoideism 6y ago
  You can also set a special stylesheet just for printing: <link rel="stylesheet" media="print" href="print.css">
  - eyelidlessness 6y ago
    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.