Scaling SVG Of Unknown Size

I would like to display an svg image inside a block of fixed size. I would like to show the image undistorted and as large as possible within the block. My problem is that the imag

Solution 1:

No you cannot do this using CSS only. The attributes that tell the browser how to scale an SVG to fill its parent container are defined in the SVG itself. There are four attributes in particular that control the scaling:

1. width
2. height
3. viewBox
4. preserveAspectRatio

The first two can be overridden with CSS, but the last two cannot. If you have no control over the SVG, then you can't guarantee that it has a viewBox or preserveAspectRatio.

You could, however, manipulate the viewBox and preserveAspectRatio attributes with Javascript.