Svg file into Media Library

Question

I have a responsive design Sitecore 7 solution, I want to add svg files into Media Library to be processed exactly like jpg,jpeg pictures. When I upload svg files they are processed like media file not like image files.

Answer 1

As I know Sitecore CMS does not support SVG images out of the box. You are right, if you upload a SVG image, Sitecore will not process it as an image, but processes as a common media file. Thumbnails generation also does not work for a SVG image. Please try use the following media type definition for SVG type:

<mediaType name="SVG image" extensions="svg">
  <mimeType>image/svg+xml</mimeType>
  <forceDownload>false</forceDownload>
  <sharedTemplate>system/media/unversioned/image</sharedTemplate>
  <versionedTemplate>system/media/versioned/image</versionedTemplate>
  <mediaValidator type="Sitecore.Resources.Media.ImageValidator"/>
  <thumbnails>
    <generator type="Sitecore.Resources.Media.ImageThumbnailGenerator, Sitecore.Kernel">
      <extension>png</extension>
    </generator>
    <width>150</width>
    <height>150</height>
    <backgroundColor>#FFFFFF</backgroundColor>
  </thumbnails>
 </mediaType>

Also please register mime types for svg files into configuration files.

<configuration>
  <system.webServer>
    <staticContent>
     <remove fileExtension=".svg" />
     <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
    </staticContent>
  </system.webServer>
</configuration>

Answer 2

The previous answers are correct if all you want is to be able to upload SVG files to the media library. If you then want to use the SVGs in the media library within the Sitecore Rich Text Editor, there are additional steps that must be followed, otherwise you will get a "selected item is not an image" error.

This blog post explains the RTE customizations that are required to use SVG within the rich text editor. http://sitecorecorner.com/2015/11/23/sitecore-svg-support/

Answer 3

As of Sitecore 8.1 Update 2, the configuration update is included by default. Tests passed in Media Library upload and RTE fields, as well as with GlassMapper.

Answer 4

<configuration xmlns:patch="www.sitecore.net/xmlconfig">
    <sitecore>
        <mediaLibrary>
            <mediaTypes>
                <mediaType name="SVG image" extensions="svg">
                    <mimeType>image/svg+xml</mimeType>
                    <forceDownload>false</forceDownload>
                    <sharedTemplate>system/media/unversioned/image</sharedTemplate>
                    <versionedTemplate>system/media/versioned/image</versionedTemplate>
                    <mediaValidator type="Sitecore.Resources.Media.ImageValidator"/>
                    <thumbnails>
                        <generator type="Sitecore.Resources.Media.ImageThumbnailGenerator, Sitecore.Kernel">
                            <extension>png</extension>
                        </generator>
                        <width>150</width>
                        <height>150</height>
                        <backgroundColor>#FFFFFF</backgroundColor>
                    </thumbnails>
                </mediaType>
            </mediaTypes>
        </mediaLibrary>
    </sitecore>
</configuration>