[name]

[name] can be used to render geometric data using SVG. The produced vector graphics are particular useful in the following use cases:

[name] 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:

Examples

[example:svg_lines lines]
[example:svg_sandbox sandbox]

Constructor

[name]()

Properties

[property:Number overdraw]

Number of fractional pixels to enlarge polygons in order to prevent anti-aliasing gaps. Range is [0..1]. Default is `0.5`.

Methods

[method:undefined clear]()

Tells the renderer to clear its drawing surface.

[method:Object getSize]()

Returns an object containing the width and height of the renderer.

[method:undefined render]( [param:Scene scene], [param:Camera camera] )

Renders a [page:Scene scene] using a [page:Camera camera].

[method:undefined setClearColor]( [param:Color color], [param:number alpha] )

Sets the clearColor and the clearAlpha.

[method:undefined setPrecision]( [param:Number precision] )

Sets the precision of the data used to create a path.

[method:undefined setQuality]()

Sets the render quality. Possible values are `low` and `high` (default).

[method:undefined setSize]( [param:Number width], [param:Number height] )

Resizes the renderer to (width, height).

Source

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