Table of Contents

Getting Started

  1. Ensure you have imported this asset into your Unity project;
  2. Place some SVG files in your project;
    • If you have other SVG importers, ensure this asset's is selected for the assets in question;
    • If the asset preview looks incorrect, see the Importing Assets section.
  3. Choose your use-case below:

I want to draw my SVG file in the UI

  1. Create a Material using the Keen Vectors > MSDF Sprite shader;
  2. Ensure your Canvas is set to Screen Space - Camera or World Space;
  3. Create an Image game object on your UI;
  4. Assign your newly-created Material to the Image;
  5. Assign your SVG file to the Image's sprite property;
  6. Add a ImageDistanceField component to the game object.

I want to draw my SVG as a Sprite in the world

  1. Create a Material using the Keen Vectors > MSDF Sprite shader;
  2. Create a Sprite Renderer game object on your UI;
  3. Assign your newly-created Material to the Sprite Renderer;
  4. Assign your SVG file to the Sprite Renderer's sprite property;
  5. Add a SpriteDistanceField component to the game object.

I want to apply my SVG as a decal to the world

Out-of-the-box, this is only supported in the Universal Render Pipeline. If you are using another render pipeline such as a custom one or the High Definition Render Pipeline, you will have to create your own shader to that pipeline's specifications.

With that said:

  1. Create a Material using the Keen Vectors > MSDF Decal shader;
  2. Assign your distance field texture in the Surface Inputs > Distance Field property;
    • The Pixel Range should be automatically detected, if the texture was generated by this asset. Otherwise you will need to inform it manually.
  3. Create a Decal Projector game object;
  4. Assign the newly-created Material to the projector.

I want to do something not covered in these options

In this case, I encourage you to check out the rest of the manual, in particular the Importing Assets and Guide: Custom Shaders sections, as well as take a peek under the hood in the provided shaders for inspiration.