inline SVG but in a separate file?-CodePudding

I'd like to store SVG code in a separate file so I can clean up the main code.

I'm using this script in the <head>

 <script    src="https://code.jquery.com/jquery-3.6.0.min.js" 
        integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

<script> 
    $(function(){
        $("icon").load("icon.xml");
    });
</script>

and I'm calling the file like this:

<div >
    <a href="/""><div id="icon"></div></a>
</div>

but nothing appears. This method is working for me for referencing as a separate html for nav links. Does this method not support other file types?

CodePudding user response：

Due to typos, the SVG cannot be displayed. Here is the fix:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
        integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous"></script>
<script> 
    $(function(){
        $("#icon").load("icon.xml");
    });
</script>
<div >
    <a href="/"><div id="icon"></div></a>
</div>