Clear
Back

Vector Objects and SVG Images

Use a vector object to render a scalable vector graphic (SVG) image in your scene.

SVGs are particularly useful in AR effects, because they don't loose precision when they're rescaled - for example, with the size of someone's screen.

There are lots of SVG images available for free online, for example on websites like Pixabay or Flaticon.

You can't import SVG assets that include strokes, opacity, gradients and patterns, clipping, masking, filter effects, linking, scripting, animation and fonts.

Adding an SVG image to your project

Import the SVG image

First, import the file. In the Assets panel:

  1. Click +.
  2. Select Import From Computer.
  3. Select the SVG file, and click Import.

A vector image will be listed in the Assets panel:

Add a vector object

Next, add a vector object:

  1. In the Toolbar, click Insert.
  2. Select Vector Object.

A vector object will now be listed in the Scene panel:

Apply the vector image to the vector object

In the Inspector:

  1. Click + next to Vector Image.
  2. Select the image you'd like to render in the scene.

Manipulating vector objects

You can use the manipulators in the toolbar to change the scale, position and rotation of a vector object:

Properties of vector objects

You can also change their properties in the Inspector:

Visible

Uncheck this box to stop the instance and any children from being rendered in the scene.

Vector Image

Assign or remove a vector image.

Transformations

Edit the position, scale and rotation.

Enable for

When the boxes are checked next to Front Camera and Back Camera the vector object will be visible through both the front and back camera on a device.

When the boxes are checked next to Preview and Capture the vector object will be visible both before the person using your effect is capturing a video and during capture.

Interactions

Insert simple combinations of patches into the Patch Editor, like tap gestures.

Using the Patch Editor

Like with other objects in Spark AR Studio, you can use the Patch Editor to add interactivity and logic to effects with vector objects.

In particular, you can manipulate the position, scale, rotation and visibility of a vector object. Take a look at these examples to learn more about using patches to manipulate objects in Spark AR Studio.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?