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. 

Enable SVG images upload 

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. 

Enable upload of SVG images in forms 

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.  

Edit the properties of SVG images 

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:

Image properties SVG image Standard image
Crop/resize/rotate
Not applicable
Applicable
Width and height dimensions
Scalable
Can edit
Thumbnails
Default size
Can select and edit size
Settings in Image widget
  • Can only choose between original size and customize
  • No crop option and quality setting due to the default high quality of SVG images
Can select and edit size
Settings in image library
Do not have View all sizes option
Can view, select, and edit size

SVG images and JavaScript

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, as of Sitefinity patch 12.1.7101, 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.

 

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?