[page:Loader] →


A loader for loading a .svg resource.
Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.


// instantiate a loader const loader = new SVGLoader(); // load a SVG resource loader.load( // resource URL 'data/svgSample.svg', // called when the resource is loaded function ( data ) { const paths = data.paths; const group = new THREE.Group(); for ( let i = 0; i < paths.length; i ++ ) { const path = paths[ i ]; const material = new THREE.MeshBasicMaterial( { color: path.color, side: THREE.DoubleSide, depthWrite: false } ); const shapes = SVGLoader.createShapes( path ); for ( let j = 0; j < shapes.length; j ++ ) { const shape = shapes[ j ]; const geometry = new THREE.ShapeGeometry( shape ); const mesh = new THREE.Mesh( geometry, material ); group.add( mesh ); } } scene.add( group ); }, // called when loading is in progresses function ( xhr ) { console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' ); }, // called when loading has errors function ( error ) { console.log( 'An error happened' ); } );




[name]( [param:LoadingManager manager] )

[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].

Creates a new [name].


See the base [page:Loader] class for common properties.


See the base [page:Loader] class for common methods.

[method:undefined load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )

[page:String url] — A string containing the path/URL of the .svg file.
[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives an array of [page:ShapePath] as an argument.
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains [page:Integer total] and [page:Integer loaded] bytes.
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives the error as an argument.

Begin loading from url and call onLoad with the response content.

Static Methods

[method:Array createShapes]( [param:ShapePath shape] )

[page:ShapePath shape] — A ShapePath from the array of [page:ShapePath], given as argument in the onLoad function for the load function of [page:SVGLoader].

Returns one or more [page:Shape] objects created from the [param:ShapePath shape] provided as an argument in this function.


[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/loaders/SVGLoader.js examples/jsm/loaders/SVGLoader.js]