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.

enter image description here

  • \$\begingroup\$ So your question is: How to make an SVG Image react to clicks on a canvas? \$\endgroup\$
    – Zibelas
    Commented Sep 25, 2021 at 7:44

1 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".

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .