How to scale an SVG that has some complex path definitions


I have an SVG whose code is like what follows:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg width="150px" height="150px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 155" version="1.1" xmlns="">
    <g id="g11" transform="matrix(1.25,0,0,-1.25,-100.0791,954.14501)">
        <g id="g3186" transform="translate(6.3490095,-13.703287)">
            <path d="..."></path>
            <path d="..."></path>
            <path d="..."></path>
            <path d="..."></path>

The "original" dimensions of the SVG generate an image is that is 300px by 310px. I want to scale the image as a whole, let's say by 50%. I've tried a variety of ways to scale the image, but the best I've accomplished is to simply clip or "crop" the original image to a region that is 50% of the original dimensions.

Using preserveAspectRatio, setting the viewbox, trying to use transform="scale(0.5"), etc. have not worked. All I want to do is scale the original dimensions by 50%.

Best Solution

transform="scale(0.5)" should definitely work. You're probably doing something else wrong.

Try wrapping g11 in another g with transform="scale(0.5)" and remove the preserveAspectRatio and viewBox

Related Question