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:
- Navigate to Administration » Settings » Advanced.
- Expand Libraries and click Images.
- In the Allowed file extensions field, enter .svg
- 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:
- Drag and drop a File upload widget on the form canvas.
- Open the widget designer and then the Limitations tab page.
- In the Allowed file types section, under Selected file types, select the Other checkbox.
For more information, see Limitations.
- 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.