Custom SVG is not loading in my image tag

Question

Currently I'm trying to load in my custom svg component inside an image tag. But for some reason I am unable to see the svg image which is inside a map component. My custom SVG file is like so where I am loading another image inside the SVG:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">

  <clipPath id="clip">
    <path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
    -284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
    23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
  </clipPath>

  <image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />

  <use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</svg>

And my image tag is like so:

<img src="icon.svg"/>

But when I go to check the network tab this is what it shows:

CodeSandBox: https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-6rupe?file=/src/App.js

score 2 · Accepted Answer · answered Aug 29 '21 at 07:47

To be honest I'm not sure if there's an issue with external/cross-domain image resources in codesandbox (could also be an issue developing locally). The duplicate Robert tagged leads me to believe the issue is with this specific SVG asset itself.

But there is still a way to render it.

Import the svg image as a ReactComponent and render it instead of the img tag.

Source

import { ReactComponent as Icon} from "./icon.svg";

...

<Icon
  style={{
    width: 48,
    height: 48
  }}
  onMouseEnter={() => {
    setSelectedProperty(item);
    setIsPopupShown(true);
  }}
  onMouseOut={() => {
    setSelectedProperty(null);
    setIsPopupShown(false);
  }}
/>

Custom SVG is not loading in my image tag

1 Answers1

Linked