I know how to load SVG textures just by simply using BABYLON.Texture() but I’m wondering how I can change colour of some of the elements in the SVG in realtime? Say there is a circle in the SVG. I’d like users to be able to change colour of the circle. Does anyone know how to do this? I know how…

All good! I found a way :slight_smile: (after loading file via Ajax into variable “xml”) var svg = xml.documentElement; var s = new XMLSerializer().serializeToString(svg); var encodedData = “data:image/svg+xml;base64,”+window.btoa(s); var texture = BABYLON.Texture.LoadFromDataString(“svg”, enc…

Unfortunately as soon as the SVG is transfered to the texture it loses all its abilities as it becomes a simple bitmap You can perhaps dispose the previous texture and generates a new one from the updated svg?

I don’t mind generating a new texture. It doesn’t need to be 100% realtime. I can load the SVG in memory and change its contents. But how can I put that into a texture? I tried BABYLON.Texture.LoadFromDataString(“texture”,svgElement, scene) but that doesn’t work.

You can use a blob and an object url I think. example of use: https://www.babylonjs-playground.com/#5ZCGRM#43

@ozRocker Any chance you can do a playground of that to help a fella out? LOL. I’ve been bashing away at this same problem for over a week. Thanks!

Ok, So here’s where I stand: // create a variable to the path of the .xml or .svg file var defaultSVG = “PATH TO FILE”; $.get(defaultSVG , function(data) { // @ozRocker code here var svg = data.documentElement; var s = new XMLSerializer().serializeToString(svg); var encodedData = …

@geesea Something looks weird. You’ve already created your texture here with this: var texture = BABYLON.Texture.LoadFromDataString(‘data’ , encodedData, scene); You should be able to just use that like: meshPBR.albedoTexture = texture; or even: meshPBR.albedoTexture = BABYLON.Texture.LoadFro…

@ozRocker OMG. I really hate myself right now! HAHAHA. You are correct.

Hi guys I just need to know if understood what you just discussed here, so you telling me that if I have lets say this tool : [image] which is just a SVG that you can configure to set different colors to the shown pattern, and lets say I want this tool to have that pattern displayed on a 3D sofa …

I guess it should be fine :slight_smile:

Change SVG texture in realtime

Questions

Deltakosh March 8, 2019, 1:19am 6

even better!

How to draw an SVG from a string to the fullscreen UI?

Topic		Replies	Views
Load SVG on mesh as texture Questions	6	2919	August 5, 2024
Using SVG code saved within a variable as a texture Questions texture	5	1516	June 23, 2022
Drawing SVG content (text) into DynamicTexture doesn't work in Safari < v15 Bugs material	6	1759	December 3, 2021
Is it possible to create texture from SVG data URL in Babylon Native? Questions native , texture , svg	5	711	June 14, 2022
SVG texture with image linking to "object URL" does not work Bugs	3	536	February 1, 2021

Change SVG texture in realtime

Related topics