How can I scale an SVG so that the content drawn in it to fit the container size?

Question

I have a D3.js component and it renders a chart dynamically based on the data received. My problem is that when I receive huge sets of data my component grows (I have predefined sizes for each visual element) and I don't want to refactor my component and compute the sizes for all my elements in order to fit the screen.

Answer 1

SVG attribute preserveAspectRatio indicates whether or not to force uniform scaling.

xMinYMin - Force uniform scaling. Align the of the element's viewBox with the smallest X value of the viewport. Align the of the element's viewBox with the smallest Y value of the viewport.

<svg preserveAspectRatio="xMinYMin" viewBox="0 0 300 100"></svg>

Note viewBox as opposed to width and height attributes.