Load SVG on mesh as texture

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();

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

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:

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

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.