how can I load an SVG Image by base64 bytes and place it on a Sprite Renderer

Question

As the question states I have a byte array for an SVG image that I want to get onto a Sprite Renderer. But I have had no luck achieving this so I'm hoping someone has something to point me in the right direction.

I tried something like this here https://answers.unity.com/questions/1620058/how-to-set-image-that-converted-from-base64-string.html but this works only for png or jpg.

I also made sure the bytes were correct by using this converter to show my image https://base64.guru/converter/decode/image/svg

the documentation here https://docs.unity3d.com/Packages/com.unity.vectorgraphics@2.0/manual/index.html is not very helpful for trying to figure this one out.

Any help on this would be greatly appreciated!

Answer 1

Best Answer

Answer by Bunny83 · Feb 27 at 10:03 AM

Have a look over here. I haven't used any svg images in Unity yet, so i can not verify that it works.

edit

Here's my test example using the Unity logo from wikipedia

 using System.Collections.Generic;
 using UnityEngine;
 using Unity.VectorGraphics;
 using System.IO;
 
 public class SVGTest : MonoBehaviour
 {
     public TextAsset svgAsset;
     public VectorUtils.TessellationOptions tesselationOptions;
     [SerializeField] private SpriteRenderer spriteRenderer;
 
     private void Start()
     {
         tesselationOptions.MaxCordDeviation = float.MaxValue;
         tesselationOptions.MaxTanAngleDeviation = float.MaxValue;
         tesselationOptions.StepDistance = 1f;
         tesselationOptions.SamplingStepSize = 0.1f;
         LoadSVG(svgAsset.text);
     }
 
     private void LoadSVG(string svgBytes)
     {
         using (StringReader reader = new StringReader(svgBytes))
         {
             SVGParser.SceneInfo sceneInfo = SVGParser.ImportSVG(reader);
             List<VectorUtils.Geometry> geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tesselationOptions);
 
             // Build a sprite with the tessellated geometry.
             Sprite sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
             sprite.name = "SVGimage";
             spriteRenderer.sprite = sprite;
         }
     }
 }

I renamed the svg file and appended .bytes so I was able to assign the file as text asset to my script. the image loaded well as expected.

Note that the image is not base64 encoded as it is just a plain svg image which is just plain XML text. You could use base64 encoding on top, but it would just make the file larger for no reason and requires you to decode it first before passing it to the svg parser.

Add comment · Show 8 · Share

HalfSuperNate · Feb 27 at 06:52 PM 0

Share

I’ve tried to use this and I do not know where to get the tessalationOptions variable from?

Bunny83 HalfSuperNate · Feb 28 at 02:13 AM 0

Share

Uhm, I'm not sure what you mean. It's declared as a class variable

 public SVGTesselationOptions tesselationOptions;

HalfSuperNate Bunny83 · Feb 28 at 02:37 AM 0

Share

 using System.Collections.Generic;
 using UnityEngine;
 using Unity.VectorGraphics;
 using System.IO;
 using static Unity.VectorGraphics.VectorUtils;
 
 public class SVGInScene : MonoBehaviour
 {
     //public TextAsset svgAsset;
     public string svgByteString;
     public TessellationOptions tesselationOptions;
     [SerializeField] private SpriteRenderer spriteRenderer;
 
 
     public void LoadInSVG(string svgBytes)
     {
         svgByteString = svgBytes;
         InitSVG(svgBytes);
     }
 
     private void InitSVG(string svgBytes)
     {
         // Dynamically import the SVG data, and tessellate the resulting vector scene.
         SVGParser.SceneInfo sceneInfo = LoadSVG(svgBytes);
         List<Geometry> geoms = TessellateScene(sceneInfo.Scene, tesselationOptions);
 
         // Build a sprite with the tessellated geometry.
         Sprite sprite = BuildSprite(geoms, 10.0f, Alignment.Center, Vector2.zero, 128, true);
         sprite.name = "SVGimage"; //svgAsset.name;
         //SpriteRenderer spriteRenderer = gameObject.AddComponent<SpriteRenderer>(); // or get existing one
         spriteRenderer.sprite = sprite;
     }
 
     private SVGParser.SceneInfo LoadSVG(string svgBytes)
     {
         using (StringReader reader = new StringReader(svgBytes)) //new StringReader(svgAsset.text))
         { // not strictly needed but in case switch later.
             return SVGParser.ImportSVG(reader);
         }
     }
 }

This is my current code and it is not loading in my SVG image from the base64 byte string I call svgBytes .

Show more comments

HalfSuperNate · Mar 01 at 12:48 AM 0

Share

This code did the trick ty so much! Also turns out I had to decode the image string again from base64 before running it through the reader. Again many many thanks!!!!

Here is my final code if anyone cares to see it:

 using System.Collections.Generic;
 using UnityEngine;
 using Unity.VectorGraphics;
 using System.IO;
 
 public class SVGInScene : MonoBehaviour
 {
     //public TextAsset svgAsset;
     public string svgImageString;
     public VectorUtils.TessellationOptions tesselationOptions;
     [SerializeField] private SpriteRenderer spriteRenderer;
 
     private void Start()
     {
         tesselationOptions.MaxCordDeviation = float.MaxValue;
         tesselationOptions.MaxTanAngleDeviation = float.MaxValue;
         tesselationOptions.StepDistance = 1f;
         tesselationOptions.SamplingStepSize = 0.1f;
         //LoadSVG(svgAsset.text);
     }
 
     public void LoadInSVG(string svgString)
     {
         svgImageString = svgString;
 
         tesselationOptions.MaxCordDeviation = float.MaxValue;
         tesselationOptions.MaxTanAngleDeviation = float.MaxValue;
         tesselationOptions.StepDistance = 1f;
         tesselationOptions.SamplingStepSize = 0.1f;
         LoadSVG(svgString);
     }
 
     private void LoadSVG(string svgString)
     {
         using (StringReader reader = new StringReader(svgString))
         {
             SVGParser.SceneInfo sceneInfo = SVGParser.ImportSVG(reader);
             List<VectorUtils.Geometry> geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tesselationOptions);
 
             // Build a sprite with the tessellated geometry.
             Sprite sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
             sprite.name = "SVGimage";
             spriteRenderer.sprite = sprite;
         }
     }
 }

how can I load an SVG Image by base64 bytes and place it on a Sprite Renderer

1 Reply

Your answer

Follow this Question

Related Questions