# Three.js extrude SVG path

DevFeed: [Three.js extrude SVG path](<https://devfeed.tech/articles/three-js-extrude-svg-path-37363.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/three-js-extrude-svg-path/>)

Author: Stanko

Published: 2019-12-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Three.js](<https://devfeed.tech/topics/threejs.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [3D](<https://devfeed.tech/topics/3d.md>), [Graphics](<https://devfeed.tech/topics/graphics.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [demo](<https://devfeed.tech/tags/demo.md>), [export](<https://devfeed.tech/tags/export.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [gotchas](<https://devfeed.tech/tags/gotchas.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [svg](<https://devfeed.tech/tags/svg.md>), [three-js](<https://devfeed.tech/tags/three-js.md>)

## AI overview

A tutorial on importing SVG data into Three.js with SVGLoader and extruding SVG paths into 3D geometry with ExtrudeGeometry. It explains setup details and common issues, including the inverted Y axis when mapping SVG coordinates into Three.js.

## Source excerpt

Update, September 2025 # Replaced path.toShapes(true) with SVGLoader.createShapes(path) because toShapes misses some of the SVG-specific logic implemented in the loader. Thanks to forresto who pointed it out. Also updated the demo to use a fresh version of ThreeJS. These days I'm playing with three.js again. I'm not an expert but I enjoy playing with graphics. Conveniently, a friend of mine sent me this Dribble, and I thought it would be a perfect exercise to try making it. I still haven't done it, but I did some exploration on how to built it. My plan was to draw the parallaxing layers as vectors, import it in three.js and use ExtrudeGeometry to give them a third dimension. To three.js ninjas this might be funny, but it took me some time. I haven't found well documented way, plus there are a couple of gotchas. And that is the reason I want to share this process with you. Before we start # I'll assume you have a basic understanding of three.js, and how to setup a scene. If you are just starting with it, I recommend going through their excellent Getting Started guide first. If you just want to see the end result, feel free to jump to the code or the live demo. SVGLoader # Three.js provides us with SVGLoader, but it is not the part of the main export. It is an addon, and can import it like this: import { SVGLoader } from "three/addons/loaders/SVGLoader.js"; Like it's name suggest this class loads SVG from an URL and parses it into three.js entries. If you already have SVG markup as a string, it is easy to parse it, but it is also easy to miss how to do it in the documentation. SVGLoader extends base Loader class, which contains .parse() method. That means we can do this: // Get SVG's markup const svgMarkup = document.querySelector('svg').outerHTML; const loader = new SVGLoader(); const svgData = loader.parse(svgMarkup); Now when we know how to get SVG data to three.js, let's try to extrude it. Extrude # You'll need a SVG, I used my logo: To get to the shapes we can ex