Menu
How to change the center of an svg file ?
Actually when I set X or Y attributes of my svg image, these coordinates are based to the top left corner of my image and I want to set these by the center of my image.
Any idea ?
PS: I use an image with .svg extension
775
Set the transform attribute of the group. e.g. transform="translate(30,0)" to move 30 units right or transform="translate(-30,0)" to move 30 units left.
You can change the svg viewBox attribute to center the path. This is especially useful if you have several paths in the svg, so you do not have to add a transform to each one. In your example that would be viewBox="0 15.674 144 144" , getting the y-offset the same way as in Pauls answer.
Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom.
❓ How can I resize a SVG image? First, you need to add a SVG image file: drag & drop your SVG image file or click inside the white area to choose a file. Then adjust resize settings, and click the "Resize" button. After the process completes, you can download your result file.
In your SVG, set the viewBox to -{width / 2}, -{height / 2}, width, height. Given a width of 600 and a height of 400, your SVG would include viewBox="-300 -200 600 400".
JSFiddle example using the HTML5 logo
87
Suppose the width of the svg element is W and its height is H.
You can use the following pattern:
<svg width="W" height="W">
<g transform="matrix(1 0 0 -1 W/2 H/2)">
...
</g>
</svg>
<svg width="200" height="200" style="border: 1px solid gray;">
<g transform="matrix(1 0 0 -1 100 100)">
<circle cx="0" cy="0" r="25" fill="red"></circle>
<circle cx="50" cy="50" r="10" fill="blue"></circle>
</g>
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
