CODEWITHSUNDEEP
svgscaling
ShadSterling
ShadSterling

Reputation: 1818

SVG viewbox not always scaled to width and height

I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)

I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.

While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,

This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.

How do I ensure that my SVG is scaled rather than padded to fill the width and height?

Upvotes: 5

Views: 2928

Answers (1)

ShadSterling
ShadSterling

Reputation: 1818

The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.

The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.

Upvotes: 17

Related Questions