I'm trying to make a responsive SVG, but it isn't showing on Safari

26 views Asked by At

I have an SVG that I want to be responsive. I haven't set a width and height attribute because I ideally want it to be automatic. However, Safari doesn't render the SVG correctly without them.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 6" preserveAspectRatio="xMinYMid meet">
 <path d="M0.113249 3L3 5.88675L5.88675 3L3 0.113249L0.113249 3ZM3 3.5H190.5V2.5H3V3.5Z" fill="url(#paint0_linear_prev_<?php echo $i; ?>)" />
  <defs>
   <linearGradient id="paint0_linear_prev_<?php echo $i; ?>" x1="3" 
    y1="3" x2="190.5" y2="3" gradientUnits="userSpaceOnUse"> <stop stop-color="white" />
    <stop offset="1" stop-color="white" stop-opacity="0" />
   </linearGradient>
  </defs>
</svg>

Setting them to auto doesn't work either. How can I make the SVG appear and scale properly in Safari while maintaining responsiveness?

0

There are 0 answers