SVG code in browser isn't rendering (missing image icons appear)-CodePudding

I have an SVG file I exported as HTML.

When I paste this into the webpage document, I get rendering errors. Why isn't the SVG rendering and appearing as expected? See this fiddle:

Actual Output:

CodePudding user response：

I dont know the proper answer, but it's not rendering because they are clip paths, meaning that its rendering the image masks (SVG curves) but not the content inside:

the path:

   <clipPath id="id4">
    <path d="M10880.03 6197.11l0 1495.76c167.86,-56.87 335.58,-113.75 503.3,-170.63l0 -734.59c-168.44,-196.14 -336.15,-392.81 -503.3,-590.54z"/>
   </clipPath>

it cannot find each associated PNG that where supposed to be on those hrefs, like:

  <g style="clip-path:url(#id4) (...) href="Right Piece_Images\Right Piece_ImgID5.png**"/>
  </g>