CODEWITHSUNDEEP
htmlsvgbackground
Rene
Rene

Reputation: 23

Fill responsive svg with background image with preserving ratio

I try to draw a svg in my HTML Code to have a specific path/object with an background image. The object should be a little bit responsive (using bootstrap), but filled with the image and the image should preseve its ratio. 

<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47"  preserveAspectRatio="none"  >
    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
        <image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
      </pattern>
    </defs>
        <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
    </svg>

You can see it here in the live demo: https://liveweave.com/N5nib6 https://jsfiddle.net/zyyvd86g/

Maybe anybody can help? I hope the problem is clear enough.

Upvotes: 2

Views: 6716

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

IMO opinion, the simple solution to your problem is to use a different preserveAspectRatio on your SVG.

Using preserveAspectRatio="none" is going to stretch your SVG and cause problems.

I'm assuming you want to keep the shape of the "swoop" on the bottom of your path. Correct?

If that is the case, you might prefer to use

preserveAspectRatio="xMidYMax slice"

instead. This scales the SVG up to fill the full width of the SVG viewport, whilst keeping the aspect ratio the same, and keeping the bottom of the SVG viewBox on screen.

<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
	    <image xlink:href="http://lorempixel.com/1153/680/" x="0" y="0" width="1153" height="680" />
    </pattern>
  </defs>
  <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>

Upvotes: 0

Biby Cheriyan
Biby Cheriyan

Reputation: 93

You can use max-width:100% for the svg element and div element wrap on this svg. You can get the responsive image

div {
    width: 80%;
    height: auto;
    margin: 0 auto;
}
svg {
    max-width: 100%;
    height: auto;
}
<div>
	<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47"  preserveAspectRatio="none"  >
    <defs>
      <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
        <image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
      </pattern>
    </defs>
        <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
    </svg>
</div>

Upvotes: 1

Related Questions