SVG → Interactive 3D in Framer

SVG to 3D converts flat SVG graphics into fully interactive 3D objects inside Framer. Simply upload an SVG and the component automatically generates extruded 3D geometry rendered with Three.js.

Customise depth, materials, lighting, and interaction to create dynamic visuals for landing pages, hero sections, product highlights, and interactive UI elements.

No Three.js setup required.

Key Features

SVG to 3D Extrusion

Convert any SVG path into 3D geometry with adjustable depth and bevel settings.

Material Styles

Choose from multiple material looks:

• Basic

• Metallic

• Clay

• Acrylic

Create anything from polished metal objects to soft sculptural shapes.

Interactive Controls

Add interaction to your 3D objects:

• Drag – rotate the object freely

• Cursor – object reacts to mouse movement

• None – static display

Lighting Environment

Built-in lighting system with adjustable:

• Light colour

• Intensity

• Environment rotation

Create dramatic highlights or soft studio lighting.

Camera Controls

Adjust the viewing angle and zoom to frame the object exactly how you want.

Performance Optimised

The component automatically pauses rendering when off-screen to reduce GPU usage and keep pages fast.

Property Controls

SVG

Upload any SVG graphic to convert it into 3D geometry.

Object

• Extrude depth

• Bevel size and softness

• Spread (scale)

Materials

• Basic

• Metallic

• Clay

• Acrylic

Interaction

• None

• Drag

• Cursor follow

Environment

• Lighting color

• Lighting intensity

• Environment rotation

Camera

• Rotation (X, Y, Z)

• Zoom

Perfect For

• Landing page hero graphics

• Interactive brand visuals

• 3D icons and logos

• Creative portfolio websites

Requirements

• SVG files with vector paths

• Works directly inside Framer with no external setup