svgscaleresponsivenessinline-svg
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
- Is it possible to only show half of a SVG icon?
- How to parse SVG or catch parsing errors with flutter_svg
- Python - Merging 2 SVG elelments into one SVG element
- How to prevent inconsistent thickness and gaps in SVG lines?
- Can one pixelate images with an SVG filter?
- How do I import svg from file to a component in angular 5?
- SVG Draw a circle with 4 sectors
- How to save "IPython.core.display.SVG" as PNG file?
- Text in SVGs appears round/smooth when added to the resource system
- Putting an object in front of another one (and covering the whole other object)
- CSS styling for individual paths not working
- Clip Path applied to image doesn't show image
- How to specify font-family in SVG
- Vertical Alignment of SVG in CSS
- Animated SVG border-image not honoring border-radius
- How to add inline SVGs in a nuxt3 vite project
- CSS transparent curved shape with two rounded sides
- svg @font-face works in svg but not when included in a page
- Remove or move frame that's drawn around focused AdvancedMarkerElement
- Change two objects inside a div on hover
- How to modify the fill color of an SVG image when being served as background image?
- Add onclick event to SVG element
- SVG exported from Inkscape are rendered with different font
- Simple svg css progress circle
- SVG inside flex misaligned when wrapped in div
- Why can <image> inside <svg> be :focus'ed?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I mix pattern and gradient into one path?
- How can I change the color of an 'svg' element?
- How to create a repeating SVG pattern?