An SVG is a scalable vector graphic. The SVG element in Play allows you to add and customize SVGs in your Play prototypes.
SVGs are particularly helpful when importing shapes or illustrations from Figma into Play.
SVG
Use the SVG property to select which SVG is displayed in the SVG element. You can upload an SVG from the Assets Panel or drag and drop from into the canvas.
Want a shortcut? You can open the SVG Asset Panel by double-clicking/tapping on an SVG element on your page or canvas
Content Mode
The Content Mode property defines how the SVG is positioned within the element container. There are three different settings for content mode: aspect fill, aspect fit, and fill.
When set to aspect fill, the SVG will scale up to fill the element’s bounds. This setting will preserve the aspect ratio, but in turn, may cause the SVG to appear cropped.
When set to aspect fit, the SVG will scale down to fit the element’s bounds. This setting will also preserve the aspect ratio, but it will leave some of the element’s area unfilled by the SVG.
When set to fill, the SVG will stretch to fill the element’s bounds on both axes, changing the aspect ratio if necessary.
Tint
The Tint property lets you adjust the color of an SVG. You can use System Color, Color styles, or a HEX code of your choosing.