Chapter 202: SVGLoader

Core Idea

A loader for the SVG format.

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Key Concepts

• defaultDPI : number: Default dots per inch.
• defaultUnit : 'mm' | 'cm' | 'in' | 'pt' | 'pc' | 'px': Default unit.

Code Examples

const loader = new SVGLoader();
const data = await loader.loadAsync( 'data/svgSample.svg' );
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 );

• What it demonstrates: Typical usage of SVGLoader.

Reference Tables

Constructor

Signature
new SVGLoader( manager : LoadingManager )

Properties

Property	Description
.defaultDPI : number	Default dots per inch.
`.defaultUnit : 'mm'	'cm'

Methods

Method	Description
.load( url : string, onLoad : function, onProgress : onProgressCallback, onError : onErrorCallback )	Starts loading from the given URL and passes the loaded SVG asset to the onLoad() callback.
.parse( text : string ) : Object	Parses the given SVG data and returns the resulting data.

Key Takeaways

1. SVGLoader extends: Loader
2. Most relevant properties: defaultDPI, defaultUnit.
3. Key methods: load, parse.

Connects To

• Loader: parent class
• Source: examples/jsm/loaders/SVGLoader.js