three.js: loading svg with textureloader not working since r78

Question

The following has worked well for me with svg files in R76 and R77 of Three.js, but in R78 I can only get it to work with pngs and jpgs

    var floor = new THREE.TextureLoader();
    floor.load('layout.svg', function ( texture ) {
        var geometry = new THREE.PlaneBufferGeometry(4096, 4096);
        var material = new THREE.MeshBasicMaterial( { map: texture } );
        var mesh = new THREE.Mesh(geometry, material);
        mesh.rotation.x = -Math.PI / 2;
        scene.add(mesh);
    } );

Since the problem arose, I added the progress and error functions to the load arguments...

    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },

    function ( xhr ) {
        console.log( 'An error happened' );
    }

...which tells me that in r78, the svg is 100% loaded, but it doesn't show up in the scene. I should add that I also used this with phongmaterial for the reflection properties, and with transparency to show svg elements apparently floating in a skymap, great fun. My question is, how can I get this working?

In R77, the svg would map to a planeBufferGeometry in FF or chrome.

In R78 it wont load, no errors shown on Firebug.

UPDATE

I investigated SVGLoader.js, SVGRenderer.js (which also requires Projector.js). Renders an svg file facing camera, responds to translations, but not rotations; i.e. no perspective view possible. I added an xml header to the svg file, then a doctype, but threejs obviously isn't bothered by their absence. Using localhost makes no difference in FF, required in Chrome

So the problem seems to lie either with TextureLoader or WebGLRenderer, which have both had quite a reshuffle in R78.

I also briefly tried the dev version, which acts as r78 does.

Can anyone suggest where I go from here? I'm not sure whether to submit a bug, or a "feature restore". Here's the desired effect.

Answer 1

Now my understanding is that prior to R78, svgs were internally converted to raster images before rendering.

To continue to use svg images in R78 onwards with Textureloader, convert them to pngs beforehand.

OR if the svg always faces the camera, use the THREE.SVGLoader.

OR If the separate svg elements are required in a three.js scene, convert them to paths and use this example to make a 2d shape or a 3d extruded shape.

My lesson here was not to rely on examples to just work. I should dig right in, break things, and stay up to date with issues on Github.

And use more than one browser; at the time, Chrome was going through a buggy phase not entirely unrelated to this.