Sprite Renderer image extends beyond Scroll view

Hi, I am using the Sprite Renderer component instead of Image to be able to use vector graphics. I’m making a soccer game and now I need to make a list of clubs viewed by a player. For this I made a prefab - club card, and I wanted to insert these cards into an object like “Scroll view”. But the problem is that because I have Sprite Renderer and not Image, all the images are just outside the Scroll view boundaries. Can you tell me if it is possible to solve this problem, or will I have to use the Image component anyway?

I have attached to the screenshots to make it clearer what the problem is. The first photo shows the problem I described. On the second photo the result. I want to get using not “Image” but “Sprite Renderer”.

Scroll View only works for UI stuff, the Sprite Renderer is not UI so it won’t work as you’re seeing.