SVG to 3D

Ready

Drop your SVG here

or click "Upload SVG". Outlines become extruded shapes under studio lighting.

How to turn SVG into 3D online

The tool extrudes a flat vector outline into a solid shape with a bevel and studio lighting. It works well for logos, icons and simple marks: make a 3D logo for your website, a cover image, or a preview for social media or a presentation. The scene renders in your browser with Three.js (WebGL), so there's nothing to install.

How to use it

Click "Upload SVG" or drag a file into the window. To see how it looks first, click "Try the demo".
Pick a material: studio, glass, plastic, metal or chrome.
Set the model color and the background color.
Adjust the light intensity and the 3D depth (from 0 to 200%). Move your cursor over the scene: the shape tilts to follow the mouse, which lets you find the right angle and highlight.
Save the result: "4K screenshot" gives you a PNG 3840 px wide, and "Export HTML" gives you the scene code to embed on a website.

How to prepare your SVG

Only filled shapes get depth. Lines without a fill (strokes) are skipped. Convert strokes to outlines: in Figma use Outline stroke, in Illustrator use Object → Path → Outline Stroke.
Convert text to outlines, or the letters won't show up.
The simpler the outline, the cleaner the bevel. Extra anchor points and tiny details cause artifacts.
The whole shape is rendered in one color; the original SVG colors are not kept.

HTML export

The code contains your SVG and the settings you chose. Paste it into an HTML code block on any page: the scene fills a 16:10 block and responds to the mouse just like it does here. Three.js loads from a CDN, so the page needs an internet connection.

Limitations

You can't download a 3D model (GLB, OBJ, STL). The result is an image or an interactive scene, so it won't work for 3D printing or Blender.
Only SVG files are accepted. Raster PNG and JPG images won't work.
Tilting follows the mouse. On a phone, the shape stays at its default angle.
Glass and chrome are heavier on the GPU, and the scene may lag on low-end devices.

Privacy

Your SVG is read and rendered in your browser; the file is never sent to a server. The Three.js library loads from the cdnjs and jsDelivr CDNs. The site collects visit statistics: Cloudflare Web Analytics without cookies, while Yandex Metrica and Google Analytics load only if you've accepted cookies. Learn more in our privacy policy.

Need an idea for a mark? Browse logo prompts. A 4K PNG screenshot is a large file, so it's handy to compress it online before publishing. To get depth from a regular photo, try the online depth map tool.

SVG to 3D FAQ

Can I download a 3D model for printing?

No. The tool saves a 3840 px PNG screenshot and the scene's HTML code. There are no GLB, OBJ or STL files.

Why won't my SVG turn 3D?

Most likely the file contains only strokes or live text. Convert strokes and fonts to filled outlines and upload the file again.

How do I add a 3D logo to my website?

Click "Export HTML", then "Copy", and paste the code into an HTML code block in your website builder or into your page template.

Is it free?

Yes, no sign-up required. There's no watermark on the screenshot.