Vectorizer - a mesh-based vector graphics library and SVG renderer

Vectorizer is a mesh-based vector graphics library. It also allows you to render SVG graphics in path-syntax format. It generates 2D figures that have actual vertices, indices, and texture coordinates. As such, you can treat them as any other object.

⬢ Check out Vectorizer on the Asset Store ⬢
Website | Documentation | Changelog | Feedback | Twitter
​

I have developed this library to help me in one of my own projects. Seeing that there is an interest in new methods to generate 2D figures in Unity, I have polished it and released it on the Asset Store. As introduced, the figures that Vectorizer generates are essentially meshes. This means you can do with them whatever you want, and they do not require any special treatment. You can use URP, HDRP, event the standard pipeline. Of course, being meshes this has both advantages and disadvantages.

I hope Vectorizer can be useful for your project! If you would like more types of figures to be included, let me know.

​

Features

• Vectorizer is able to convert SVG path-syntax data (the sequence of commands in the "d" attribute of an SVG path) into the corresponding figure. Here's an highlight of some SVG code (taken from the Bootstrap Icon Library) rendered with Vectorizer.
  
  
• Each figure allows you to define a material for both the "fill" part and the "stroke" part. The thickness of the stroke is configurable. The included materials are based on URP.
• It provides ready-made Unity components to generate 2D figures such as Rectangles, Rounded Rectangles, Regular Polygons, Ellipses, Rings, Arcs, Stars, and Polylines. Via SVG instructions, you can draw any other non-regular concave or convex polygon. The interior area will be triangulated.
  
  
• Sample scenes include an overview of the available figures, plus individual scenes showcasing their variations. An example of how to lay out a hex-grid using Vectorizer is also included.
  
  
• Every Vectorizer Figure is generated via a combination of various instructions. Such as Draw/Fill Ellipse, Draw/Fill Regular Polygon, etc. You can create your own templates by extending the base VectorizerFigure.

Limitations

• At the moment, Vectorizer does not support line dash-stroke or configurable end-caps.
• No SVG fill-rule support. A workaround consists in splitting those figures into multiple ones.
• UI support can be achieved via camera stacking. If there is interest, I can include a sample using UIElements.

 

Just added n-gons with rounded corners to Vectorizer!

 

Instead of rendering the vector mesh in a mesh filter, is there any way to render into a texture2d, sprite or UI image ?

 

Not out of the box, sorry. I suppose you could do that with a render target setup with an ortho camera looking at the generated mesh. But finding some way of making the results usable within the UI Toolkit framework is on my to-do list, if it is not too convoluted.

 

Thanks for your reply. hope you will find a way to make it work with Unity UI..I will continue with my project using your suggestion which is to use an orthographic camera to a render texture on it's own layer and convert the render texture
to sprite image.

 

I have an old project (iPad1 native app, written in raw GL/shaders) I'd like to convert to Unity, but it requires a first-class SVG-to-mesh library. I'm wondering if this would handle it?

What happens if you load the wikipedia global country map: https://commons.wikimedia.org/wiki/File:BlankMap-World-Equirectangular.svg ?

It's a multi-megabyte SVG file, which crashes SVG vectorizers if they're too basic.

Does your asset implement SVG simplification? I can write that myself if the SVG implementation is complete enough, but I'd prefer not to .

 

The asset does not (yet?) load SVG files, but it offers a GameObject class that can convert svg syntax on the fly. As shown in the video, it works by simply pasting the relevant path data syntax in the text area. This feature is thought for importing simple icon-like SVG data.

The SVG file on wikipedia is a collection of different paths and groups thereof. So you would need a way to parse the svg file and split every (group of) path into its own gameobject. I tried to do a few tests, by manually copying the SVG defining the shape of some countries into different path-gameobjects.

Here's Italy and the US




Italy looks fine, the US looks a bit messed up. The fill does not work, the triangulation is wrong. I am afraid this might be asking a bit too much from what is a simple SVG parser. The parser does support all primitives and works fine with icon-like graphics as shown in the pictures. But in this case the path data should be simplified a bit. Perhaps by running it first through Illustrator or similar tools, you could apply some simplification or decimation modifier. I'm sure that with a simpler shape with fewer points it would work better.

Thanks for the interest!

 

Thanks, OK, so this isn't actually an SVG parser yet, it's a "partial SVG" parser .

It is EXTREMELY common for icons today to include gradients, masked-fills, etc, so ... this won't work for most icons either .

 

The limitations are described in the post and in the asset page. My use case was to use SVG to describe the overall shape for icon-like graphics, then use Unity's materials to "colour" it. I'm always happy to incorporate new features and I will consider adding new SVG language features in the future.

 

i am currently using unity vector, can I ask what make it better then it? i am new and i have problem with one of my vectors look like raster image, so i want to try anything

 

As far as I know, Unity vector (it has been some times since I used it) turns an SVG into a 2D sprite. My asset uses the SVG code to create an actual 3D Polygon made of vertices. You can then use it as any 3D model with any render pipeline (URP, HDRP, etc.)

Take into account that with it might have issues with very complex svg drawings. It works best with icon-like SVG, such as those shown in the accompanying video.

Thanks for your interest!

 

Currently 33% off for the 2022 Black Friday!

 

Update to version 1.5.0. It now includes dashed polylines.