SVG is a vector image type. There are benefits of using an SVG over using standard image types such as JPG or PNG when there is a logo or graphic. The primary benefit is that they scale well when used on smaller or larger screen sizes.
Insert an SVG
Within a block page:
- Click on “Insert Block”
- Select “SVG”
- Click “Add”
This will insert an SVG block into your page.
Click on the SVG block, and it will open the media library picker where you can select or upload a new SVG. You will only be able to add a filetype of SVG into this block.
SVG Block Settings
To access the block settings, click on the SVG block, and the click on the edit symbol.
Aspect Ratio
Within Aspect Ratio, you can select the ratio of the block, which is helpful when constructing complex page layouts. By default the block is the ratio of the SVG image.
If you select a ratio which is different to the SVG image, then please note the SVG images do not crop when the page is being resized, which is a behaviour that is possible when using “Fill” within the standard “Media” block.
Horizontal Alignment
If your SVG block is wider than the SVG, you can select whether the SVG is left, center and right aligned within the block.
Basketable
If basket fulfilment is enabled on an experience, the select whether or not the SVG image can be added to a basket.
Zoomable
Select whether or not the SVG can be opened in full screen.
Interactive
If interactive viewer is enabled on an experience, the select whether or not the SVG image can be added to the interactive viewer.