SVG shows content outside of viewBox when it fills whole browser window

Question

I want to have an inline SVG fill the whole width of the browser window. The SVG has some content outside of the viewBox. This is the SVG file: http://pastebin.com/F5irDNai

What happens when I set the width to 100% is that the content outside of the viewBox gets visible:

svg {
  width: 100%;
}

See this jsfiddle: https://jsfiddle.net/3w2hy8kv/1/ The red rectangle is the viewBox boundary.

What I want is to have the viewBox of the SVG fill whole browser window horizontally without the content outside of the viewBox appearing. Is that possible?

Answer 1

Thanks to @Ruskin and SVG viewbox showing showing off-screen items who got me in the right direction.

Attribute added to the svg element:

preserveAspectRatio="xMidYMin slice"

It also works adding this attribute with JavaScript.

CSS:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#theSVG svg {
  width: 100%;
  height: 100%;
}

See updated fiddle: https://jsfiddle.net/74cc07m1/1/

EDIT: Fiddle updated with optimized SVG: https://jsfiddle.net/74cc07m1/2/