html - how to make svg responsive

Question

I'm trying to make this massive svg responsive. However, it's not working and I don't know why.

I tried the following: - setting width: 100% height: auto (the diagram disappeared as soon as I removed the set width/height in pixel, regardless what i put back) - using the viewbox attribute as suggested by https://css-tricks.com/scale-svg/

Here's the code (yes, I know it's huge. why I need to make it fit to 100% width): http://www.cssdesk.com/bsakG

Can someone give me some hint as to what I'm doing wrong? I tried many things suggested by other articles, but I seem to keep running into the same problem where if I get rid of the fixed height/width, the whole thing disappeared.

(and yes I know this question may have been asked before, but none of the answers solved my problem)

Answer 1

Contrary to the assumptions in the comments it is perfectly fine to use length values specified as percentages. The spec covers the details in its basic data types section.

Combining this knowledge with the hints from the article you linked to in your question you could end up with something like the following for a responsive layout:

<svg viewbox="0 0 3840 7000" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">