Scaling an SVG

[asasass]

How would I be able to make this SVG scalable?

Edit fiddle - JSFiddle - Code Playground

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.01 0.0001" numOctaves="5"/>
        <feColorMatrix values="1 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 1"/>
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)"/>
</svg>

[PaulOB]

It already is fluid as it is at 100% the width and height of the viewport because that’s the size you gave it.

You could do this:

svg{
  width:50%;
  height:auto;
 aspect-ratio: 16 / 9;
}

Or set its width and height in relation to an aspect ratio parent much as you do with the iframe.

Or I could believe you could add a viewbox attribute and then sets its width in css like you do with images. SVG isn;t really my thing.

[asasass]

What would the viewBox number be for 100%

viewBox="0 0 0 0"

https://jsfiddle.net/ambcrquk/

[PaulOB]

@asasass

What would the viewBox number be for 100%

You are still setting the svg to width:100% and height:100% in the css.

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

If you use 4 zeros then it will be zero I believe without the CSS,

Have a good read here:

SVG Viewport and View Box

I don’t know what the intrinsic ratio of that image is. If you made it then you should know what to set?

[asasass]

Doesn’t this tell you that?

You mean the width height of the tile pattern?

https://jsfiddle.net/ocghaL3p/

300 x 150

Is that hat the viewport would be?

I think it worked here:

https://jsfiddle.net/kgdb9jr1/1/

[PaulOB]

@asasass

I think it worked here:

No, you are still setting the svg to 100% high here:

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

I believe that will stretch the svg to 100% and you will get gaps at the top and bottom as the viewbox takes effect.

You can’t really set height and width to 100% and maintain aspect ratio, You would need to do this I believe.

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

svg{width:100%;height:auto;}

Note I have removed the svg selector from the first rule.

Imagine if you had an image and you set width:100% and height:100% then it will stretch and not maintain its aspect ratio. You need one dimension and the other set to auto. I believe with the viewbox in place the auto dimension will be the aspect ratio dimension.

[asasass]

It’s supposed to look like this?
https://jsfiddle.net/p2vg9trj/2/

[asasass]

Maybe it should be this?
https://jsfiddle.net/p2vg9trj/5/

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

[Archibald]

The aspect ratio is defined by the viewbox width and height parameters unless you define how the SVG can stretch by using preserveAspectRatio.

Your baseFrequency parameters are with respect to the viewbox width and height AFAIK. Change your viewbox to 600 wide and see the affect.

[PaulOB]

@asasass

It’s supposed to look like this?

Is it? You tell me? I don’t know what you want it to look like or what you are trying to do?

@asasass

Maybe it should be this?
https://jsfiddle.net/p2vg9trj/5/

That’s what you had before?

It will look like this:

You haven’t told me what you are trying to do?

Are you trying to cover the viewport with that svg?

If so then you will need to preserve the aspect ratio.

Try this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" 
preserveAspectRatio="xMinYMin slice">
    <filter id="filter">
        <feTurbulence baseFrequency="0.01 0.0001" numOctaves="5"/>
        <feColorMatrix values="1 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 1"/>
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)"/>
</svg>

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

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

Assuming that’s what you wanted

[dennisjn]

I don’t really understand what you are trying to do.
But if it is to scale the rectangle then either enclose it in a svg tag and set the origin and dimensions of that svg tag like this

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.01 0.0001" numOctaves="5"/>
        <feColorMatrix values="1 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 0
                               0 0 0 0 1"/>
    </filter>
    <svg x="25%" y="25%" width="50%" height="50%">
      <rect width="100%" height="100%" filter="url(#filter)"></rect>
    </svg>
    
</svg>

Or set the origin and dimensions of the rectangle.