I have some SVGs on my website that do not reliably load. I got them from freeicons/icon8 and 1 or 2 I made myself using Inkscape. I initially used HTML to add them to my website, but decided to use CSS instead as I did some research online as to how to get them to load 100% of the time. This still did not fix it for me. I'm not sure whether the SVG file is just bad (can that be) or I've truly messed something up when trying to add it.
The website can be found on http://lazeeztandoori.co.uk/index2.html
You'll notice that on the top black bar, to the right there's 3 links. The anchor for these links each have a selector which relates to the specific icon that I want to use, but it won't load.
Furthermore, the navigation menu also has an icon for each link, which may or may not load for you (90% chance it won't load). These are added in using ordinary img tags.
Any idea what gives? Why won't the SVGs load? Have I messed up my HTML/CSS or something else?
Any help is much appreciated.
The file menu.svg at http://www.lazeeztandoori.co.uk/image/navicons/ has the file extension svg and content type text/plain; charset=ISO-8859-1.This is the correct file extension for uncompressed SVG, but is the wrong MIME Type for SVG.
Add a new .htaccess file/edit existing one and add the following MIME Type:
AddType image/svg+xml svg AddType image/svg+xml svgz
For more details, check this.