[page:Loader] →

[name]

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.

Code Example


		// 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' );

			}
		);

Examples

[example:webgl_loader_svg]

Constructor

[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].

Properties

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

Methods

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. If the server does not set the Content-Length header; .[page:Integer total] will be 0.
[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.

Source

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