Revisions to How can I make an SVG scale with its parent container?

added 38 characters in body

Source Link

edited May 10, 2022 at 14:25

347
3
15

If you want to scale SVG without preserveAspectRatio attribute.

This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height, if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove width and height from <svg> and add viewBox attribute and add preserveAspectRatio="none"

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

If you want to scale SVG without preserveAspectRatio attribute.

This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height, if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove width and height from <svg> and add viewBox attribute

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

If you want to scale SVG without preserveAspectRatio attribute.

This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height, if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove width and height from <svg> and add viewBox attribute and add preserveAspectRatio="none"

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

improved and fixed code and description

Source Link

edit approved May 8, 2022 at 18:35

Viktor Borítás

234
3
12

If you want to scale SVG without preserveAspectRatiopreserveAspectRatio attribute.

This way SVG will always stretch to fill both widthwidth and heightheight, and to do so, it will resize just widthwidth or heightheight, if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove widthwidth and heightheight from svg<svg> and add viewBoxviewBox attribute

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none"
preserveAspectRatio="none" >preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

If you want to scale SVG without preserveAspectRatio.

This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove width and height from svg and add viewBox

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none"
preserveAspectRatio="none" >

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

If you want to scale SVG without preserveAspectRatio attribute.

This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height, if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove width and height from <svg> and add viewBox attribute

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

Source Link

created Mar 18, 2022 at 6:39

Jan

347
3
15

If you want to scale SVG without preserveAspectRatio.

This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this

You have to remove width and height from svg and add viewBox

example

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none"
preserveAspectRatio="none" >

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

Collectives™ on Stack Overflow

Return to Answer