SVG Image in UI

Question

I'm using Vector Graphics for my SVG Images, though when I try to use it as a UI image (for a button) The image doesn't look as I expect, unless I use a Sprite Renderer. But unfortunately I can't do that because I need it to be a canvas button. In the image below: Left: SVG Image Right: Sprite Renderer.

Answer 1

Are you using a Gradient SVG?
(I'm not very familar with SVG, so I'm not sure. But it looks like you are using a Gradient SVG.)

I'm using a Gradient SVG, and the solution here solves my problem.

For a Gradient SVG Image you will need to create a "Gradient" material which has the "Unlit/GradientVector" shader assigned. You can then assign the material to the SVG Image component. You will also have to change the Canvas "Additional Shader Channel" to include "TextCoord2" otherwise the UI system will ignore that data.

It is mainly 2 steps:

1. Create a Gradient Material and assign it to Component<SVG Image>.
   (In url above, the Gradient material shader is "Unlit/GradientVector". The post is in 2018, as time past, the shader is a bit different now. I'm using Unity2020.3 today, the shader is "Unlit/VectorGradientUI".)
2. Change the Canvas "Additional Shader Channel" to include "TextCoord2".