Fixing SVG Images That Display Fine Locally but Disappear After Uploading to the Server

Recently I planned to make my site’s LOGO into an SVG vector graphic. Its benefit is small size — only tens of KB — but high quality, because it’s not a raster pixel image; even when enlarged greatly, the edges won’t show jaggies. And because SVG is actually an XML document, we can also compress it on the server side to make it smaller. //cdn.renfei.net/logo.svg First, you need an Internet Explorer 9 or later browser; otherwise you need to install Adobe SVG Viewer to support SVG. Of course, SVG is a W3C standard; Firefox, Opera, Chrome, and Safari all support SVG. After making the SVG image, I started uploading it to the server and replaced the original PNG image with the SVG image. It displayed fine locally, but after uploading to the server, opening the URL just wouldn’t show the SVG image. At first I thought the path was wrong, but I tried both relative and absolute links and confirmed it wasn’t a path issue. I carefully compared other sites’ SVG images and found mine differed a bit — it lacked the MIME type. So I added the SVG file’s MIME type on the server side: MIME type: image/svg+xml, then browsed again and it displayed normally. What is a MIME type? The server puts a MIME identifier into the transmitted data to tell the browser which plugin to use to read the related file. After receiving the file, the browser enters its plugin system to find which plugin can recognize and read the received file. If the browser doesn’t know which plugin system to call, it may tell the user a plugin is missing, or directly choose an existing plugin to try to read the received file, which could cause the system to crash. Missing the MIME identifier in transmitted information can lead to hard-to-estimate situations, because some computer systems may show no fault, but some may crash because of it.