Is is possible to export an SVG- or other vector-formatted image from a scene rendered with three.js's WebGLRenderer? Is it possible with a scene derived from CanvasRenderer?

Failing that, how does one actually set up SVGRenderer with three.js? Instantiating a new THREE.SVGRenderer() in v69 appears to return an error in the console, for instance, indicating that the constructor is not available. The documentation for three.js does not appear to include details about SVGRenderer. Once set up, is it possible to use textures and particles with SVGRenderer, as is done in WebGLRenderer?

Is is possible to export an SVG- or other vector-formatted image from a scene rendered with three.js's WebGLRenderer? Is it possible with a scene derived from CanvasRenderer?

Failing that, how does one actually set up SVGRenderer with three.js? Instantiating a new THREE.SVGRenderer() in v69 appears to return an error in the console, for instance, indicating that the constructor is not available. The documentation for three.js does not appear to include details about SVGRenderer. Once set up, is it possible to use textures and particles with SVGRenderer, as is done in WebGLRenderer?

• javascript
• svg
• three.js
• webgl

• Take a look at the example threejs/examples/#svg_sandbox – gaitat Commented Dec 24, 2014 at 14:00

1 Answer 1

I had also task to export svg from three.js and here's working solution that works. it uses SVGRenderer:

var controls;
var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.x = 2;
  camera.position.y = 1;
  camera.position.z = 3;
  camera.zoom = 3.6;
  camera.updateProjectionMatrix();

  scene = new THREE.Scene();

  geometry = new THREE.BoxGeometry(0.4, 0.2, 0.2);
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    preserveDrawingBuffer: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight - 70);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.update();

  document.body.appendChild(renderer.domElement);
  
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

function btnSVGExportClick() {
  var rendererSVG = new THREE.SVGRenderer();
  
  rendererSVG.setSize(window.innerWidth, window.innerHeight);
  rendererSVG.render(scene, camera);
  ExportToSVG(rendererSVG, "test.svg");
}

function ExportToSVG(rendererSVG, filename) {
  var XMLS = new XMLSerializer();
  var svgfile = XMLS.serializeToString(rendererSVG.domElement);
  var svgData = svgfile;
  var preface = '<?xml version="1.0" standalone="no"?>\r\n';
  var svgBlob = new Blob([preface, svgData], {
    type: "image/svg+xml;charset=utf-8"
  });
  var svgUrl = URL.createObjectURL(svgBlob);
  var downloadLink = document.createElement("a");
  
  downloadLink.href = svgUrl;
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

<script src="https://threejs/build/three.min.js"></script>
<script src="https://threejs/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs/examples/js/renderers/SVGRenderer.js"></script>
<script src="https://threejs/examples/js/renderers/Projector.js"></script>

<input id="btnSVGExport" type="button" value="Get as SVG" onclick="btnSVGExportClick()" style="margin-bottom:3px">

Just save this code as some.html file and use Get as SVG button to save to svg file. jsfiddle link: https://jsfiddle/9y0b3wet/