Why do my svg sprites (vector images) appear to have very low resolution in the game view and how can I fix this issue?

Question

I recently drew a game sprite for my game using Adobe Illustrator 2021. I exported the sprite using the Export for Screens menu to export the entire artboard. The problem I have in Unity 2021+ is that when I import the svg sprite and add it to the scene view, the sprite appears to have incredibly low resolution in the game view. I have already installed vector graphics to Unity (com.unity.vectorgraphics) and researched about the issue I'm having to no avail. The sprite is 396 x 278 pixels in adobe illustrator before exporting. Here are a few screenshots of my svg sprite in Unity:

As you can see in the 4th image, even though vector sprites should have scaling resolution when zoomed, the resolution is extremely poor when zoomed in the game view. I have already tried the following methods to fix my issue:

1. Increasing Pixels Per Unit: Turned out that this actually decreased my resolution even more. As pixels per unit increased, the sprite in the game view became smaller and smaller until it became a singular pixel
2. Increasing Gradient Resolution: Did not do much for resolution quality after the value of 100.
3. Changing Tesselation Settings to advanced and minimizing Step Distance as well as maximizing Sampling Steps: Similar increasing Gradient Resolution, there was a limit to how much it improved sprite resolution quality.

Those of you who have experience importing and using vector images in Unity 2021+, please help me fix this issue. This is stalling my other development progress as well, since one of the shaders I have to implement relies on high-quality sprites.

*Added main camera settings

Answer 1

As mentioned in the comments, you're using the wrong method to check how the SVGs scale.

The zoom slider in the game window does not re-render your scene at a higher resolution.

It takes your existing render at a fixed resolution and draws each pixel larger.

So no content, not SVGs, not SDFs or other mathematically computed effects, nothing will get more detailed or smoother as you zoom in, and that's the deliberate behaviour of this zoom feature.

The reason for this is so that you can more easily examine things like aliasing artifacts without having to peer uncomfortably close at your screen, or take screenshots to enlarge in another program, or use an extra magnifier app hovering over the Unity window. It integrates this "let me see those exact pixels, but bigger" workflow into the editor interface itself.

To see how your game would look at a different resolution, keep the zoom slider at 1x and change the resolution drop-down box in the top left corner of the game view. This changes the size of the virtual screen the game is being rendered into, prior to any pixel zooming. So SVGs, SDFs, and other shader effects will be rendered smoother as you increase the resolution here. This rendering will faithfully match what you would actually see on a device that has more (or fewer) screen pixels to draw on.

Answer 2

Internally, all graphics are rasterized before they are sent to the video card.

My takeaway from this insight is to save your image in the largest dimension to a PNG.

Memory is cheap, scaling is a standard operation in the GPU and not so bad on the CPU, whereas runtime rasterization is an expensive CPU operation.

If memory or GPU transfer time is the bottle neck, use mip-maps instead.

Efficient real-time vector graphics last happened on a control board in a CRT for several Arcade games in the 1980's. It is a great idea, but has no modern hardware support.

Just because a feature is there does not mean it should be used.

Answer 3

My fix is to import your vector art as PNGS and increase the max size to something high like 8192 in the sprite inspector. Here's what to change:

I had the same problem with my sprites. I designed them as vector images and imported them as PNGs in the way I described above. Hope this helps.