Empty Space Around Google Map Marker Icons In Chrome Device Mode

I'm trying to use an svg file as my marker icons. Everything looks great, except for that fact that there is this giant empty space around the marker, rendering them incredibly hard to interact with when grouped up. I've tried using icon.size and icon.scaledSize to address my issue but I still can't remove the empty space. Perhaps it's my svg file?

  function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: {
        url: 'assets/icons/art.svg'
    }
  });
}

this is the svg (converted to png) The actual svg in question

Here's the issue

EDIT:

It turned out that using Chrome's Device Mode was interfering with the way Maps rendered the icons.

I ended up seeing the expected result after following @bonnie suggestion (cropped any excess empty space from my files), adjusting the icon.scale and icon.scaledSize properties, and exiting Device Mode.

The final icon object was:

icon = {
    url: 'assets/icons/art.svg',
    size: new google.maps.Size(35, 35),
    scaledSize: new google.maps.Size(40, 40)
};

Google maps rendered icon.size as image & icon.scaledSize as image

I still have no idea why Chrome's Device Mode can't render marker icons properly.