# Using SVG code saved within a variable as a texture **URL:** \ **Category:** Questions\ **Tags:** texture\ **Created:** [May 24, 2022, 5:27pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701 "2022-05-24T17:27:27Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![TameAim](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@TameAim](https://forum.babylonjs.com/u/TameAim)\ **Post date:** [May 24, 2022, 5:27pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701/1 "2022-05-24T17:27:27Z")
Hi. I just started playing with Babylon.js and I have created a bunch of ribbons mathematically. I have also created an SVG to use as a texture, as it uses the heights of the ribbons to colour different areas of the SVG depending on their heights. Now if I save the SVG code to a .svg file then this works great. But I would like the ribbons to be dynamic, so I want to use the SVG code inside a variable to apply my texture. So instead of: > myMaterial.diffuseTexture = new BABYLON.Texture(‘temporaryIsland1Texture.svg’, scene); > ribbon.material = myMaterial; I want to use: > myMaterial.diffuseTexture = new BABYLON.Texture(variableContainingSVGCode, scene); > ribbon.material = myMaterial; This doesn’t seem to work. Is there anyway I can trick babylon.js into treating my variable code like it is an SVG file? Ideally without any extra libraries if possible. ---
**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\ **Post date:** [May 24, 2022, 5:41pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701/2 "2022-05-24T17:41:45Z")
Hi @TameAim I found this post that might help you: [How to fill a texture with base64 data? - Questions & Answers - HTML5 Game Devs Forum](https://www.html5gamedevs.com/topic/39191-how-to-fill-a-texture-with-base64-data/) PG taken from the post: [https://www.babylonjs-playground.com/#1RTIYC#0](https://www.babylonjs-playground.com/#1RTIYC#0) ---
**Author:** ![TameAim](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@TameAim](https://forum.babylonjs.com/u/TameAim)\ **Post date:** [May 24, 2022, 10:10pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701/3 "2022-05-24T22:10:09Z")
Thanks @slin I’ve learnt a bit about base64 now but I still can’t quite get this to work (although I’m not getting any errors in the console, but still no texture). > let ribbon = BABYLON.MeshBuilder.CreateRibbon(islandsObj.island1.name, { pathArray: pathArray, closeArray: false, closePath: false}, scene ); > // THE FOLLOWING THROWS ERRORS > let serializer = new XMLSerializer().serializeToString(variableContainingSVGCode) > // BUT APPLYING THE SVG CODE TO A RANDOM DIV AND THEN RECALLING IT DID NOT THROW ERRORS > let serializer = new XMLSerializer().serializeToString(document.getElementById(“tempShowSVG”)) > // I THEN USED THIS > let encodedData = window.btoa(serializer); > // I TRIED EACH OF THE FOLLOWING AFTER SERIALIZING > let texture = ‘data:image/jpg;base64,’ + encodedData > let texture = ‘data:image/png;base64,’ + encodedData > let texture = ‘data:image/svg+xml;base64,’ + encodedData > // I TRIED EACH OF THESE WITHOUT ENCODING TOO, BUT ALSO NO LUCK > let texture = ‘data:image/svg+xml;utf8,’ + variableContainingSVGCode > let texture = ‘data:image/jpg;base64,’ + variableContainingSVGCode > // SO THIS DOES NOTHING FOR ANY OF THE ABOVE EXAMPLES > let myMaterial = new BABYLON.StandardMaterial(“island1Texture”, scene); > myMaterial.diffuseTexture = new BABYLON.Texture(texture, scene); > ribbon.material = myMaterial; ---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [May 24, 2022, 10:38pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701/4 "2022-05-24T22:38:17Z")
Also the solution in this topic could help, it looks like they’re doing it more like you are with the XMLSerializer, but using Texture.LoadFromDataString instead of the Texture constructor. 🙂 > [@Change SVG texture in realtime](https://forum.babylonjs.com/t/change-svg-texture-in-realtime/1767/5): > > 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”, encodedData, scene); ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [June 23, 2022, 1:29pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701/5 "2022-06-23T13:29:21Z")
Hello just checking in, was your question answered? @TameAim ---
**Author:** ![TameAim](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@TameAim](https://forum.babylonjs.com/u/TameAim)\ **Post date:** [June 23, 2022, 3:58pm UTC](https://forum.babylonjs.com/t/using-svg-code-saved-within-a-variable-as-a-texture/30701/6 "2022-06-23T15:58:24Z")
Hi @carolhmj, Unfortunately I could not get this to work, so I moved onto using bitmaps instead. That’s not to say the techniques suggested wouldn’t work for someone who understands the procedure better.