6

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?

Improve this question

2 Answers 2

Reset to default
5

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

Improve this answer
0
7

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.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.