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.
Convert any SVG path into 3D geometry with adjustable depth and bevel settings.
Choose from multiple material looks:
Basic
Metallic
Clay
Acrylic
Create anything from polished metal objects to soft sculptural shapes.
Add interaction to your 3D objects:
Drag – rotate the object freely
Cursor – object reacts to mouse movement
None – static display
Built-in lighting system with adjustable:
Light colour
Intensity
Environment rotation
Create dramatic highlights or soft studio lighting.
Adjust the viewing angle and zoom to frame the object exactly how you want.
The component automatically pauses rendering when off-screen to reduce GPU usage and keep pages fast.
Upload any SVG graphic to convert it into 3D geometry.
Extrude depth
Bevel size and softness
Spread (scale)
Basic
Metallic
Clay
Acrylic
None
Drag
Cursor follow
Lighting color
Lighting intensity
Environment rotation
Rotation (X, Y, Z)
Zoom
Landing page hero graphics
Interactive brand visuals
3D icons and logos
Creative portfolio websites
SVG files with vector paths
Works directly inside Framer with no external setup