0

I am using SVG sprite as an external file. They work and display fine while they are internal code, but when I want to use them as an external SVG file, it's not showing.

SVG code:

<svg width="0" height="0" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="book-icon">
    <path d="M919.6 285.3h-45.7v28.6h45.7c7.7 0 10.6 8.4 10.6 16.1v378.2c0 38.6-28 67.5-66.7 67.5H583.4c-23.2 0-45.3 21.4-45.3 44.6v4.6h-56.4v-4.6c0-23.2-15.2-44.6-38.4-44.6H163.2c-38.7 0-73.6-28.9-73.6-67.5V330c0-7.7 9.8-16 17.5-16H146v-28.7h-38.8A47.3 47.3 0 0 0 62 330v378.2c0 54 47 95.2 101.2 95.2h280.1c7.7 0 10.8 9.2 10.8 16.9v7c0 15.4 15.8 25.2 31.2 25.2h56c15.5 0 24.4-9.8 24.4-25.2v-7c0-7.7 10-17 17.7-17h280.1c54.1 0 94.4-41 94.4-95V330c0-23.2-15.1-44.7-38.3-44.7zm-647.7 0h167.9v28.6h-168zm0 63.5h167.9v27.6h-168zm0 62.4h167.9V440h-168zm308.1-126h168V314H580zm0 63.6h168v27.6H580zm0 62.4h168V440H580z" fill="#ff7415"></path>
    <path fill="#262626" d="M842.5 230h-17.7v-5c0-31-21.4-58.5-52.3-58.5h-168a105 105 0 0 0-91.1 52.9 105 105 0 0 0-91-52.9H254.1A61 61 0 0 0 195 225v5h-11c-27 0-52.5 27.1-52.5 58v378.2c0 38.6 33.4 67.5 70 67.5h255.7c23.2 0 42 20.5 42 42h28c0-21.5 19-42 42-42H825c36.7 0 63.2-28.9 63.2-67.5V288c0-30.9-18.6-58-45.7-58zm-238-35.9h168c15.4 0 24.6 15.4 24.6 30.9v399.2c0 15.4-9.2 25.6-24.6 25.6h-168c-30.5 0-59.3 15.5-80.8 36.3V274c0-42.5 38.2-79.9 80.7-79.9zM222.6 225c0-15.5 16-30.9 31.5-30.9h168.1c42.5 0 73.8 37.4 73.8 79.9v411.9c-14.4-20.7-43.4-36.1-73.8-36.1h-168c-15.5 0-31.6-10.2-31.6-25.6V225zm-21 481c-21.3 0-42.5-16.6-42.5-39.8V288c0-15.2 13.6-30.4 25-30.4H195v366.6c0 30.9 28.2 53.2 59.1 53.2h168.1c26.7 0 50.3 14 64.1 34.8-8.8-4.1-18.7-6.1-29-6.1H201.6zm657.9-39.8c0 23.2-13.3 39.9-34.6 39.9H569.4c-10.4 0-20.2 2-29.1 6a77.3 77.3 0 0 1 64.1-34.7h168.1c30.9 0 52.2-22.3 52.2-53.2V257.6h17.8c11.4 0 17 15.2 17 30.4v378.2z"></path>
    <path fill="#e0e0e0" d="M439.8 544.6a14 14 0 0 1-14 14h-140a14 14 0 0 1-14-14v-55.9a14 14 0 0 1 14-14h140a14 14 0 0 1 14 14v56zm308.2 0a14 14 0 0 1-14 14H594a14 14 0 0 1-14-14v-55.9a14 14 0 0 1 14-14h140a14 14 0 0 1 14 14v56z"></path>
  </symbol>
 </svg>
    <svg class="icon">
      <use href="#book-icon"></use>
    </svg>

Above code works fine as an internal. For external, I copied SVG codes into a single file (in root) "sprites.svg" and access them in my HTML file by the following:

<svg class="icon">
  <use href="sprites.svg#book-icon"></use>
</svg>
AStombaugh
  • 2,930
  • 5
  • 13
  • 31
Amin
  • 135
  • 1
  • 8
  • 4
    missing the SVG namespace. https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course – Robert Longson Jul 10 '23 at 17:06
  • [How to use external SVG in HTML?](https://stackoverflow.com/questions/28652648/how-to-use-external-svg-in-html) – Tim R Jul 11 '23 at 06:22
  • It's not working, as I said when I use internal code, it's working (regardless of using namespace) but it's not working when I use external SVG file – Amin Jul 16 '23 at 17:06

1 Answers1

0

Found the problem: It was running the file from your disk, you must run it as a local host.

Amin
  • 135
  • 1
  • 8