Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

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 Effect

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 tab:

Apply the vector image to the vector object

In the Inspector panel:

  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:

Changing the Properties of Vector Objects

You can also change their properties in the Inspector panel:

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 of the vector object.

Actions

Insert 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

Frequently asked questions

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


Read FAQs
Was this document helpful?