How to - SVG fit heighth AND width

Question
1

Hey there,

I’m hoping someone can give me a little help here.

My goal:
For the layout of my site I wish to use a range of SVG elements.
I want to place them in a Wide box and have them fitting to the width AND height of that box.
I want the SVG to stretch, not remain it’s proportion.

To be a bit more precise:
If the svg where two crossed lines, I need the start and end of each line to end in the corners of the Wide box. So it will fit on any screen.

I’ve gotten this far:
The Wide box with the svg in it has a HTML ID, in this case: test
So that I can use the Embed function to let the svg fit the way I need.

What I have now filled in, in the Embed function/element:

<style>
	#test
		{
		width: 100vw;
		height: auto;
		object-fit: fill;
		}
</style>

I’d be very happy with any tips, thank you!! :slight_smile:

2

ps,

I found one way to do it (see below), however I’d still prefer an easier way to do this. Tips remain welcome! :slight_smile:

The solution I have now is altering the code of each separate SVG.
So if this could be done with some code in the Embed element instead, that would still make life much easier.

The solution I have now:

In the SVG code,
before the closing > of <svg>,
I place this:
x="0px" y="0px" height="100%" width="100%" preserveAspectRatio="none"
And boom! It works! The complete SVG stretches within the corners of the Wide box in Sparkle.

ps The <svg> tag is usually a long(er) line of code, starting with <svg id="bla bla.
I just placed it at the end of that code/tag, before the closing >.
That might not be the most beautiful place, but it works :slight_smile: