I want SVG to be fully styled from CSS

Submitted by Thomas Wilburn

Community Pick

SVG is a powerful tool for building data visualization and graphics on the web, but it's hard to make it responsive using the current toolkit, where much of the positioning and scaling of the image is only controllable from markup. There are plans to make some properties controllable from CSS in SVG2, but implementation status is unclear, and this still falls short of the properties I really want to be able to manipulate and animate via CSS—namely, the viewBox, preserveAspectRatio, and vector-effect attributes.

Without the ability to reposition and reframe graphics in response to media queries, our current solution for responsive graphs is to simply re-render in JavaScript on every resize event, which feels needlessly complicated.

Tagged
SVG CSS
This was presented at