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.

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.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to 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?