1

I generated a simple svg image and loaded it to Chrome. Meant to position it to the center of browser(even when the browser resizing), but so far have failed on this.

Have referred to some articles about viewport/viewbox setting, and some Q&As on this site(https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div;https://stackoverflow.com/questions/13373169/align-svg-to-center-of-screen), but haven't got it done. Maybe I missed something, since I am very new to this.

Here is the full code for this svg image:

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   width="100%"
   height="100%"
   viewBox="0 -700 1080 1920"
   preserveAspectRatio="xMidYMid meet"
   version="1.1"
   id="mysvg"
>
  <g
    id="group" >
      <circle
       r="500"
       style="fill:#ffb721;fill-opacity:1"
       cy="0"
       cx="0"
       id="path" />

       <circle
       style="fill:#f71c17;fill-opacity:1;"
       id="path2"
       cx="0"
       cy="0"
       r="250" />
   </g>
</svg>

I expect this image could stay at the center of the browser, even during browser resizing.

Abraham
  • 23
  • 1
  • 4
  • Do you mean centred both horizontally and vertically on the page? – Paul LeBeau Jul 31 '19 at 01:27
  • Also your circles aren't centred in your viewBox. Did you only mean to show half the circle. If not, please attach a mockup image that shows what you want to achieve. – Paul LeBeau Jul 31 '19 at 01:30
  • Chrome has the ability to view the output of an SVG file by just dragging the file into the browser. If you want the SVG to load into a web page, you have to specifically call it in the html of the web page. Even then you will need to do some styling to get the SVG centered. – Brad Jul 31 '19 at 01:46
  • @Paul: Yes, I want them to centered both horizontally and vertically. Also I want to show the whole circle, not only half. Show the whole svg image. – Abraham Jul 31 '19 at 03:43
  • @Brad: I am not trying to make a web page, but just an svg image that could centered in the browser when dragged into the browser. When I say "load into Chrome" I mean dragging the svg file into the browser. – Abraham Jul 31 '19 at 03:46
  • You need to change the viewBox to `viewBox="-500 -500 1000 1000"` since this is the size of the `#group`. To get the size and the position of the `group` you do `console.log(group.getBBox())`. This is returning the x, y, width and height of the `group`. You don't need to give `width="100%"` to the svg element since anyway it will take all the width available. avoid giving your svg a height unless you don't mind width/height proportion. If you decide to give your svg element a smaller size you may center it using any method you would use to center any other html element. – enxaneta Jul 31 '19 at 06:40

2 Answers2

1

I think this is what you want? The SVG will be position in the center even the browser resized and scroll

ON GLOBAL CSS

CSS:

#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}

INSIDE SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29" width="100%" height="100%">
    <g id="group">
      <circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>
      <circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>
    </g>
  </svg>
Japs
  • 977
  • 2
  • 10
  • 19
  • Thanks for the answer. How should I use this code block? I tried adding this block to the svg file right after the (id="mysvg"> ) part and it didn't work in this way. – Abraham Jul 31 '19 at 04:07
  • add this to your css file – Japs Jul 31 '19 at 04:53
  • @Abraham i **edited** my code try that one if it works – Japs Jul 31 '19 at 04:57
  • Sorry, I tried it with separate css file plus the svg file modification to add the style block, still not working for my case. Do you know how to implement this within only one single svg file? I want to make this svg file, not a web page. Thanks. – Abraham Jul 31 '19 at 05:08
  • @Abraham i **edited** my answer again is that what you want?. If not you can only adjust the position of your SVG within the html element – Japs Jul 31 '19 at 05:26
  • Thank you for the update. The svg modification works. No need for the css part. It's not a universal solution, but at least it solves the current problem. That's how to design to achieve the centering target. So I marked it as solution. – Abraham Jul 31 '19 at 17:15
  • if you want to create svg you can use Adobe Illustrator and export it to SVG so that you can adjust the size and position on your css. – Japs Aug 01 '19 at 01:43
0

Your SVG needs a little modification to center it in the ViewBox. 

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 300px;
  height: 300px;
  background-color: rgba(red, .3);
}
<div class="container">
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   width="100%"
   height="100%"
   viewBox="-540 -960 1080 1920"
   preserveAspectRatio="xMidYMid meet"
   version="1.1"
   id="mysvg"
>
  <g
    id="group" >
      <circle
       r="500"
       style="fill:#ffb721;fill-opacity:1"
       cy="0"
       cx="0"
       id="path" />

       <circle
       style="fill:#f71c17;fill-opacity:1;"
       id="path2"
       cx="0"
       cy="0"
       r="250" />
   </g>
</svg>
</div>
Brad
  • 485
  • 5
  • 10
  • Hi, Brad, I would say, if only for the fixed viewBox width and height I listed in the question (1080 1920), your modification of the viewBox origin to (-540 -960) get it work as the way I expected. Could you please tell me how to correctly calculate these two numbers? But if I change the viewBox dimension then it failed to work. About the body and .container part, I am not sure how to correctly use them. I tried to make one html file and put them in but it didn't work. Besides, I want to make a single svg file, not web page. How to implement it in a single svg image file? – Abraham Jul 31 '19 at 04:17