How can I make an inline SVG always fill out the screen?
I've created a vector image, which I'd like to use as a hero for my website. It should fill out the width and height of the viewport at all resolutions.
Furthermore I need to be able to animate the SVG's elements via CSS or JavaScript, so inserting it as a css background or an img isn't an option (at least as far as I know).
Do you guys know a way to solve this?
This image shows, what I'd like to achieve: 
Any help would be greatly appreciated!
Solution
Got it to work, thanks to Robert Longson's comment:
Applying preserveAspectRatio="xMidYMid slice" and 100% width & height to the SVG worked.
You can see it here: http://codepen.io/EigenDerArtige/pen/yMaXZx
- How to make an inset drop shadow in SVG
- Transparent text cut out of background
- SVG size in react
- Using SVG markers in google_maps_flutter Flutter plugin
- Svg line half solid, half dashed
- Shopify custom animation css not working on ios device only but it works on web and android devices
- Prevent svg translation of fontawesome
- How can I change the color of an 'svg' element?
- TypeError (is not iterable) when adding SVG to FabricJS canvas
- How to generate a dynamic SVG path where point coordinates are fixed to an HTML element and item follows the path?
- How to cut a circular part from an image?
- How to export plots from R without margins and without manually specifying width and height?
- SVG rotate="auto" is not behaving as predicted
- Converting SVG file to Android Vector Drawable XML while keeping the group structure in place
- How to set text color for my d3 chart title?
- If I have an svg file that is not an image, but a collection of definitions, can I refer to it as an external file?
- How do I pass prop "title" to svgr react component properly?
- Background color of text in SVG
- Issue with dynamic SVG rendering from JavaScript
- Rotation invariant svg patterns
- How to avoid scaling of elements inside foreignObjects of svgs?
- Composing multiple <use>'s (layers) within an <svg>
- SVG badge with tick inside
- Is pop-out effect using blob svg achievable?
- How can I give an SVG document a title, which works the same way as the <title> element in the <head> of an HTML document?
- Black background appearing on SVG when converted to PNG for mPDF library
- Complex SVG progress bar animation
- How to vertical align a tspan element inside a text element in SVG
- How to position an SVG circle along another circle's path
- SVG not respecting parent container width and height