[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

.overdraw : Number

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

Methods

.clear () : undefined

Tells the renderer to clear its drawing surface.

.getSize () : Object

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

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

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

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

Sets the clearColor and the clearAlpha.

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

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

.setQuality () : undefined

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

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

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]

SVGRenderer SVGRenderer SVGRenderer SVGRenderer

SVGRenderer SVGRenderer SVGRenderer SVGRenderer