Chapter 275: SVGRenderer

Core Idea

This renderer an be used to render geometric data using SVG. The produced vector graphics are particular useful in the following use cases:

Animated logos or icons.
Interactive 2D/3D diagrams or graphs.
Interactive maps.
Complex or animated user interfaces.

SVGRenderer has various advantages. It produces crystal-clear and sharp output which is independent of the actual viewport resolution.SVG elements can be styled via CSS. And they have good accessibility since it's possible to add metadata like title or description (useful for search engines or screen readers).

There are, however, some important limitations:

No advanced shading.
No texture support.
No shadow support.

Key Concepts

autoClear : boolean: Whether to automatically perform a clear before a render call or not.
domElement : SVGSVGElement: The DOM where the renderer appends its child-elements.
info : Object: Provides information about the number of rendered vertices and faces.
outputColorSpace : SRGBColorSpace | LinearSRGBColorSpace: The output color space.
overdraw : number: Number of fractional pixels to enlarge polygons in order to prevent anti-aliasing gaps. Range is [0,1].
sortElements : boolean: Whether to sort elements or not.
sortObjects : boolean: Whether to sort 3D objects or not.

Code Examples

import { SVGRenderer } from 'three/addons/renderers/SVGRenderer.js';

What it demonstrates: Typical usage of SVGRenderer.

Reference Tables

Constructor

Signature
`new SVGRenderer()`

Properties

Property	Description
`.autoClear : boolean`	Whether to automatically perform a clear before a render call or not.
`.domElement : SVGSVGElement`	The DOM where the renderer appends its child-elements.
`.info : Object`	Provides information about the number of rendered vertices and faces.
`.outputColorSpace : SRGBColorSpace	LinearSRGBColorSpace`
`.overdraw : number`	Number of fractional pixels to enlarge polygons in order to prevent anti-aliasing gaps. Range is `[0,1]`.
`.sortElements : boolean`	Whether to sort elements or not.
`.sortObjects : boolean`	Whether to sort 3D objects or not.

Methods

Method	Description
`.clear()`	Performs a manual clear with the defined clear color.
`.getSize() : Object`	Returns an object containing the width and height of the renderer.
`.render( scene : Object3D, camera : Camera )`	Renders the given scene using the given camera.
`.setClearColor( color : number	Color
`.setPrecision( precision : number )`	Sets the precision of the data used to create a paths.
`.setQuality( quality : 'low'	'high' )`
`.setSize( width : number, height : number )`	Resizes the renderer to the given width and height.

Key Takeaways

Most relevant properties: autoClear, domElement, info, outputColorSpace.
Key methods: clear, getSize, render, setClearColor.

Connects To

Source: examples/jsm/renderers/SVGRenderer.js