Adding a SVG images to Media Library

Hello everybody,
Please, can someone tell me which is the right process to make that Sitecore recognizes the SVG images on the Media Library folder as a regular image?

Thanks so much!

Lautaro

  • You need to add the media type to the config:

    This is my SVG.config include file:

    <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>
  • Unfortunately, Sitecore CMS does not support SVG images out of the box.
    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.
    However, in most cases it should work fine if you try to render a SVG image on a front-end web site.
    To have svg files into media library you need to add media type for svg :
    Please try use the following media type definition for SVG type:

    <configuration xmlns:patch="www.sitecore.net/xmlconfig">
    <sitecore>
    <mediaLibrary>
    <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>
    </mediaLibrary>
    </sitecore>
    </configuration>