Custom Markers in Google Maps not Showing up in Firefox

Question

I have a map that I have created in rails using the google maps for rails gem. It works in Chrome and Safari but it does not display custom .svg markers in Firefox 29. It does display the custom image for clusters (which is a png).

I have bumped into a number of threads from the far past (FF 8 and 9) that said there was an issue that was resolved in 9 or 10 related to cors. However, it does not seem like it has been an issue for awhile, and especially not for 29.

Does anyone know if this is a firefox issue or google maps for rails gem issue? If it is either one what is the solution.

Update: Swapping svg for png works for now. This does not however solve the underlying issue. I would like to use a svg so I can pass in color variables.

Still no luck, both chrome and firefox show that the image is being download in developer tools. The image is viewable in firefox and chrome in the images directory. Below is the code for my SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

Answer 1

Try defining a width and height for your SVG

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px" height="20px" width="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

I have found that it can be picky when drawing SVGs with no defined width/height.

Addition

@Justin Lau has added that the marker when defined in Javascript will need the original size, even if you're using scaledSize

Many thanks to Justin for the contribution.