0

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.

2 Answers2

0

Your web server is not sending a content type for the SVG files; this is causing the browser to not know what they are and not render them.

Making sure that Content-Type is set to image/svg+xml for those should allow them to show up. You'll need that additional setup for your web server.

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • 1
    Could you point me to where I can get started with this? I don't really know much about the web server (the previous developer set it up 12 years ago and I'm just doing a slight revamp as one of my first projects). –  Jul 11 '16 at 04:37
0

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.

Ravimallya
  • 6,550
  • 2
  • 41
  • 75
  • Thanks for the reply. I *think* this solution worked, however it could be the 10% chance playing again :p. I've never worked with .htaccess files - I just created it, copied only what you suggested, and uploaded to root. Sound about right? You may wish to take a look if you like - the navigation menu icons load for me, however, no joy with my CSS images for my icons on top right corner. Any suggestions for that? –  Jul 11 '16 at 04:44
  • I'm sorry, but I can't seem to figure out what causing the SVG image in CSS file. All seems to be fine. BTW, why you won't use [fontawesome](http://fontawesome.io/) for your icon needs? see [this](http://stackoverflow.com/a/17319709/1201322) for more details. If my answer is helpful to you, don't forget to upvote and accept answer.. – Ravimallya Jul 11 '16 at 05:00
  • I use flaticon and ikon8, are they not similar to fontawesome in terms of services? –  Jul 11 '16 at 05:32
  • I'm not familiar with ikon8. However, flaticon has more icons than fontawesome. However, fontawesome has [SIL](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) license and packed in single font face. – Ravimallya Jul 11 '16 at 05:39
  • I'm new to using SVG's at all/web developing in general so really have no idea what any of this means :P What do you mean by "packed in single font face" –  Jul 11 '16 at 05:41