CODEWITHSUNDEEP
csshtmlsvg
Eduardo
Eduardo

Reputation: 8402

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 image is supplied by the user, so I do not know its dimensions. Is there any way to do this with CSS only?

Upvotes: 0

Views: 601

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

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.

Upvotes: 4

Related Questions