How to stretch an SVG image?

Question

How can I change the width/height of an SVG image individually, so as to change the aspect ratio? The SVG I wish to do so with is a <img> element.

Answer 1

The svg file should have preserveAspectRatio set to “none".

You can refer this Plunker : http://plnkr.co/edit/9FmjYPetNOrRT1aPTewn?p=preview

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
 xml:space="preserve" preserveAspectRatio="none">
</svg>

Answer 2

Thanks to @DeepthiS I decided to create my own solution to this problem. I created the following code to convert all <img> elements with a custom attribute to inline <svg> elements with the attribute preserveAspectRatio="none".

$('[magnitude]').each(function(){
  var el=this;

  $.get(el.src, function(doc){
    var svg = $(doc).find("svg").attr(inheritedAttributes());
    $(svg).attr(inheritedAttributes(el))

    console.log(inheritedAttributes(el))

    $(el).replaceWith(svg);
  }, "xml");
});

function inheritedAttributes(el){
  ob = new Object();

  //Inherited Attributes
  ob.id = $(el).attr("id");
  ob.source = $(el).attr("src");
  ob.magnitude = $(el).attr("magnitude");
  ob.width = $(el).attr("width");
  ob.height = $(el).attr("height");

  //Special Attributes for Magnitude functionality
  ob.preserveAspectRatio = "none"

  return ob
};

(Please note: Due to use of AJAX this will not run on Chrome. I am open to any suggestions to fix this problem.)