Keen Vectors - Import & render exact vector shapes (Beta)

Keen Vectors imports SVG shapes and renders them efficiently at runtime. Available now on the Asset Store!

Manual | API Reference | Issue Tracker, Roadmap and Support

Tell me more!

Vector graphics are great: they are future proof since they scale to larger resolutions, and customizable since they represent artistic intent better than a grid of pixels. What they are not, however, is trivial to render at runtime.

Sometimes you settle to authoring in vectors, and importing them as bitmaps in the engine. That is cool, and tools for doing that already exist, but supporting more resolutions means shipping larger bitmaps, and requires shipping updates if you want to support even larger display densities.

What if instead, you could have something that is almost as cheap to render as a bitmap, while still benefiting from runtime coloring and scalability?

Keen Vectors will import your SVG files into a representation that is cheap to render, while retaining many benefits of vector graphics:

  • Apply effects like outlines and drop shadows at runtime;
  • Texture size scales with shape complexity, not output resolution;
  • Confidently scale your art up and down retaining accurate contours, including sharp corners.

As well as integrating very well with Unity itself. Since it still produces textures, you can use vectors anywhere a Sprite is expected, as long as you use a material with a compatible shader!

There is comprehensive tech art documentation in the manual, so feel free to mosey around if you want the details!

SVGs are pretty complicated, how does it size up?

At this point in time, only shape contours are imported. This means that features like gradients, fill colors, stroke styles, images, and filters are not supported.

To be more specific, all shapes (paths, rectangles, circles, ellipses) will be converted to paths with no stroke or fill information, then rendered as a distance field that can be rendered at runtime.

Styles and groups that affect transforms will be respected, so will symbols and uses.

In practical terms, this means that Keen Vectors is best used for flat vector art, procedural materials, or composite sprites.

Why is it in beta?

  • SVGs are pretty complicated, I’ve done my best, but I am sure there are many edge cases that need fixing still. Nothing better than people rightfully yelling at me to find and fix them!
  • This is my first time publishing in the Asset Store, so I still gotta get a grip on how this whole marketing and support thing works;
  • The current feature set works great for my personal use case, but I think there are still some things that could be worked on to make this more valuable to others, like importing basic strokes and fills.

With that in mind, I offer the asset at a discount to anyone purchasing it during the beta, to be fair to you, and hopefully to bring in some people that would be on the fence about it.

Alright, I’m in.
Keen Vectors is available now on the Asset Store, with a nice launch discount in addition to the beta pricing, grab it while it’s hot!

I had the chance to test it while it was still in development. It’s a great asset. It feels right with the game development flow where textures are often created on Illustrator or Figma. It’s also a great way to reduce build size since your icons don’t need to have a massive size to be sharp on your game.

Can i use it as a 2D sprite and as a Canvas Image? If yes, does it need any special configuration on canvas?

Yep, driver components are provided for UI Images, as well as 2D SpriteRenderers for convenience, just add the component, pick a sprite and material and you’re done.

But since the imported SVGs are just funny looking textures, you can use them anywhere that takes a texture and a material!

(A driver is needed because the material needs a special value that is dependent on displayed size to display accurately, so these components feed it to the material for you. The calculation is also provided so you can easily make your own drivers if you have custom needs. You did give me an idea for a manual page though, I think I haven’t explicitly documented how you do it)