How to properly use SVG?

Hello Tom,

Hope you're doing fine. I am working in a new website that use a SVG based style menu item and headers, and I'm not sure how should I use it properly with Generate Press.

I installed Safe SVG and uploaded the SVG images and activated the SVG Icon feature in GP. I can integrate them into the Menu and Page Headers (most common places for them). So my main question is whether I should use the <img> or <svg> tag.

1. Currently, I'm using <img> in the HTML of Page Headers and styling with CSS (change size, color and position), but I can't change the color of the image with the fill or color attribute. The only way I can do it is using a filter attribute that doesn't give me the exact color I want -I want black, and it renders dark gray.
2. I'm also using custom SVG images instead as menu icons for my Off-Canvas menu... Can I overlap one icon over another one (according to my design)?
3. If I use a <svg> tag, should I put the code directly into the HTML or just the reference to the svg file?

Thanks in advance for your help.