Comment by Jason Knight on "Is there a way to make svgs responsive?"

Only draw the parts that NEED to be SVG in the SVG -- break it into the smaller subsections and then use markup and CSS to handle the rest.

Basically, don't slop it all into one SVG file and magically expect it to work. Same reasons one shouldn't use images as text, or try to create complex interactions between perfect size images and text content; it's all "not viable for web deployment" concepts.

Though IMHO, "not viable for web deployment" describes a LOT of what people are doing with SVG right now. It's cute for an icon or two, anything more is typically just telling users to go plow themselves.

ESPECIALLY if you're slopping it into the markup missing caching opportunities across pages.

I'm not sure if I understand what you mean exactly. What parts of a D3 graph would I not have in one "main" svg?

Sorry, didn't catch the d3.js part since I was unfamiliar with it, assumed it was just something that spit out static SVG of some sort.

Looking at it what it does is EXACTLY the type of scripting based content generation I wouldn't even be doing on a website in the first place in any situation where I cared about accessibility. Such static scaled designs simply are NOT compatible with proper elastic, semi-fluid, or responsive design and as such are a giant middle finger to accessibility and usability.

To that end, it's not something I'd even be ABLE to put on the websites I do for clients since it's an instant WCAG violation. _(since scripting off/blocked/inapplicable users get nothing). _In fact it's EXACTLY the type of stuff I spend my time bailing clients OUT OF getting sued or fined over under laws such as the UK's EQA, US ADA, etc, etc whenever some overzealous "ooh shiny graphics" types slops this type of stuff into a page with no care for the end user experience.

I don't think that type of scripting controlled SVG is responsive layout compatible, and even if it were, being so JavaScript heavy it's not accessible.

This is borne out by EVERY one of D3's examples being an inaccessible broken mess at anything other than the fixed width screen size they were made for.

Also being so scripting heavy, it looks more like a job for canvas than SVG.

Well you can use canvas with D3, but the gurus prefer svg (I don't know the reason). I'm actually asking this question for my dissertation which has your sentiment against those kind of experiments as a basis. So I'll explore the different ways to do this, but obviously not without looking for existing concepts.

I'll make sure to keep the limitations with usability and accessibility in mind though.

SVG is preferable for responsive graphics due to the lack of pixelization when zooming in and it doesn't have to worry about anti-aliasing artifacts if I recall correctly. The increase fidelity of graphics drawn with SVG is also better for accessibility if implemented properly. Frameworks like D3 and SnapSVG make this easier to do without messing up, as they've generally accounted for the strange edge cases you'd encounter when coding it from scratch. Also makes the code cleaner.

If you're looking for a canvas approach, look into Charts.js

Search Hashnode