Do I need to configure SVG images showing in nginx?

Question

I have SVG images in a folder and also a single PNG file to make sure these images are shown on the page.

My nginx config is basically this:

server {
    listen 80;

    location / {
        root www;
    }

}

The images are in www/images folder.

What I see is with the same structure in the page:

<img src="images/logo.svg">
<img src="images/logo.png">

PNG file is shown on the page just as expected, but not SVG. It shows in network tab of the browser code 200, though, but empty body.

When I try to open it directly, like http://localhost/images/logo.svg, it just downloads it as a file.

Do I need to add some special config to make SVG files showable on a page like PNG/JPG files?

score 6 · Answer 1 · edited Nov 29 '19 at 02:29

When Nginx doesn't recognize the mime type for .svg files, it serves them with content type header content-type: text/plain and your browser may not render them or may issue a warning to the web console.

Ensure that /etc/nginx/mime.types defines a mime type for svg images:
```
types {
  ...
  image/svg+xml   svg svgz;
  ...
}
```
Ensure that /etc/nginx/nginx.conf includes the mime.types file in the http block:
```
http {
  include mime.types;
  ...
}
```
In the terminal check that your new nginx configuration has no errors:
```
sudo nginx -t
```

Restart NGINX for the changes to take effect

sudo systemctl restart nginx   // e.g.: ubuntu

In your browser dev tools under network headers, check that svg files are served with header Content-Type: image/svg+xml and possibly hard refresh your web page to update the browser cache.

score 4 · Accepted Answer · answered Sep 20 '17 at 09:49

4

Add SVG image/svg+xml svg svgz; to your mime types in /etc/nginx/mime.types and reload your Nginx.

answered Sep 20 '17 at 09:49

deagh

1,969
5
18
16

Do I need to configure SVG images showing in nginx?

2 Answers2