SVG doesn't display correctly

Question

Here's the how my SVG is supposed to look like.

below is how it looks when I code it in my web.

I'm not really sure what's going on here. Any help would be much appreciated. Below is my SVG code. Thanks in advance.

<svg class="product-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
  <defs>
    <style>.cls-1,.cls-2{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5{stroke:#333;stroke-miterlimit:10;}.cls-1{stroke-width:3.79px;}.cls-2{stroke-width:5px;}.cls-3{fill:#333;}.cls-4,.cls-5{fill:none;stroke-linecap:round;}.cls-4{stroke-width:3px;}.cls-5{stroke-width:2.27px;}</style>
  </defs>
  <circle class="cls-1" cx="460.7" cy="282.87" r="48.53"/>
  <circle class="cls-2" cx="519.36" cy="325.31" r="64.01"/>
  <rect class="cls-3" x="262.17" y="399.01" width="384.48" height="31.32" rx="15.66"/>
  <path class="cls-3" d="M284.36,441.13,301.1,552.91a45,45,0,0,0,44.51,38.34h217.6a45,45,0,0,0,44.5-38.34l16.74-111.78Z"/>
  <path class="cls-3" d="M453,392.53h-82.8c0-9.35,3.12-21.17,8.36-28.06a0,0,0,0,0,0,0,41,41,0,0,1,32.67-16.19H412a40.87,40.87,0,0,1,29,12C448.43,367.71,453,381.19,453,392.53Z"/>
  <path class="cls-3" d="M436.92,302.87a13.9,13.9,0,0,1-15.47,21.65l-8.06,17.27L410.85,284l-3.54,55.67-7.06-15.13a13.92,13.92,0,0,1-4.44.74,13.53,13.53,0,0,1-1.81-.12,13.9,13.9,0,0,1-9.22-22.27q-.36-.31-.69-.66a16.43,16.43,0,0,1,11.25-28,17.85,17.85,0,0,1,32.62.12,16.44,16.44,0,0,1,9,28.52Z"/>
  <path class="cls-3" d="M366.71,392.53H288.56l-4-7.39a41.4,41.4,0,0,1,24.28-53.27c.82-.31,1.64-.59,2.47-.84a41.62,41.62,0,0,1,26.77.94C364.37,341.79,366.71,392.53,366.71,392.53Z"/>
  <path class="cls-3" d="M391.58,348.27c-14.7,3.83-23,19.65-23,19.65s-9.68-51-51.63-41.93c1.2-6.61,2.68-12.13,4.41-14.4a38.86,38.86,0,0,1,31-15.34H353a38.71,38.71,0,0,1,25.09,9.18q.33.35.69.66A13.9,13.9,0,0,0,388,328.36C389.39,335,390.92,342.11,391.58,348.27Z"/>
  <path class="cls-3" d="M381.81,241.65a15.59,15.59,0,0,0-13.64-15.47,16.94,16.94,0,0,0-30.93-.12,15.57,15.57,0,0,0-10,27.15,13.18,13.18,0,0,0,10.45,21.23,13.32,13.32,0,0,0,4.21-.7l6.69,14.34L352,235.31l2.41,54.79L362,273.74a13.19,13.19,0,0,0,14.66-20.53A15.5,15.5,0,0,0,381.81,241.65Z"/>
  <path class="cls-3" d="M317.43,267.16a16.46,16.46,0,0,0-19.2-10.26,17.86,17.86,0,0,0-30.6,11.31,16.43,16.43,0,0,0,.14,30.53,13.9,13.9,0,0,0,18.17,17.11,13.67,13.67,0,0,0,3.9-2.25l11.91,11.71-16.18-53.39,22.63,53.26,1.5-19a13.7,13.7,0,0,0,4.41-.86,13.92,13.92,0,0,0,2.5-24.84A16.38,16.38,0,0,0,317.43,267.16Z"/>
  <path class="cls-3" d="M559.1,334.45a52.33,52.33,0,0,0-10.77,1.11,11.64,11.64,0,0,0-9.16,10.58,20.41,20.41,0,0,0,7.43-2.49,1.5,1.5,0,0,1,1.49,2.6,23.18,23.18,0,0,1-23.09,0,1.5,1.5,0,1,1,1.49-2.6,20.66,20.66,0,0,0,5,2,11.73,11.73,0,0,0-9.72-10.5,53,53,0,0,0-8.78-.73,52.3,52.3,0,0,0-52,58.08H611.1a54.68,54.68,0,0,0,.32-5.76A52.31,52.31,0,0,0,559.1,334.45Z"/>
  <path class="cls-4" d="M535.58,351.74a54.85,54.85,0,0,1,2.64-23.52A52.17,52.17,0,0,1,543,318.16"/>
  <path class="cls-3" d="M533.18,301.9c-.09-.11-.19-.21-.28-.31-7.58-8.15-15.6-5.68-23.23-5.15a28.59,28.59,0,0,1-3.33.08c-20.51-.81-21-14.8-21-14.8s-6.13,24,10.4,40.7c13.35,13.48,30.33,10,38,1-18.15-2.45-25.58-9.82-25.58-9.82s5.16,1.91,16.59,3.35c2.19.27,4.37.44,6.46.53a32.26,32.26,0,0,1,5.28.63S537.19,306.68,533.18,301.9Z"/>
  <polygon class="cls-3" points="372.55 318.16 372.31 318.16 372.44 317.77 372.55 318.16"/>
  <polygon class="cls-3" points="357.37 317.77 357.5 318.16 357.26 318.16 357.37 317.77"/>
  <path class="cls-4" d="M524.8,274.42a54.68,54.68,0,0,0-2.64-23.52,52.15,52.15,0,0,0-4.75-10.06"/>
  <path class="cls-3" d="M527.2,224.58c.09-.11.19-.21.29-.31,7.58-8.15,15.59-5.68,23.22-5.15a28.59,28.59,0,0,0,3.33.08c20.52-.81,21-14.8,21-14.8s6.13,24-10.39,40.7c-13.35,13.48-30.34,10-38,1,18.15-2.45,25.58-9.82,25.58-9.82s-5.16,1.91-16.59,3.35c-2.19.27-4.36.44-6.46.53a32,32,0,0,0-5.27.63S523.19,229.36,527.2,224.58Z"/>
  <path class="cls-5" d="M463.65,244.29a41.6,41.6,0,0,1,2-17.84,38.84,38.84,0,0,1,3.61-7.62"/>
  <path class="cls-3" d="M461.83,206.49l-.22-.23c-5.75-6.18-11.82-4.31-17.61-3.9a23.68,23.68,0,0,1-2.52.06c-15.56-.62-15.93-11.23-15.93-11.23s-4.64,18.22,7.89,30.86c10.12,10.22,23,7.58,28.82.77-13.76-1.85-19.4-7.45-19.4-7.45s3.92,1.45,12.58,2.54c1.66.21,3.31.34,4.9.41a23.37,23.37,0,0,1,4,.48S464.87,210.12,461.83,206.49Z"/>
</svg>

Answer 1

Remove the value of the class attribute in the svg element. Looks like you have defined a style for that class and that is causing the svg to have a border specified.

So:

<svg class=“product-icon”

Becomes

<svg class=“”

Or you can leave the class in there and revisit the product-icon style definition and correct it. Not sure what it’s made of but perhaps removing the border property if it has it specified...

Also check if you have any other style rules that are targeting the svg element...

Inspect the the svg element in developer tools and check what styles are being applied. The actual svg code is correct.