The purpose
I’ll show you how to use SVG in Unity.
When I looked it up, the results said to install Vector Graphics using the Package Manager. However, in my environment (2021.3.4411 Personal), Vector Graphics didn’t show up in the Package Manager.
This article will show you how to install Vector Graphics without using the Package Manager and how to use it with a Canvas.
Install
In your Unity project, open the Packages/manifest.json file.
Add the following line to the dependencies section.
"com.unity.vectorgraphics": "2.0.0-preview.12",
Example：（Bold text has been added.）
{
"dependencies": {
"com.unity.vectorgraphics": "2.0.0-preview.12",
"com.unity.collab-proxy": "2.5.1",
"com.unity.feature.2d": "2.0.1",
"com.unity.ide.rider": "3.0.31",
"com.unity.ide.visualstudio": "2.0.22Installation will start automatically when you activate the Unity Editor.
How to display an SVG in the UI
In the Hierarchy panel, click the + button. From the menu that appears, select UI, and then choose SVG Image to add it.
With the new SVG Image selected, open the Inspector and click ‘Add Component’ to add a Canvas Renderer.
Adding this was necessary in my environment; otherwise, it would cause an error and wouldn’t run.
How to load and specify SVG images
You can import an SVG by saving it to any folder within the Assets directory, or by simply dropping it into the Assets folder of your Unity project.
To assign the imported SVG to the SVG Image component you’ve created, follow these steps:
- In the Project tab, click the triangle icon next to the imported SVG to reveal its Sprite.
- Drag and drop the displayed Sprite (the large red square in the diagram below) into the Source SVG image field of the SVG Image component.
Other
To show SVG images on things like buttons or panels, just add the SVG Image component.
Just a heads-up: you have to remove the existing Image Component first before you can add the SVG Image component.
comment