Home / server / Questions / 874597
Accepted
Sergei Basharov
Asked: 2017-09-21 01:37:38 +0800 CST

Do I need to configure SVG images showing in nginx?

  • 772

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?

nginx

2 Answers

  1. 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.

    1. Ensure that /etc/nginx/mime.types defines a mime type for svg images:

      types {
  ...
  image/svg+xml   svg svgz;
  ...
}

    2. Ensure that /etc/nginx/nginx.conf includes the mime.types file in the http block:

      http {
  include mime.types;
  ...
}

    3. In the terminal check that your new nginx configuration has no errors:

      sudo nginx -t

    4. Restart NGINX for the changes to take effect

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

    5. 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.

    • 6
  2. Best Answer

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

    • 4