Placing an SVG in the center of the screen

Question

I want to place an SVG file in the center of the screen, so that it takes up 25% of the screen but it keeps its proportions (i.e it isnt wider than it is high).

This is the code I have so far: http://jsbin.com/muyumegugi/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg" alt="Kiwi standing on oval">
</body>
</html>

Is it a case where I should be putting the SVG in a div and then constraining the size of the div, and making the svg expand to the size of the div, or should I be constraining the size of the svg instead.

Any help would be appreciated, not sure how to progress.

James

possible duplicate of [How to center html element in browser window?](http://stackoverflow.com/questions/982054/how-to-center-html-element-in-browser-window) — r3mainer, Nov 13 '14 at 15:33
The question is more what should I be constraining, the svg itself or a div which contains it? — J.Zil, Nov 13 '14 at 15:36
adding a div would be good if styles are added to body full content will get centered — Vitorino fernandes, Nov 13 '14 at 15:38

score 1 · Answer 1 · answered Nov 13 '14 at 15:32

1

You can center an svg via text-align;

body {
text-align:center;
}

answered Nov 13 '14 at 15:32

cport1

1,175
14
25

eclipsis · Accepted Answer · 2014-11-13T15:52:57.487

0

Something like this?

Remove the <img> from the HTML:

body { 
    background: url('http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 25% 25%;
}

edited Nov 13 '14 at 15:52

answered Nov 13 '14 at 15:41

eclipsis

1,541
3
20
56

@James Willson Updated my code to something that should work in IE9. – eclipsis Nov 13 '14 at 15:52
Sorry to be difficult but now it hasnt kept the proportions of the image the same as the original, is there any way to keep that? – J.Zil Nov 13 '14 at 15:54
`background-size` sets the proportions. Set it to what you need. – eclipsis Nov 13 '14 at 15:56
It looks like the width/height ratio is 11.4/15.4, so just scale that up as needed. – eclipsis Nov 13 '14 at 16:03

Placing an SVG in the center of the screen

2 Answers2