CODEWITHSUNDEEP
svgresizewidthinline
Peter
Peter

Reputation: 15

SVG inline to HTML - resize to width

If I embed an svg image in HTML it resizes as the browser's width is changed (shrinking and expanding) and the image stays at the top of the page.

If I inline the same svg I get a problem. As I shrink the width of the browser, the image shrinks with it, but the image moves down the page.

You can see what I mean in this fiddle

Since the image needs to stay in the same relative position to some embedded svgs, moving down the page is a problem.

<!DOCTYPE html>
<html>
<head>
<style>
svg{
  position: absolute;
  left: 1px;
  top: 1px;   
  width:100%;
}
#externalSVG{
  position: absolute;
  left: 1px;
  top: 1px; 
  width:100%;
}
</style>
</head>
<body>
<svg width="960.42" height="444.28" version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>
<embed id="externalSVG" src="embed.svg" >
</body>
</html>

Presumably I've misunderstood something about layout. Any ideas?

Upvotes: 1

Views: 1028

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Read up on what the viewBox attribute does, and how it interacts with width and height.

If your SVG has a viewBox then its contents will be scaled to fit the width and height specified in the SVG. And will also be (by default) centred horizontally and vertically in that "viewport rectangle" (as specified by width and height)

Your SVG specifies a width of "960.42" and a height of "444.28". However you are over-riding the width to "100%".

That means when you naroow your page to, say, 200px, the width will become 200px, but the height will stay at 444.28. The result is a tall narrow viewport that the SVG gets centred vertically in. See below.

svg {
  width: 200px;
  height: 444.28px;
  background-color: linen;
}
<svg version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>

The simplest solution is to remove the width and height attributes from your SVG. If you do that, then the browser will automatically calculate the correct height for the SVG so that it keeps the 254:117 width:height aspect ratio as specified in your viewBox.

svg{
  position: absolute;
  left: 1px;
  top: 1px;   
  width: 100%;
  background-color: linen;
}
<svg version="1.1" viewBox="0 0 254.11 117.55" >
 <g transform="translate(-127.11 -59.721)">
  <g transform="matrix(-.5 0 0 .5 381.25 59.248)" fill="#2f0">
   <rect x="396.88" y="73.891" width="74.804" height="74.804" rx="0" ry="0"/>
   <rect x="430.99" y=".94618" width="6.588" height="235.1" rx="0" ry="0"/>
   <rect x=".056101" y="108.59" width="508.22" height="5.4108" rx="0" ry="0"/>
  </g>
 </g>
</svg>

Upvotes: 2

Related Questions