- Home /
how can I load an SVG Image by base64 bytes and place it on a Sprite Renderer
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 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.
I’ve tried to use this and I do not know where to get the tessalationOptions variable from?
Uhm, I'm not sure what you mean. It's declared as a class variable
public SVGTesselationOptions tesselationOptions;
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 .
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;
}
}
}
Your answer
Follow this Question
Related Questions
Rendering using the Transparent queue 1 Answer
Sup orthographic camera? 0 Answers
how to make SpriteRenderer visible only in bounds (2D) 1 Answer
Problem with a Bool 1 Answer
How can I render lit sprites in URP? 1 Answer