Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG change x,y (0,0) top left to the center of my image

Tags:

svg

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

like image 775
Lory Huz Avatar asked Dec 16 '13 00:12

Lory Huz


People also ask

How do I move SVG to left?

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.

How do I center a path in SVG?

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.

What is X and Y in SVG?

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 do I adjust SVG?

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


2 Answers

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

like image 87
Tyler Eich Avatar answered Oct 31 '22 06:10

Tyler Eich


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>
like image 43
Yas Avatar answered Oct 31 '22 06:10

Yas