How do I scale an SVG that has some complex path definitions?
scale, svg
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`
Problem
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%.