---

title: SVGLoader category: Addons layout: docs

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