Vector, raster, or both?

Rive is built for creators who mix mediums without apology. We support vector and raster in a single file, so you can use the option that best fits your design, runtime, and performance needs. The trick is knowing when to use each and how to mix them. 

The case for vector: precision and scalability

Vectors are math-based. They’re perfect for scalable UI components, animated icons, and assets you need to manipulate at runtime. In Rive, you can animate vector paths at the property level, like stroke width, color, or position, without losing resolution or increasing file size. That’s why most of Rive’s real-time interactivity starts with vector. 

Designer lens: UI and icons

Vectors are usually ideal for buttons, icons, and interface elements that must scale across devices. For intricate and textured buttons, like this one, raster may be the better choice.

Example in Rive: A tab icon that animates from outline to fill on tap. You can directly animate the stroke width and fill in the Rive Editor without worrying about pixelation.

Developer lens: runtime efficiency

Vectors reduce asset management overhead. It means fewer exported bitmaps, less asset swapping, and a single source of truth across screen densities. The Rive Renderer draws paths at runtime, so a 24px icon can scale to 48px without shipping multiple PNGs. 

The case for raster: complexity and texture

Raster graphics are pixel-based and perform better when the visual complexity outweighs the benefits of vectorization. Raster is perfect for static, highly detailed illustrations, like textured backgrounds or photorealistic elements. 

Designer lens: illustrative detail

Some assets, such as photoreal textures or painted backgrounds, are too detailed to rebuild efficiently as vector paths. 

Example in Rive: A static JPEG background loads faster and reduces draw calls compared to a vector map with thousands of Bézier curves. 

Developer lens: performance guardrails

Highly detailed vectors can spike CPU/GPU usage on low-end devices. Rasterizing those elements upfront can improve frame rate and battery life, especially in mobile games or embedded systems. 

When vectors get expensive

Vectors aren’t free. Every path, curve, and clipping mask has a render cost. More points = more math per frame. For high-motion scenes (e.g., particle effects or intricate masks), exporting as raster or simplifying shapes can improve runtime performance without sacrificing quality. 

Example: A very detailed background with hundreds or thousands of details, like this one.

Mixing vector and raster in Rive

Rive isn’t dogmatic about when to use which. You can combine raster and vector in one artboard, and even animate them together. 

Raster background and vector UI: Richly painted backdrop with responsive buttons on top. 

Vector base and raster textures: A vector character rig with raster facial textures for nuanced expression. 

Dynamic switching at runtime: Serve high-res vectors on desktop, raster fallback on low-end mobile.

Use vector when:

You need resolution independence

You’re animating paths, strokes, or fills

You’re binding visuals to live data

You need the tiniest possible file size (style can impact this)

Use raster when:

The artwork is highly detailed or photoreal

You want to reduce draw calls or rendering load

You’re working with static backgrounds or textures

Use both when:

You’re designing rich interfaces that mix motion and art

You need scale and performance in one file

Your project meets the criteria for both vector and raster use cases