除Chrome中外，SVG图像高度自动无效

Question

I'm using image tag in SVG to include website screen captures in mockups for my personal website. I've no problem when I'm visiting my website using Chrome, but using Firefox or Safari, I'm getting some issues.

It works like this: I define a SVG mask , the image use that mask to be in the "screen", and the image height is auto to be great displayed. Here is a snippet:

 <svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39"> <defs> <filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2"> <feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset> <feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix> </filter> <linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.04"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop> </linearGradient> <filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5"> <feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset> <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse"> <stop offset="0"></stop> <stop offset="1" stop-color="#fff"></stop> </linearGradient> <linearGradient id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd" data-name="Dégradé sans nom 3" x1="743.59" y1="994.07" x2="744.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop> </linearGradient> <linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop> </linearGradient> <linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop> <stop offset="1" stop-opacity="0.05"></stop> </linearGradient> <filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13"> <feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset> <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef" data-name="Dégradé sans nom 8" x1="734.18" y1="984.18" x2="735.18" y2="984.18" gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <linearGradient id="48a5c464-8edd-45c4-9ce5-a29ab784ca76" data-name="Dégradé sans nom 9" x1="735.17" y1="984.18" x2="734.17" y2="984.18" gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse"> <g transform="translate(0 -91)"> <g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16"> <rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect> </g> </g> </mask> </defs> <g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard"> <g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook"> <g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg"> <g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)"> <path id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a" data-name="path-1" d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z" transform="translate(0 -91)"></path> </g> <path id="400dfe13-b733-4999-ba8f-7c75bc5675e2" data-name="path-1" d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z" transform="translate(0 -91)" fill="#fff"></path> </g> <path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path> <g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom"> <g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1"> <polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon> <polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon> <g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)"> <polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon> </g> </g> <polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon> <polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon> <g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom"> <path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path> <path id="6ac336ae-89f9-44e0-8892-088e108b9b0c" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path> <path id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path> <path id="41d1f204-371f-4006-b6e3-3ca8e55170a4" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path> <path id="3661128a-dd7f-4831-ad61-767d60316664" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path> </g> <g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29"> <path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path> <g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)"> <path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path> </g> </g> <path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path> <path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path> </g> <g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~"> <g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle"> <rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect> </g> <g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)"> <g> <image width="1618" height="1010" transform="translate(264 79)" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg" style="isolation: isolate; height: auto;"></image> </g> </g> </g> </g> </g> </svg> 

On chrome:

On firefox/safari:

Answer 1

height: auto is an invalid value in SVG

SVG is not html. auto isn't a valid value according to the SVG specification .

When a length is used in an SVG presentation attribute, the syntax must match the following pattern:

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

But...You can do what you want.

The good news is that you can still do what you want. To achieve this we can use the preserveAspectRatio -attribute. Here is the documentation on preserveAspectRatio .

The documentation describes the preserveAspectRatio on images:

For 'image' elements, 'preserveAspectRatio' indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.

According to the documentation the syntax looks like this:

preserveAspectRatio="[defer] align []

• Usually you can ignore defer.
• The align part indicates where the image is placed. We want to place it on the top-middle of the viewBox . Therefore this value will become xMidYMin indicating the image will be placed in the middle top.
• Setting meetOrSlice to slice will set the minimal width and minimal height of the image to that of the viewBox . Setting meetOrSlice to meet will set the maximal width and maximal height of the image to that of the viewBox . We want to see the top of your image in full width. Therefore we set meetOrSlice to slice .

With this information we can set up the preserveAspectRatio -attribute of the image. Note that the viewBox attribute is included since that is required by the spec.

<image 
   x="264" 
   y="79" 
   width="1618" 
   height="1010" 
   viewBox="0 0 100 100" 
   preserveAspectRatio="xMidYMin slice" 
   xlink:href="image.jpg">
</image>

Here is your new code (I only changed the <image> ):

 <svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39"> <defs> <filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2"> <feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset> <feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix> </filter> <linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.04"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop> </linearGradient> <filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5"> <feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset> <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse"> <stop offset="0"></stop> <stop offset="1" stop-color="#fff"></stop> </linearGradient> <linearGradient id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd" data-name="Dégradé sans nom 3" x1="743.59" y1="994.07" x2="744.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop> </linearGradient> <linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop> </linearGradient> <linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop> <stop offset="1" stop-opacity="0.05"></stop> </linearGradient> <filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13"> <feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset> <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef" data-name="Dégradé sans nom 8" x1="734.18" y1="984.18" x2="735.18" y2="984.18" gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <linearGradient id="48a5c464-8edd-45c4-9ce5-a29ab784ca76" data-name="Dégradé sans nom 9" x1="735.17" y1="984.18" x2="734.17" y2="984.18" gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse"> <g transform="translate(0 -91)"> <g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16"> <rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect> </g> </g> </mask> </defs> <g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard"> <g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook"> <g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg"> <g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)"> <path id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a" data-name="path-1" d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z" transform="translate(0 -91)"></path> </g> <path id="400dfe13-b733-4999-ba8f-7c75bc5675e2" data-name="path-1" d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z" transform="translate(0 -91)" fill="#fff"></path> </g> <path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path> <g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom"> <g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1"> <polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon> <polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon> <g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)"> <polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon> </g> </g> <polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon> <polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon> <g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom"> <path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path> <path id="6ac336ae-89f9-44e0-8892-088e108b9b0c" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path> <path id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path> <path id="41d1f204-371f-4006-b6e3-3ca8e55170a4" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path> <path id="3661128a-dd7f-4831-ad61-767d60316664" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path> </g> <g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29"> <path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path> <g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)"> <path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path> </g> </g> <path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path> <path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path> </g> <g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~"> <g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle"> <rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect> </g> <g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)"> <g> <image x="264" y="79" width="1618" height="1010" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin slice" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg"></image> </g> </g> </g> </g> </g> </svg> 

Answer 2

Unfortunately, this is not supported in any browser other than Google Chrome, as you found out. You will have to use have to find out the actual size of the image and put that in. Another option is to use JavaScript. Sorry.

So for you, your own code snippet would work.

 <svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39"> <defs> <filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2"> <feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset> <feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix> </filter> <linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.04"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop> </linearGradient> <filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5"> <feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset> <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse"> <stop offset="0"></stop> <stop offset="1" stop-color="#fff"></stop> </linearGradient> <linearGradient id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd" data-name="Dégradé sans nom 3" x1="743.59" y1="994.07" x2="744.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop> </linearGradient> <linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-opacity="0.07"></stop> <stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop> </linearGradient> <linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop> <stop offset="1" stop-opacity="0.05"></stop> </linearGradient> <filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13"> <feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset> <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef" data-name="Dégradé sans nom 8" x1="734.18" y1="984.18" x2="735.18" y2="984.18" gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <linearGradient id="48a5c464-8edd-45c4-9ce5-a29ab784ca76" data-name="Dégradé sans nom 9" x1="735.17" y1="984.18" x2="734.17" y2="984.18" gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)" xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient> <mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse"> <g transform="translate(0 -91)"> <g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16"> <rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect> </g> </g> </mask> </defs> <g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard"> <g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook"> <g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg"> <g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)"> <path id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a" data-name="path-1" d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z" transform="translate(0 -91)"></path> </g> <path id="400dfe13-b733-4999-ba8f-7c75bc5675e2" data-name="path-1" d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z" transform="translate(0 -91)" fill="#fff"></path> </g> <path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path> <g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom"> <g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1"> <polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon> <polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon> <g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)"> <polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon> </g> </g> <polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon> <polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon> <g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom"> <path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path> <path id="6ac336ae-89f9-44e0-8892-088e108b9b0c" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path> <path id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path> <path id="41d1f204-371f-4006-b6e3-3ca8e55170a4" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path> <path id="3661128a-dd7f-4831-ad61-767d60316664" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path> </g> <g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29"> <path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path> <g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)"> <path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path> </g> </g> <path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path> <path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path> </g> <g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~"> <g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle"> <rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect> </g> <g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)"> <g> <image width="1618" height="1010" transform="translate(264 79)" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg" style="isolation: isolate; height: auto;"></image> </g> </g> </g> </g> </g> </svg>