Place square svg to the center of the screen, scal

Question

It seem to be a silly question and possibly a dupe, but I couldn't find a good solution for a while, so finally dare to ask.

I want to place an <svg> element inside an html document and satisfy the following requirements:

1. Image is placed as an <svg> html5 element, not an external svg-file. (Actually, I want to dynamically generate it with D3.js.)
2. Image is placed in the center of the screen, both vertically and horizontally.
3. Actual size of the image should not exceed some predefined value (like 15cm × 15cm).
4. If either current screen's width or height is less then 15cm, image should be scaled (preserving aspect ratio) in such a way it fit to screen. No parts of the image should be clipped. Image should be placed in the center.

It's basically the same requirements as described in this article. It says that I should use preserveAspectRatio="xMidYMid", but gives no example on how to do it and how does it correspond to other tricks described in the article. This article suggests preserveAspectRatio="xMidYMid meet", but again I wasn't able to reproduce the examples provided there to meet all my requirements.

My current code is like this but it does not fit in height and does not center vertically.

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
}

<div class="svg-container">  
<svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
  <circle cx=50 cy=50 r=50></circle>
</svg>
</div>

Answer 1

You still want aligment vertical? look this

.vertical-align {
	height:1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-container {
  	max-height:15cm;
  	max-width:15cm;
	height: 100%;
	width: 100%;
}

<div class="vertical-align">
	<div class="svg-container">  
	<svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
	  <circle cx=50 cy=50 r=50></circle>
	</svg>
	</div>
</div>

Answer 2

The flexbox solution would be my first choice. Since someone else has already answered with that idea I came up with this different approach.

Basically it is the absolute centering technique and rely on absolute position and auto margin to center the element.

body {
  height: 100vh;
  margin: 0;
}

svg#picture {
  max-height: 15cm;
  max-width: 15cm;
  height:100%;
  width:100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}

<svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
  <circle cx=50 cy=50 r=50></circle>
</svg>

Answer 3

The following works if the aspect ratio of the SVG is a given. If the aspect ratio of the SVG is dynamic, you have to use JavaScript, I believe.

This snippet works in modern browsers and takes full advantage of the relatively new vmin viewport-percentage length. Browser support is pretty good. For horizontal and vertical centering, the flexbox layout mode is leveraged. Again, browser support is pretty good.

The trick is that the dimensions of the SVG are set relative to either the width or the height of the screen, whichever is smallest. This means that even when we would set it to be 100vmin, the SVG is guaranteed to fit the screen (but barely). To enforce maximal dimensions, good old max-width and max-height are used, exactly as they are intended to be used.

html, body {
  /* ensure that all of the viewport is used */
  width: 100%;
  height: 100%;
  /* ensure that no scrollbars appear */
  margin: 0;
  padding: 0;
  
  /* center SVG horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

#picture {
  /* ensure 1:1 aspect ratio, tweak 50 to make SVG larger */
  width: 50vmin;
  height: 50vmin;  
  /* set some maximum size (width and height need to match
   * aspect ratio, 1:1 in this case */
  max-width: 200px;
  max-height: 200px;
}

<svg id="picture" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"></circle>
</svg>

Answer 4

Try this css:

#picture {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 80%;
  height: 80%;
}

here is the result: https://jsfiddle.net/twe9jfkf/

is this what you try to achieve?

Answer 5

Have you tried adding the image as a background to your svg-container?

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
  background-image:url('yourSVG.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

Answer 6

Rather than css, you may want to try using svg's width/height, and viewBox computed via getBBox() A basic example is shown below:

<!DOCTYPE HTML>

<html>

<body>
<svg>
  <circle cx=50 cy=50 r=50 fill=red />
</svg>

<script>
//--onload, onresize----
function sizeSVG()
{
	var mySVG=document.getElementsByTagName("svg")[0]

  	var svgW=window.innerWidth
	var svgH=window.innerHeight

    var bb=mySVG.getBBox()
	var bbx=bb.x
	var bby=bb.y
	var bbw=bb.width
	var bbh=bb.height

    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}

document.addEventListener("onload",sizeSVG(),false)
window.onresize=sizeSVG
</script>

</body>

</html>