SVG MIME Type

MIME Types (sometimes referred to as "Internet media types") are the primary method to indicate the type of resources delivered via MIME-aware protocols such as HTTP and email. User agents (such as browsers) use media types to determine whether that user agent supports that specific format, and how the content should be processed. When an SVG document is not served with the correct MIME Type in the Content-Type header, it might not work as intended by the author; for example, a browser might render the SVG document as plain text or provide a "save-as" dialog instead of rendering the image.

The MIME Type for SVG documents is "image/svg+xml", and the file extensions are "*.svg" (for uncompressed SVG files) and "*.svgz" (for gzip-compressed SVG files). Note that an early draft of the SVG specification stated the MIME Type as "image/svg-xml" (note the minus instead of the plus), so that will sometimes appear on older servers and documentation, and should be corrected. You can check a file's MIME Type with this form:

Note: As of August 2014, the SVG MIME Type was still in the process of being registered with the IANA media type registry for image/* media types, but it is already in wide use, and is included by default in the list of supported MIME Types in the Apache Web server.

Server Settings

If your SVG file is not being served correctly (Content-Type: "image/svg+xml"), there are several ways to correct it, depending upon the server type, and your access to server settings.

If your site is hosted and you don't have full admin access to the server, it is generally possible on a Unix box to set it yourself. However, if your server is hosted by an NT/2000 host, you may have to convince your host to set the MIME Type.

In any case, it may be desirable to ask the server administrator to change the server settings at the root level, so that it is correct for each sub-directory, and for every person with an account on that server.

Apache

Though the SVG MIME Type has been included by default in the list of supported MIME Types in the Apache Web server since version 1.3.x, older versions may need to be updated.

.htaccess

Perhaps the easiest way to set the correct MIME Type is to use an ".htaccess" file. This is a configuration file that is often hidden. If your server does not have such a file, create a file and name it ".htaccess", and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular lines you should add are:

      	AddType image/svg+xml svg
      	AddType image/svg+xml svgz
      

The ".htaccess" file should be placed in the directory that contains the SVG file, or any parent directory.

Note:For convenience, you can download the file settings.htaccess. Once you upload it to your server, rename it from settings.htaccess to .htaccess, removing the word settings (which will turn it into a server configuration file).

Apache on Linux

On Debian Linux, edit the file /etc/apache/mime.types to include the lines listed in the .htaccess entry above.

Apache on Windows

As for Apache on Linux above, only modify (Apache dir)/conf/mime.types.

Jakarta Tomcat

Tomcat Version 4.1.29 has defined the MIME Type for SVG already. Older versions need to add the following to (Tomcat dir)/conf/web.xml:

    	<mime-mapping>
    	   <extension>svg</extension>
    	   <mime-type>image/svg+xml</mime-type>
    	</mime-mapping>

    	<mime-mapping>
    	   <extension>svgz</extension>
    	   <mime-type>image/svg+xml</mime-type>
    	</mime-mapping>
    

If you only want this setting to apply to a specific application, then put the configuration in that app's own web.xml instead.

IIS

Adding a MIME Type on IIS (NT/Win2000 web server) is a simple process, but can only be done by an administrator.

IIS 4.0

MIME Types can be registered in IIS 4.0 using the Internet Service Manager console. For example, to add the SVG MIME Type using Internet Service Manager:

  1. Select Default Web Site and bring up the Properties dialog box
  2. Select the HTTP Headers tab
  3. Under MIME Map, click the File Types tab and select New Type
  4. Type ".svg" in the Extension field and "image/svg+xml" in the Content Type field, and then click OK
  5. Add ".svgz" with the same Content Type ( "image/svg+xml" ) using the same procedures

IIS 5.0

MIME Types can be registered in IIS 5.0 using the IIS snap-in. For example, to add the SVG MIME Type to the default Web site using the IIS snap-in:

  1. Select Default Web Site and bring up the Properties dialog box
  2. Select the HTTP Headers tab
  3. Under MIME Map, click the File Types tab and select New Type
  4. Type ".svg" in the Extension field and "image/svg+xml" in the Content Type field, and then click OK
  5. Add ".svgz" with the same Content Type ( "image/svg+xml" ) using the same procedures

To add the SVG MIME Type to all sites running on a given machine:

  1. Select Internet Information Services and bring up the Properties dialog box
  2. Under Computer MIME Map, click the Edit button and select New Type
  3. Type ".svg" in the Extension field and "image/svg+xml" in the Content Type field, and then click OK
  4. Add ".svgz" with the same Content Type ( "image/svg+xml" ) using the same procedures

IIS 6.0

IIS 6.0 does not serve unknown MIME types, so you should configure it appropriately, as detailed on the IIS site.

Internet Explorer

Older versions of Internet Explorer (before version 6) do not behave properly with respect to SVG and MIME Types. IE<6 treats SVG as SVG only when the URL ends in the string ".svg", with no consideration for the MIME Type. This means that dynamically generated SVG content, with a alternate file extension (such as ".php", ".jsp", etc.) may not work properly in older versions of IE, even when SVG is supported through a browser plug-in. So, in addition to setting the correct MIME Type, in order to have all browsers accept your content properly, you must make sure your URL ends in ".svg", perhaps by using a dummy parameter, like so:

    	http://mysvg.jsp?ielikes=.svg
    
This IE trick does not work with SVG content referenced via the the iframe element. Here is a workaround using IE conditional comments and an object element:
    	<!--[[if gte IE 5]]>
    	  <object type="image/svg+xml" data="generateSVG.jsp" width="580" height="300" ></object>
    	<![[endif]]-->
    	<![[if lt IE 5]]>
    	 <iframe src="generateSVG.jsp" width="580px" height="300px" 
    	    frameborder="0" marginwidth="0" marginheight="0" >
    	    <embed src="generateSVG.jsp" width="580px" height="300px" />
    	  </iframe>
    	<![[endif]]>