Load SVG on mesh as texture

Questions
1

Hello, guys,

I would like to load an edited SVG as texture onto a mesh.
Currently I get my SVG file from the server and load it into the DOM, change colors and want to load this custom SVG as texture on the mesh.
Is there anyone who can help me? :slight_smile:

var xhr = new XMLHttpRequest();
	xhr.open('GET', svgFile);
	xhr.onload  = function() {
		if(xhr.readyState != 4) {
			return;
		}
		var svg = xhr.responseXML.documentElement;
		svg = document.importNode(svg, true);
		svg.classList.add('svg-file');
		svg.id = 'svg-file';
		document.body.appendChild(svg);
		var svgRect = document.getElementById('svg-file');
		var fillColor = svgRect.getElementsByClassName('st2');
		for (var i = 0; i < fillColor.length; i++) {
			fillColor[i].style.fill = '#ff0000';
		}

		let planeMaterial = new PBRMetallicRoughnessMaterial('material', scene);
		planeMaterial.metallic = 0.05;
		planeMaterial.roughness = 0.1;
		planeMaterial.baseTexture = new Texture(/** ?? **/, scene);
		planeMaterial.baseTexture.hasAlpha = true;
		mesh.material = planeMaterial;
	};
	xhr.send();
2

Svg is not supported by default but you could draw it to a canvas with a 2d context and then use an HTMLElementTexture to wrap your canvas in a babylon textyure ?

1 Like
3

Thank you for your response.
If I include the svg file as path in new BABYLON.Texture(svgPath, scene); it works. Is there a difference in how it loads it?
I’ll try your example :slight_smile:

4

Nope, I thought you wanted to tweak it by code before hand :slight_smile: if not you better load from the path

5

Sorry for the confusion. I just meant that loading via path “native” works without writing into an extra canvas.
I’m now trying to load the SVG into a canvas and send the result as texture in my meshmaterial. I hope it works :smiley:
Thanks for your support.

6

Hi everyone,
is it now possible to use svg as a texture ?

7

It should work, can you share a repro of where it does not work for you ?