Search code examples
svgimage-resizing

How to scale to fit image inside svg

I'm trying to modify a svg to make the image it holds take the full width and height of the svg. How can I do that?

I'm trying to modify width and height to 100%, x, y to "0" and set this svg property preserveAspectRatio="xMidYMid meet".

This is the initial svg :

<?xml version="1.0" encoding="UTF-8"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1512" height="1063" viewBox="0 0 1512 1063" xml:space="preserve">
    <desc>Created with Fabric.js 1.6.7</desc>
    <defs></defs>
    <g transform="translate(776.8 529.9) scale(1.01 0.95)">
        <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image>
    </g>
    <g id="1554312687241" transform="translate(781 762.29)">
        <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
            <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
        </text>
    </g>
    <g id="1554312687289" transform="translate(779 847.3)">
        <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
            <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
        </text>
    </g>
    <g id="1554312687296" transform="translate(776 811.17)">
        <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
            <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
        </text>
    </g>
</svg>


body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve"><desc>Created with Fabric.js 1.6.7</desc><defs></defs><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image></g>	<g id="1554312687241" transform="translate(781 762.29)">		<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>		</text>	</g>	<g id="1554312687289" transform="translate(779 847.3)">		<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>		</text>	</g>	<g id="1554312687296" transform="translate(776 811.17)">		<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>		</text>	</g></svg>

What I've been trying to do :

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve" preserveAspectRatio="xMidYMid meet"><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="100%" height="100%" preserveAspectRatio="none"></image></g>	<g id="1554312687241" transform="translate(781 762.29)">		<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>		</text>	</g>	<g id="1554312687289" transform="translate(779 847.3)">		<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>		</text>	</g>	<g id="1554312687296" transform="translate(776 811.17)">		<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>		</text>	</g></svg>

I expect this result :

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
  
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/photo-1501366062246-723b4d3e4eb6.jpg" x="0" y="0" width="100%" height="100%"></image>
  
</svg>

But if i just change image url of expect svg, result is different of what i expect i don't understand why.

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
  
  <image xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" width="100%" height="100%"></image>
  
</svg>

The final objective is to download the svg in png. The code to transform to png is finished however because of this svg problem, the final image is not good.

Solution

  • You need to adjust the viewBox attribute. The one you currently have is way too big. Your important content occupies a small portion in the middle of that area.

    Your current viewBox is:

    viewBox="0 0 1512 1063"

    A better viewBox that matches the non-transparent part of your background image is:

    viewBox="472 16 616 960"


    body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
    <!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" xml:space="preserve">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

    However in this example it still does not fit exactly. That is because your SVG dimensions (219 x 302) have a different aspect ratio to the image/viewBox (616x960).

    You can fix that in various ways:

    1. You could stretch the viewBox area, to fit the wider SVG dimensions, by adding preserveAspectRatio="none" to the SVG.

    body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
    <!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="none">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

    1. You could arrange for the viewBox area to be enlarged to fit the wider SVG dimensions (equivalent to HTML's background-size: cover), by adding preserveAspectRatio="xMidYMid slice" to the SVG.

    body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
    <!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="xMidYMid slice">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

    1. You could make the SVG narrower by reducing the width attribute. A more correct value would be:

      302 * (616/960) ~= 194


    body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}
    <!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="194" height="302" viewBox="472 16 616 960">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>