Aligning the objects in SVG center

Question

How can i align objects within svg tag center. I can make it aligned by adjusting the x,y cordiantes in viewbox. But every time i need to change the value according to the size

Answer 1

You can move the min-x and min-y coordinates to place your content in the center. Description of the viewBox can be found here: https://sarasoueidan.com/blog/svg-coordinate-systems/

The better way to go about it is to export the file with the correct bounding box to get it completely center aligned. Opened your svg (in Sketch) added an invisible box around it of 35 x 35px, it exported to whole thing and cleaned it up:

svg {
  border: 1px solid red;
}