什么可以阻止.svg文件导入.php文件的<section>标签？

While putting together a web-page, I have been running into some issues with the SVG file I am trying to include.

The SVG works fine when I type the code straight into the section tags in my .php file, but this is not ideal, as I intend to attach an if statement to determine which one SVG file will display, out of several options.

So my thinking is it would be easier to store each differing SVG design in its own .svg file, but when I point to the file I receive the same error message on the web-page when I run the code. This is the error: ERROR (I have addressed the error and changed what is on line 6, with no success)

I have found articles online on this subject, some of which are outdated by 7-8 years. The articles that did prove useful offered 3 options.

  1. To use an object tag. This was my first choice as I want to interact with the svgs objects via JS, which the info I could find online said that this was the best way to do that.

This option didn't work, giving the above error I have shared. Here is the code from the .php page:

<section id="section-shape-1" class="">
 <object type="image/svg+xml" data="circles16.svg" width="66%" height="100vh" border="1">
    </object></section>

Here is the SVG code(located in .svg file):

<svg id="group1" width="66%" height="100vh" viewBox="0 0 700 666">

<circle id="circle0" class="circle" cx="170" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/> </svg>
  1. Use an iFrame.

I tried to use the iFrame tag, against some of the advice of the forums I read, and this proved to yield the same error message as before.

  1. Use IMG tags.

This was at the bottom of the list, purely because the info I was reading suggested that this option means I couldn't interact via JS. Regardless, it still didn't work.

Other things I tried included changing the DOCTYPE at the top of the file I wished to import, with no success. Also tried changing the extension of the file from .svg to .xml, with neither of these working.

Now I am hoping to have someone on here spot where I am going wrong, any advice would be great, as everything I have so far tried hasn't worked.

You're missing the xmlns (xml namespace) attribute on your SVG.

<svg xmlns="http://www.w3.org/2000/svg" id="group1" width="66%" height="100vh" viewBox="0 0 700 666">
    <circle id="circle0" class="circle" cx="170" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/>
</svg>

The image won't render as an SVG in browsers without this when embedded. Here is a relevant SO answer with more information.