Loader →

# SVGLoader

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.

## Code Example

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

## Import

SVGLoader is an addon, and must be imported explicitly, see Installation#Addons.

    import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';

## Constructor

### new SVGLoader ( manager : LoadingManager )

Constructs a new SVG loader.

manager | The loading manager.

## Properties

### .defaultDPI : number

Default dots per inch.

Default is `90`.

### .defaultUnit : 'mm' | 'cm' | 'in' | 'pt' | 'pc' | 'px'

Default unit.

Default is `'px'`.

## Methods

### .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.

url | The path/URL of the file to be loaded. This can also be a data URI.
onLoad | Executed when the loading process has been finished.
onProgress | Executed while the loading is in progress.
onError | Executed when errors occur.

Overrides: Loader#load

### .parse ( text : string ) : Object

Parses the given SVG data and returns the resulting data.

text | The raw SVG data as a string.

Overrides: Loader#parse

Returns: An object holding an array of shape paths and the SVG XML document.

## Static Methods

### .createShapes ( shapePath : ShapePath ) : Array.<Shape>

Creates from the given shape path and array of shapes.

shapePath | The shape path.

Returns: An array of shapes.

### .getStrokeStyle ( width : number, color : string, lineJoin : 'round' | 'bevel' | 'miter' | 'miter-limit', lineCap : 'round' | 'square' | 'butt', miterLimit : number ) : Object

Returns a stroke style object from the given parameters.

width | The stroke width. Default is `1`.
color | The stroke color, as returned by Color#getStyle. Default is `'#000'`.
lineJoin | The line join style. Default is `'miter'`.
lineCap | The line cap style. Default is `'butt'`.
miterLimit | Maximum join length, in multiples of the `width` parameter (join is truncated if it exceeds that distance). Default is `4`.

Returns: The style object.

### .pointsToStroke ( points : Array.<Vector2>, style : Object, arcDivisions : number, minDistance : number ) : BufferGeometry

Creates a stroke from an array of points.

points | The points in 2D space. Minimum 2 points. The path can be open or closed (last point equals to first point).
style | Object with SVG properties as returned by `SVGLoader.getStrokeStyle()`, or `SVGLoader.parse()` in the `path.userData.style` object.
arcDivisions | Arc divisions for round joins and endcaps. Default is `12`.
minDistance | Points closer to this distance will be merged. Default is `0.001`.

Returns: The stroke geometry. UV coordinates are generated ('u' along path. 'v' across it, from left to right). Returns `null` if not geometry was generated.

### .pointsToStrokeWithBuffers ( points : Array.<Vector2>, style : Object, arcDivisions : number, minDistance : number, vertices : Array.<number>, normals : Array.<number>, uvs : Array.<number>, vertexOffset : number ) : number

Creates a stroke from an array of points.

points | The points in 2D space. Minimum 2 points.
style | Object with SVG properties as returned by `SVGLoader.getStrokeStyle()`, or `SVGLoader.parse()` in the `path.userData.style` object.
arcDivisions | Arc divisions for round joins and endcaps. Default is `12`.
minDistance | Points closer to this distance will be merged. Default is `0.001`.
vertices | An array holding vertices.
normals | An array holding normals.
uvs | An array holding uvs.
vertexOffset | The vertex offset. Default is `0`.

Returns: The number of vertices.

## Source

examples/jsm/loaders/SVGLoader.js