CODEWITHSUNDEEP
javascripthtmlcsssvg
castamere
castamere

Reputation: 25

HTML SVG responsive size

I am developing web and mobile apps. I want to create a waving header with svg html, i already created my svg pattern, but it's not responsive to my window size.

Here is my code:

<div style="margin: -10px; text-align: center;">
      <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
    </div>

I want to make this svg expand based on my window size (Web view)

I want to make this svg expand based on my window size (Web view)

mobile view

(mobile view)

Upvotes: 2

Views: 2634

Answers (1)

sbgib
sbgib

Reputation: 5828

Try using CSS to set the SVG width to 100% and height to auto:

<div style="margin: -10px; text-align: center;">
  <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
</div>

EDIT: To scale the width without scaling the height, set width to 100% (a fixed height can also be specified) and add the preserveAspectRatio attribute with a value of none:

<div style="margin: -10px; text-align: center;">
  <svg width="360" height="301" viewBox="0 0 360 301" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100px;" preserveAspectRatio="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M-48 292.136L-29 268.123C-10 244.11 28 223.497 66 229.5C104 235.503 142 268.123 180 292.136C242.5 320 256 274.126 294 262.12C332 250.113 370 268.123 389 262.12L408 256.117V0H389C370 0 332 0 294 0C256 0 218 0 180 0C142 0 104 0 66 0C28 0 -10 0 -29 0L-48 40V292.136Z" fill="url(#paint0_linear)"/>
      <defs>
        <linearGradient id="paint0_linear" x1="330.417" y1="172.594" x2="109.554" y2="432.703" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28DDD2"/>
          <stop offset="0.86034" stop-color="#3DC0F0"/>
        </linearGradient>
      </defs>
      </svg>
</div>

Upvotes: 7

Related Questions