Why image doesn't scale properly in SVG?

Question

I am taking input(x,y, height, and width) from user to create a dynamic img in SVG through javascript.

It works fine but Height and width don't scale according to the value (it act as padding across the image). Height and width doesn't increases or decreases.

Here is my code(only relevant to question) :

Grp = document.createElementNS('http://www.w3.org/2000/svg', 'g')
Grp.setAttributeNS(null, "id", "newGrp");
svg.appendChild(Grp);

Img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
Img.setAttributeNS(null, "id", "newImg");
Img.setAttributeNS(null, "x", x);
Img.setAttributeNS(null, "y", y);
Img.setAttributeNS(null, "height", height);
Img.setAttributeNS(null, "width", width);
Img.setAttributeNS(null, "style", "height:" + height + "px;width:" + width+"px;");
//Img .setAttributeNS(null, "style", "background-size:" + height + " " + width + ";");
Img .setAttributeNS('http://www.w3.org/1999/xlink', "href", PathofImage);
Grp.appendChild(Img);

Here is how SVG look

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
width="500" height="100" overflow="visible" x="500" 
y="500" viewBox="0 0 700 700"> 
<g id="newGrp">
 <image id="newImg" x="108.3" y="375.3" height="48.5" width="144.3" 
 style="background-size:38.5 134.3;" 
 xlink:href="pathofImage"></image>  
<g>
<svg>

I have also tried background-size but it doesn't work as well.

How can I achieve this?

Answer 1

This is happening because the width and the height of your svg element do not match the viewbox. In your case the viewBox="0 0 700 700" This means that your svg canvas begins at (0,0) and have a width of 700 user units and a height of 700 user units. The size of your SVG is width="500" height="100". To match the wiewBox you would need width="500" height="500" or width="100" height="100"

Please look what happens with a rectangle the same size as the viewbox:

svg{border:1px solid;}

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
width="500" height="100" overflow="visible" x="500" 
y="500" viewBox="0 0 700 700"> 

<rect width="700" height="700" />

</svg>

Maybe this is what you need:

svg{border:1px solid;}

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
 overflow="visible" viewBox="0 0 700 700"> 
<g id="newGrp">
  <rect x="108.3" y="375.3" height="48.5" width="144.3" fill="none" stroke="black" />
 <image id="newImg" x="108.3" y="375.3" height="48.5" width="144.3" 
 style="background-size:38.5 134.3;" 
 xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/%20BrianArnesen.svg"></image>  
<g>
<svg>

Alternatively you may want to change the viewBox to something like viewBox="0 0 500 100"

Answer 2

You have to set preserveAspectRatio to your image, for example

preserveAspectRatio="xMidYMid slice"

Answer 3

Can you try with the % instead of the px?

Also please check whether the height and width is getting updated by inspecting the image from developer tool.

Also, try to update the attribute value from the developer tool and observe which works fine.