Upload SVG images

Sitefinity CMS enables you to upload SVG images on your site and thus, benefit from vector images quality, scalability, XML-based editable format, and resolution independence.  

You can upload, store, utilize, and publish SVG images using the Images module.
When working with SVG images, consider the following: 

• Due to the specifics of the SVG format, in the backend you can only work with the default backend size for thumbnails. 
• SVG images have different properties and image settings. 
• For security reasons, each SVG image that has JavaScript code embedded in its XML, is sanitized. 

To be able to upload and work with SVG images in Sitefinity CMS, perform the following:  

1. Navigate to Administration » Settings » Advanced.  
2. Expand Libraries and click Images. 
3. In the Allowed file extensions field, enter .svg
4. Save your changes. 

When creating an MVC or WebForms form in Sitefinity CMS, you need to explicitly enable SVG image uploads. To do this, for each form you create: 

1. Drag and drop a File upload widget on the form canvas. 
2. Open the widget designer and then the Limitations tab page. 
3. In the Allowed file types section, under Selected file types, select the Other checkbox. 
   For more information, see Limitations. 
4. Enter svg and save your changes.  

Some of the properties of SVG images are read-only. For example, SVG images do not generate and store different sizes of thumbnail but just scale to the default size you set in the Image or Image gallery widget. 
Refer to the following table:

SVG images are XML-based and JavaScript can be embedded in an XML file. Since JavaScript may be vulnerable to the system and for security reasons, by default, Sitefinity CMS sanitizes SVG images via a file processor SVG sanitizer. The SVG sanitizer removes all non-whitelisted SVG tags, attributes, and JavaScript code lines embedded in SVG images XML files. For more information about file processors, see Administration: Libraries and file processors.

If your SVG files are not uploaded appropriately, for instance a blank image is uploaded, you can configure the sanitizer to process SVG and other media files:

1. In Sitefinity CMS backend, navigate to Administration » Settings » Advanced » Libraries » File processors » Svg sanitizer » Parameters.
2. Click Create new.
3. In the Key field add dataMediaTypes.
4. In the Value field add image/svg+xml.
   If you want to add more file formats, you can add them after image/svg+xml separated by commas: image/svg+xml,format2,format3.
5. Click Save changes.

NOTE: Be aware that if your SVG image’s JavaScript code intended result is, for example, a button to be clicked or to perform any other activity, the activity will not be performed. 

IMPORTANT:We do not recommend disabling the SVG sanitizer as this may result in breaches to the system.