Google maps Api SVG is not displayed in icons

Question

SVG is not displayed in icons

Referenced sites
Add a background image (.png) to a SVG circle shape
https://codesandbox.io/s/react-google-maps-api-forked-pcup77?file=/src/index.js

source code

 <LoadScript googleMapsApiKey="">
                <GoogleMap
                    mapContainerStyle={containerStyle}
                    center={position}
                    zoom={17}
                >

                <Marker
                        position={position}
                        icon={{
                            url:
                                "data:image/svg+xml;utf-8, " +
                                '<svg width="100" height="100">' +
                                "<defs>" +
                                '<pattern id="image" patternUnits="userSpaceOnUse" height="100"                    width="100">' +
                                '<image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>' +
                                "</pattern>" +
                                "</defs>" +
                                '<circle id="top" cx="50" cy="50" r="50" fill="url(#image)"/>' +
                                "</svg>",
                        }}
                    />
                 </GoogleMap>
</LoadScript>

Is there a problem with SVG?
How to solve this problem?

I want to be able to display what I have created in SVG.