Adding getSize method to SVGRenderer.js and updated docs

[shaunco]

Fixes #19732

[Mugen87]

It should be sufficient to just return _svgWidth and _svgHeight. Please keep the implementation simple.

[shaunco]

Unlike WebGLRenderer that defaults values for these, SVGRenderer leaves them undefined. This means that a call to getSize that has never called setSize gets { width: undefined, height: undefined }... which seems unexpected?

[Mugen87]

Why should setSize() be never called? The usual pattern in all examples is to create the renderer and then set its size.

[shaunco]

When render.domElement.parent controls the size of render.domElement through CSS, setSize might not be called until you actually need to update the camera's projection matrix in an animate step. Meanwhile, you might call getSize prior to that while setting up your camera or adjusting zoom or the frustrum.

In the case of WebGLRenderer, _width and _height default to _canvas.width and _canvas.height, respectively. In SVGRenderer, _svgWidth and _svgHeight are left undefined. HTML5 specifies that a canvas defaults to 300x150, and it does the same for svg elements, but the some browsers expand inline svg elements to fill the viewport (width: 100vw; height: 100vh;). Either way, the svg element will have a width and a height and I can change the THREE.SVGRenderer constructor to set:

  _svgWidth = _svg.width.baseVal.value;
  _svgHeight = _svg.height.baseVal.value;

If that would be preferred over the getSize implementation I used, but simply leaving getSize() to return undefined values seems wrong.

[shaunco]

Actually, I take it back. The svg element is not yet connected to the dom, so _svg.width.baseVal.value can't be resolved in Chromium browsers, as Chromium defaults to 100%. I could do:

	this.getSize = function () {

		if ( ( _svgWidth === undefined || _svgHeight === undefined ) && _svg.parentElement === undefined ) {

			console.warn( "SVGRenderer: .getsize() can't be called until after setSize or after .domElement has been attached to the dom" );

		}

		return { 
			width: _svgWidth ? _svgWidth : _svg.width.baseVal.value, 
			height: _svgHeight ? _svgHeight : _svg.height.baseVal.value
		};

	};

[Mugen87]

Sorry but you make the code unnecessarily complicated. I can only approve this version:

this.getSize = function () {

	return {
		width: _svgWidth,
		height: _svgHeight
	};

};

In general, the example code does not assume that users fiddle around with CSS in order to size the renderer's canvas.

[shaunco]

I don't understand how providing a concise warning when developers misuse an API makes the code "unnecessarily complicated"? There are plenty of examples of users that "fiddle around with CSS in order to size the renderer's canvas", including:

• https://threejsfundamentals.org/threejs/lessons/threejs-responsive.html
• CSS based size by default? #4903
• https://stackoverflow.com/questions/49344698/threejs-size-canvas-to-fill-space

and support for this was added to WebGLRenderer back in 2013: ed00cd6 (and expanded in 2016: 5f78a27 ) in response to #2969

[Mugen87]

The mentioned guide Three.js Responsive Design and #4903 are from the same dev and I don't share his opinion on this topic. I think it's better if the engine does not require the user to work with CSS.

[mrdoob]

This doesn't work?

this.getSize = function () {

	return {
		width: _svg.clientWidth,
		height: _svg.clientHeight
	};

};

[Mugen87]

Closing in favor of #19802.