Convert inline svg to external file

[treacle0996]

Trying to implement some svg for the first time.

I am using an svg hamburger menu icon with some nice transforms - based on https://codepen.io/tossedwarrior/pen/YPJJpe

Works fine when it is an svg element within the html, but I want to take it out of the html and instead use an external file - I want to be able to change it responsively, and it just seems neater. I’d prefer it as a background image, but don’t mind if its included via an img tag.

I can’t get it to work. I tried

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none' width='800' height='600' viewBox="0 0 800 600">
	<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>
	<path d="M300,320 L540,320" id="middle"></path>
 	<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
</svg>

but it just gives me a strange shape, an ellipse connected to some triangles - a bit like a keyhole for two keys.

So, how do I take the html code

<svg viewBox="0 0 800 600">
    <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>
    <path d="M300,320 L540,320" id="middle"></path>
    <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>
  </svg>

and turn it into a .svg file I can include?

Thank you!

[SamA74]

For the javascript, or css for that matter to be able to manipulate and alter the svg it has to be a part of the dom. If it’s not in the dom there is no way those things have access to it.

@treacle0996

it just seems neater.

However there is a trick that I use for exactly this reason, but it requires php.
What I do is have the svg as a separate standalone .svg file that can be stored in an image folder or wherever you want it.
Then I put it into the html as a php include.

<div class="icon">
<?php include $_SERVER["DOCUMENT_ROOT"]."/images/icon.svg" ?>
</div>

This has the advantage of keeping the svg code out of the html where it is a separate file that can be edited and re-used elsewhere independently of the html page, but on the client side it appears as part of the dom and can therefore be manipulated by css and javascript.

[treacle0996]

Thank you, took a while, but got to grips with it now…