Is it legal to put <svg> resources after </body>?-CodePudding

Can I put svg resources used in the website behind the end of body, in order to keep them outside of what will be rendered?

In short: Is it legal to do the following?

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 315.424 315.424" >
      <use href="#arrow" fill="rgb(0,44,89)" />
    </svg>
  </body>
  <svg>
    <g id="arrow">
      <path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886
         c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19
         c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375
         S314.142,223.815,311.929,222.266z" />
    </g>
  </svg>
</html>

CodePudding user response：

If the purpose is not to have the original #arrow rendered in the document, you might include it inside the svg in the body, wrapped around defs.

Demo in the snipped below.

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 315.424 315.424">
   <defs>
      <g id="arrow">
         <path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886
            c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19
            c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375
            S314.142,223.815,311.929,222.266z" />
      </g>
   </defs>
   <use href="#arrow" fill="rgb(0,44,89)" />
</svg>