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.
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:
|Width and height dimensions
|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
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:
- In Sitefinity CMS backend, navigate to Administration » Settings » Advanced » Libraries » File processors » Svg sanitizer » Parameters.
- Click Create new.
- In the Key field add dataMediaTypes.
- 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.
- Click Save changes.
IMPORTANT:We do not recommend disabling the SVG sanitizer as this may result in breaches to the system.