# [3D SVG](<https://3dsvg.design/>)

Turn SVGs and text into interactive 3D objects — 10 material presets, 7 animations, export as PNG, video, or React code.

Free·Open Source·3D·SVG Tools·Animation

Free·Open Source·3D·SVG Tools·Animation

![3D SVG preview 1](<https://creatorstoolbox.com/images/3dsvg-thumbnail.png>)

![3D SVG preview 2](<https://creatorstoolbox.com/images/galleries/3dsvg-og-acd0dc67b9a84db8e413eb86d2f7e457660f56932b5a5eb744615e5ac4d643b8.png>)

## What is 3D SVG?

3D SVG is a visual editor that converts SVGs into interactive 3D objects. Input text (with Google Fonts support), draw in a pixel editor, paste SVG code, or upload a file. Choose from 10 material presets — plastic, metal, glass, holographic, and more.

Add one of 7 animation options and export as PNG (up to 4K), video (MP4/WebM at 60fps), or ready-to-embed React JSX code. The engine is also available as an npm package for direct integration.

## Features

- SVG to 3D conversion

- 10 material presets (plastic, glass, holographic...)

- 7 animation options

- Export as PNG (4K), video, or React JSX

## FAQs

Common questions about 3D SVG

Is 3D SVG free?

Yes, the web editor and npm package are both free and open source (MIT license).

Can I embed the 3D objects in my React app?

Yes, export as JSX code or install the npm package and use the SVG3D component directly.

Similar Launches

[![Pascal Editor](<https://www.google.com/s2/favicons?domain=pascal.app&sz=128>)

Pascal Editor

Free open-source 3D building editor — design walls, rooms, levels, roofs, and furniture in your browser.](<https://creatorstoolbox.com/tools/pascal-editor>)[![Blender](<https://www.google.com/s2/favicons?domain=blender.org&sz=128>)

Blender

Free, open-source 3D creation suite — modeling, animation, VFX, rendering, and video editing.](<https://creatorstoolbox.com/tools/blender>)[![Inkscape](<https://creatorstoolbox.com/images/inkscape-logo.png>)

Inkscape

Free, open-source vector graphics editor — create SVGs, logos, icons, and illustrations.](<https://creatorstoolbox.com/tools/inkscape>)[![beUI](<https://www.google.com/s2/favicons?domain=beui.dev&sz=128>)

beUI

Free, open-source animated components for React and Next.js — 108 motion primitives and blocks built with Motion and Tailwind, installable via the shadcn CLI.](<https://creatorstoolbox.com/resources/beui>)[![useLayouts](<https://www.google.com/s2/favicons?domain=uselayouts.com&sz=128>)

useLayouts

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.](<https://creatorstoolbox.com/resources/uselayouts>)[![Letters](<https://creatorstoolbox.com/images/letters-logo.png>)

Letters

Apple-inspired handwritten animation library — beautiful letter-by-letter text animations.](<https://creatorstoolbox.com/resources/letters>)

---
Canonical source: https://creatorstoolbox.com/tools/3dsvg