OneTaskBy Tim King · Updated
SVG to 3D
Extrude a Logo or Icon into 3D and Render a PNG, Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the SVG To 3D works
This SVG to 3D tool extrudes a logo into a solid. Drop a flat SVG logo and it becomes a solid object with depth, bevelled edges and studio lighting. Keep the colours from the file or apply a single colour and a metallic finish, orbit to the angle you want and download a PNG with a transparent background at up to 4K. The extrusion and the render happen entirely in your browser.
SVG to 3D: what the tool reads
Every filled path, circle, rectangle, ellipse and polygon in the SVG becomes an extruded solid, and stroked paths become solid outlines of the stroke width. Fill and stroke colours are read from the file, including colours set in style attributes, so a multi-colour logo keeps its colours. Gradients, filters, masks, clip paths, text elements and embedded raster images are not supported: convert text to outlines and flatten gradients to solid colours before dropping the file.
Depth and bevel
Depth and bevel are in the SVG's own units, so a logo drawn in a 200 by 200 viewBox with a depth of 20 is a tenth as deep as it is wide. Depth pushes the shapes backwards; bevel rounds the front and back edges so they catch the light. Holes, such as the counter of a letter O, are kept when the path is drawn with the correct winding, which is how design programs export them.
Colour and finish
From the SVG uses each path's own fill and stroke colour. Single colour paints everything in the colour picker, which is the usual choice for a monochrome logo or a metallic version. Matte is a flat plastic surface, Glossy adds a highlight and Metal makes the colour a reflective metal; Metal looks best on Dark or Light backgrounds where the reflections have something to show.
Lighting, background and download
The object stands on a floor with a soft shadow under a three-light rig. Transparent removes the backdrop and shadow and saves a PNG with alpha; Dark, Light and White give a finished image. Drag to orbit, scroll to zoom, and press Fit view after loading a new file. Download PNG renders at preview size, twice preview size or 3840 pixels wide.
Fixing an SVG that does not look right
If shapes are missing, they probably have no fill or use a gradient: give them a solid fill. If a hole is filled in, reverse the direction of the inner path in your editor. If the whole logo is a single flat sheet, it was exported as a raster image inside an SVG wrapper; export real vector paths instead.
Privacy
The SVG is parsed and rendered locally. Nothing is uploaded and the page works offline once loaded.
FAQ
Why do parts of my SVG not appear?
Only solid fills and strokes are extruded. Gradients, patterns, filters, masks, text elements and embedded bitmaps are ignored. Convert text to outlines and replace gradients with solid colours in your design program, then drop the file again.
Can I keep the colours from my logo?
Yes. From the SVG, the default, uses each path's fill and stroke colour. Switch to Single colour to paint the whole object one colour, for example for a metallic monochrome version.
How do I get a transparent PNG?
Leave the background on Transparent and the download has an alpha channel and no floor shadow. The other backgrounds produce a finished image with a shadow.
What units are depth and bevel in?
The SVG's own units, the same ones as its viewBox. A logo drawn 500 units wide with a depth of 50 is a tenth as deep as it is wide. Scale the depth to the size of your drawing.
See also: all Mockups & 3D Making tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Diagram Makers, 3D Science, Tracker Music.
Related tools
3D Text Generator
Extrude text into 3D and download it as a PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.
SVG Optimizer
Strip editor cruft and round coordinates. See the bytes saved.
SVG Colour Replacer
List every colour in an SVG and swap one, all, or to currentColor.
3D Box Mockup
Wrap packaging artwork on a 3D box and download a PNG.