Problem rendering SVG to Texture

I have a <svg> tag defined on the HTML page, so my JS code is as follows:

let camera, scene, renderer;

const loader = new THREE.TextureLoader();

const makeTexture = () => {
	const svg = document.getElementById('svg');
	const svgData = (new XMLSerializer()).serializeToString(svg);
  const base64 = window.btoa(unescape(encodeURIComponent(svgData)));
  const src = "data:image/svg+xml;base64," + base64;

	const texture = loader.load(
    function (texture) {	renderScene(); },
    function (err) { console.error(err); }

  return texture;


function init() {

	const [w, h] = [400, 400];
  camera = new THREE.OrthographicCamera(-w/2, w/2, h/2, -h/2, 0,1);

  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(w, h);

  scene.background = new THREE.Color(0x003300);
  let geom = new THREE.PlaneBufferGeometry(300, 250, 1, 1);
  let mat = new THREE.MeshBasicMaterial({ color: 0xffffff });
  mat.transparent = true; = makeTexture(); = THREE.LinearFilter;
	const mesh = new THREE.Mesh(geom, mat);


function renderScene() {
  renderer.render(scene, camera);

It works but I have two questions:

  1. The quality of rendering is worse than svg itself, is it possible to improve?

  2. In this case, do I need to use texture.needsUpdate somewhere in the code?


Have you ever tried?

renderer.setPixelRatio( window.devicePixelRatio );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.physicallyCorrectLights = true;

outputEncoding seem to make it a little bit better but the colors are obviously wrong, physicallyCorrectLights doesn’t do anything.

How about this?

Also doesn’t change anything

Ok, for some unclear reason I get better results if I make an image out of svg and then draw image to canvas and use canvas as a texture, so I’ll go with that.

In terms of text sharpness, this solution sits somewhere in between of using svg in the texture loader and rendering text directly on canvas.