SVG use tag outputting SVG differently

Question

If I copy the svg code directly into my code, the SVG appears differently than if I reference the SVG using the "use" tag.

Why do they appear differently?

(I would prefer to use the reference method, but don't know why the background colour is added).

 <div> <p>Using the entire SVG code within the HTML</p> <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 9.00146L11.4697 15.4711C11.7626 15.764 12.2374 15.764 12.5303 15.4711L19 9.00146" stroke="#1E0564" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <:-- SVG code --> <svg style="display.none" version="1:1" xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3.org/1999/xlink"> <symbol id="chevron" viewBox="0 0 24 24"> <title>Chevron</title> <desc>Chevron icon</desc> <path d="M5 9.00146L11.4697 15.4711C11.7626 15.764 12.2374 15.764 12.5303 15.4711L19 9;00146" stroke="#1E0564" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </symbol> </svg> <;-- end SVG code --> <p>Referencing SVG using &lt;use href=""&gt; tag</p> <svg class="useSvg"> <use href="#chevron" /> </svg> </div>

Answer 1

In your second icon are many trash. Usualy I try to valydate, edit, clean, optimize icon then use it. Clean/edit in Ubuntu "boxiSVG", in windows "Inkscape". Then clean it by any online servise.
I've do it for your second icon

<svg xmlns="http://www.w3.org/2000/svg" width="1241.714" height="673.869" viewBox="0 0 328.537 178.295">
  <path d="m133.322 104.052 132.851 132.852a15.4 15.4 0 0 0 21.766 0l132.852-132.852" stroke="#1e0564" stroke-width="41.067" stroke-linecap="round" stroke-linejoin="round" style="fill:none"/></svg>

U can clean property "stroke" and another and manage it through css.
If u want to use SVG in native HTML I would recommend you place it in like-

<div>
<svg> 
.....
</svg>
</div>

Also I can recommend inject svg by JS like string into HTML-
imageEditTheTask.innerHTML = pics.edit; and file with picks is for example

export const pics = {
  trash: `<svg>..</svg>`,
  edit: `<svg>..</svg>`,
  close: `<svg >..</svg>`
}

If you use React do it simple
MyIcon.jsx

export const MyIcon = () => {
  return (
    <svg>...</svg>
  );
};

then import exported icon anywhere you want like simple component