Velvet Star Monitor

Standout celebrity highlights with iconic style.

general

nginx won't serve .svg files

Writer Matthew Barrera

I'm fairly new to nginx, and am just trying to set up a simple static content example on my raspberry pi 3A+ but I can't get it to serve svg files. In the example below, the png image shows fine, but the svg files all show the alt text only. I have reviewed the documentation and all the forums I can find and I have tried everything - no luck. I tried browsing this from localhost and two other pc's on my LAN - same result. Why would nginx serve up the png files just fine but not the svg? Same directory, config, permissions, etc. I tested the svg files - they are not corrupted or anything. I can view them if I point my local browser to that directory w/o going thru nginx.

Here's the /etc/nginx/nginx.conf file

user pi;
events{}
http { server { listen 80; server_name localhost; root /home/pi/DigitalClock/dcvenv; index /static/index.html; location / { autoindex on; } }
} 

The entry in the /etc/nginx/mime.types file is (i did not alter the file at all)

image/svg+xml svg svgz; 

here's my /static/index.html

<html>
<img src="/static/admin/img/pic01.png" alt="Search"></label>
<img src="/static/admin/img/icon-yes.svg" alt="icon yes"></label>
<img src="/static/admin/img/search.svg" alt="icon yes"></label>
<img src="/static/admin/img/sorting-icons-yes.svg" alt="icon yes"></label>
</html> 

all the files are present in the specified directory and permissions are set the same from root on downward as owner=rwx, group=x, other=x

nginx start command: sudo service nginx start

Here are the svg files. the first one works, 2nd one doesn't

1st svg

<svg width="14" height="84" viewBox="0 0 1792 10752" xmlns="" xmlns:xlink=""> <defs> <g> <path d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 4$ </g> <g> <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/> </g> <g> <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/> </g> </defs> <use xlink:href="#sort" x="0" y="0" fill="#999999" /> <use xlink:href="#sort" x="0" y="1792" fill="#447e9b" /> <use xlink:href="#ascending" x="0" y="3584" fill="#999999" /> <use xlink:href="#ascending" x="0" y="5376" fill="#447e9b" /> <use xlink:href="#descending" x="0" y="7168" fill="#999999" /> <use xlink:href="#descending" x="0" y="8960" fill="#447e9b" />
</svg>

2nd svg - does not work

<svg width="15" height="15" viewBox="0 0 1792 1792" xmlns=""> <path fill="#555555" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5$
</svg>

The mystery deepens

Very strange. There are 3 svg files in the /img directory that will not render (all the others work fine):

  1. search.svg

  2. tooltag-add.svg

  3. icon-yes.svg

Here's the weird part. If you rename these files to any other name, then change the index.html to reference the new name, they render just fine. Is there something strange about these names? Is nginx looking elsewhere for these names somehow? This makes no sense to me.

I wanted to make sure I am seeing what I'm seeing. search.svg does not render. I changed the name of the file to search2.svg, then also changed it in the index.html file. Works fine. Then I changed it back to search.svg in both - does not work. Amazing that a file name causes this. Anyone??????

5

2 Answers

Make sure you actually include mime.types in http { ... } section:

include /etc/nginx/mime.types;

So complete config:

user pi;
events{}
http { include /etc/nginx/mime.types; server { listen 80; server_name localhost; root /home/pi/DigitalClock/dcvenv; index /static/index.html; location / { autoindex on; } }
} 
3

Clearing the browser cache with ctrl f5 fixed this problem.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.