resize svg icon for google map marker

Question

I'm having problem with icon resizing in google map. I have an svg file for make it responsive.

this is how I call the svg file

MyGreenSVG = {
    url: 'greenFill.svg',
    size: new google.maps.Size(20, 35)
};

the property: size doesn't change the size of my icon, but only crop it. the only way is to change the width and height in my svg file, and make 2 versions of it. so I loose the interest of using svg...

this is a preview of my svg file :

<svg version="1.1"
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve">

Answer 1

I'm also unable to resize using scale. I did find that if I use a MarkerImage then I can scale the svg and it looks pretty good, way better than a png as far as how smooth it is. I don't think it's a 'symbol' any more if I'm using MarkerImage though.

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: new google.maps.MarkerImage('icons/myIcon.svg',
    null, null, null, new google.maps.Size(200,200)),
  draggable: false,
  map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

I'm still looking for better solution too.

UPDATE (04/14/2015)

I found this on the docs at the bottom of complex icons and just above the link to symbols:

Converting MarkerImage objects to type Icon

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards. Icon object literals support the same parameters as MarkerImage, allowing you to easily convert a MarkerImage to an Icon by removing the constructor, wrapping the previous parameters in {}'s, and adding the names of each parameter. For example:

var image = new google.maps.MarkerImage(
  place.icon,
  new google.maps.Size(71, 71),
  new google.maps.Point(0, 0),
  new google.maps.Point(17, 34),
  new google.maps.Size(25, 25));

becomes

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

I was playing around with the size and scaledSize and have an example here. It seems like I can comment out the size and scaledSize works fine. If the size is smaller than scaledSize the graphic gets cut off.