SVG file unable to be loaded

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="id_svgCanvas" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <linearGradient id="color-0" bx:pinned="true">
      <title>Border</title>
      <stop style="stop-color: rgb(77, 81, 82);"/>
    </linearGradient>
    <linearGradient id="color-1" bx:pinned="true">
      <title>Fill</title>
      <stop style="stop-color: rgb(117, 234, 156);"/>
    </linearGradient>
    <linearGradient id="color-2" bx:pinned="true">
      <title>Lockbodyfill</title>
      <stop style="stop-color: rgb(255, 216, 120);"/>
    </linearGradient>
  </defs>
  <rect style="fill: url(#color-0); paint-order: fill; pointer-events: none;" x="-0.022" y="10.016" width="32" height="11.977" rx="1.5" ry="1.5">
    <title>border</title>
  </rect>
  <rect style="fill: url(#color-1); pointer-events: none;" y="11.007" width="29.979" height="9.983" rx="0.5" ry="0.5" x="1.011">
    <title>fill</title>
  </rect>
  <g style="pointer-events: none;">
    <title>dots</title>
    <circle cx="5.005" cy="16" r="1.1" style="fill: url(#color-0);">
      <title>dot</title>
    </circle>
    <circle cx="8.012" cy="15.977" r="1.1" style="fill: url(#color-0);">
      <title>dot</title>
    </circle>
    <circle cx="10.973" cy="16.043" r="1.1" style="fill: url(#color-0);">
      <title>dot</title>
    </circle>
    <circle cx="14.058" cy="16.023" r="1.1" style="fill: url(#color-0);">
      <title>dot</title>
    </circle>
    <circle cx="16.981" cy="15.957" r="1.1" style="fill: url(#color-0);">
      <title>dot</title>
    </circle>
    <circle cx="20.019" cy="15.997" r="1.1" style="fill: url(#color-0);">
      <title>dot</title>
    </circle>
  </g>
  <g style="pointer-events: none;">
    <title>lock</title>
    <rect style="fill: url(#color-0);" x="23.023" y="15.026" width="5.951" height="3.953" rx="0.5" ry="0.5">
      <title>body</title>
    </rect>
    <rect x="23.989" y="16" width="4.013" height="2.006" style="fill: url(#color-2);">
      <title>fill</title>
    </rect>
    <g style="">
      <title>shackle</title>
      <circle style="fill: url(#color-0);" cx="26" cy="13.991" r="1.987" bx:origin="0.505 0.598">
        <title>border</title>
      </circle>
      <rect x="24.019" y="13.914" width="3.961" height="1.369" style="fill: url(#color-0);">
        <title>fill_edge</title>
      </rect>
      <circle style="fill: url(#color-1);" cx="25.992" cy="14.01" r="0.995">
        <title>fill_round</title>
      </circle>
      <rect x="24.99" y="13.951" width="2" height="1.114" style="fill: url(#color-1);">
        <title>fill_rect</title>
      </rect>
    </g>
  </g>
</svg>