How do I scale an SVG that has some complex path definitions?

nhuff717 picture nhuff717 · Apr 30, 2012 · Viewed 32.5k times · Source

I have an SVG whose code is like what follows:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150px" height="150px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 155" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <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>
        </g>
    </g>
</svg>

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%.

Answer

mihai picture mihai · Apr 30, 2012

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