Documentation | SVG Importer | Vector Graphics Plugin for Unity3D

Introduction

Getting Started

SVG Importer Manual

Thank you for purchasing SVG Importer! You are a great supporter.
I developed this plugin because of the lack of easy to use robust
vector graphics solution.

SVG Importer has undergone many changes. From early hard to use utility, to full finished product.
There are still some struggles to make SVG Importer blend with Unity as possible,
but I personally think that it is fairly easy and fast to use.

Enjoy vector graphics in all its glory. If you have developed any game with SVG Importer don’t
hesitate to send me your screenshots and we will create a nice gallery of vector powered games.

Again, I humbly thank you, for any help directly contact me.

Jaroslav Stehlik
jaroslav.stehlik@svgimporter.com
Czech Republic, Prague

SVG Document

Document Compatibility

Compatible with

• Adobe Illustrator
• Adobe Flash
• Corel Draw
• Affinity Designer
• Inkscape

supported features

• Simple & complex shapes
• Strokes and fills with transparency
• Linear Gradients
• Radial Gradients
• Conical Gradients
• Holes
• Clip Paths "absolute"
• Symbols

unsupported features

• Masks “SVG mask will no be supported due to hardware limitations”
• Text “most graphics editors can convert text to curves”
• Filter Effects - blur, drop shadow, glow, bevel
• SVG Animation
• Embeded Images

Document Setup

RGB Colour Mode

Always create your document in RGB colour
space - CMYK will simply look wrong in your game.

Use RGB Colours

Also, some programs can work with CMYK
colours even if they are in RGB mode. Keep in
mind that any CMYK representation will simply
look wrong in your game.

Keep your scale consistent
100 pixels are 1 meter in Unity

When creating vector graphics, it is important
to keep your scale consistent.
It is best practice to create 100px x 100px grid which
will represent the unity 1m x 1m grid.

Document Export

Recommendation

• Export your file as SVG 1.1
• Convert all your text to outlines
• Use 1 decimal place if possible

Adobe Illustrator

Adobe Illustrator has a bug in all versions
Never ever open an SVG file directly in Adobe Illustrator,
because it will import incorrectly with errors.
And then never save it to SVG file because
your scales and strokes would be messed up.

Always keep your original source files as
*.AI, *. afdesign, *.cdr, in your place and export
SVG files from your source files.

Document Organization

Keep source files outside Unity

Keep your source files and SVG files outside Unity project.
It will help your workflow greatly.

Copy and paste your SVG files in Unity Asset folder to import them.
Importing SVG Files is destructive operation.

The reason for that is, that Unity does not currently support custom file extensions.
So the most intuitive way to import files is to drag them into Unity Asset folder and
SVG Importer will automatically create an SVG Asset from them.

However, it is possible to recover the SVG file from the SVG asset by clicking “Recover SVG File"

How to update SVG file

To update your SVG Files with a new one simply overwrite the file or drag and drop in the same
directory with the same filename. This will update the original SVG File which will automatically
propagate in all your scenes without any hassle.

Graphics

SVG Asset

SVG Asset is your SVG File

When you drag and drop your SVG File into Unity Asset folder it will automatically create an SVG Asset. This is fully imported SVG File with all gradients, shapes etc.

Format	Every graphics card has two different rendering modes.
Opaque	This mode best fits for non-transparent objects which utilise the Z-Buffer which will discard non-visible pixels as soon as possible. This greatly improves the performance, because you render only what you see. The only downside is that you have to handle your z position manually to avoid z-fighting glitches and artefacts.
Transparent	This mode is best when used on transparent or semi- transparent objects. It does not use Z-buffer and it can suffer from great performance loss. But it can be fully alpha blended, great for fade in/out effects. This mode behaves exactly the same as Unity Sprites.
UGUI	This mode is purely for the new Unity UI. Instead of triangles, Unity UI uses Quads. Because of this fact we have to emulate quads from triangles which suffer from wasted space about 1/4 of the original size. Also, it can be fully transparent and supports Unity Masks.
Gradients	Option for optimising shader and mesh complexity
Always	This option will always use material which supports gradients and will always use uv and uv2 mesh attributes.
Auto	This option will automatically decide which material to use and when to use uv and uv2 mesh attributes
Never	This option will always use the simplest material possible and will never use uv or uv2 mesh attributes. It will replace gradients with default color.
Antialiasing	Option for geometry antialiasing rendering
Width	The width of the geometry antialiasing in Unity units
Mesh Compression	Increasing this value will reduce the file size, but might introduce irregularities and artefacts. On gradients can create completely false results.
Scale	This will not change the quality of the mesh, it will only scale it down.
Quality	This is the quality value of the Mesh defined in vertex per meter units. The higher the value is the better the quality.
Depth Offset	This option is available only if Format is set to Opaque. Small values can introduce an z-fight artefact due to low z-buffer precision, increase this number if you see any problematic z-buffer issues.
Compress Depth	This option is available only if Format is set to Opaque. It will greatly reduce the z depth spread of the graphics, which could be much easier to work with.
Custom Pivot	Turn this on when you need more precise settings of your pivot point.
Pivot	The pivot point of the graphic represents how the graphic should align.
Generate Collider	This option will automatically add polygon colliders in any new files added to the scene. It will generate outline of the graphics so your polygon collider is able to reproduce the physical shape of the geometry. For adding colliders to existing SVG renderers add SVG Collider to them.
Keep SVG File	This will include the original SVG text document in the final build. Turn off, for smaller file size.
Normals	This will generate normals for lighting effects.
Tangents	This will generate tangents for advanced lighting effects.
Recover SVG File	You can recover your original SVG file to your desired destination.
Save Mesh File	This will save the mesh generated by SVG importer so it can be used in any other way than for SVG graphics. For instance as a particle system emitter or particle it self.
Report Import	If your SVG file was wrongly imported and you feel that the file should be correct, please send it to me simply with this button so I can evaluate it for further examination.

SVG Editor

Opening the SVG Editor

A button to open the SVG Editor appears in the SVG Asset import inspector.
Along with the composite image, you will see a number of controls in the bar at the top of the window. The slider at the top right controls the zoom, while the color bar button to its left chooses whether you view the image itself or its alpha levels. Moving the slider to the left reduces the zoom of the graphic. Finally, the Apply and Revert buttons allow you to keep or discard any changes you have made.

Using the Editor

The controls in the panel let you choose a name for the SVG Asset. Border width, for left, top, right and bottom can be specified in percents. There are also settings for the SVG’s pivot, which Unity uses as the coordinate origin and main “anchor point” of the graphic. You can choose from a number of default rectangle-relative positions (eg, Center, Top Right, etc) or use custom coordinates.

SVG Renderer

Game Object/2D Object/SVG Renderer

The SVG Renderer component lets you display vector images for use in both 2D and 3D scenes.

Vector Graphics	Put your SVG asset right in there to change the image. When set to none it will render nothing.
Color	Recolour your artwork simply. You can also use it in animation.
Material	You can override the standard material with your custom one.
Transparent Material	Override material only for transparent parts of graphics.
Opaque Material	Override material only for opaque parts of graphics.
Sorting Layer	The layer used to define this graphic's overlay priority during rendering. Works only on transparent objects.
Sorting Order	The overlay priority of this graphics within its layer. Lower numbers are rendered first and subsequent numbers overlay those below. Works only on transparent objects.
Override Sorter	You can disable sorting on this specific component.
Override Children	You can disable sorting on all children which belongs to this game object.

SVG Image

Game Object/UI/SVG Image

The SVG Image control displays a non-interactive image to the user. This can be used for decoration, icons, etc, and the image can also be changed from a script to reflect changes in other controls. The control is similar to the Image control but offers resolution independent vector graphics instead of sprites. However, the SVG Image control requires its source to be an SVG Asset, while the Image can accept only sprites.

Vector Graphics	The format of your SVG Asset has to be UGUI. Put your SVG asset right in there to change the image. When set to none it will render nothing.
Color	Recolour your artwork simply. You can also use it in animation.
Material	Override your material with a custom one.
Image type	Simple - scales the image as usual Sliced - uses the 9 slicing. Slicing border has to be set in the asset it self under SVG Editor section. 9 slicing is used mostly for preserving nice looking round corners.

Physics

SVG Collider 2D

Component/Physics 2D/SVG Collider 2D

The SVG Collider 2D creates Polygon Collider 2D and sets the appropriate collision shape to it.
Your SVG Asset must have enabled Generate Collision in order to work properly.

Quality	Value ranges from zero to one. Zero is almost nothing and one is the original shape of the SVG Graphics. It is recommended to use value about 0.9 to reduce duplicate points or points which are very close to each other.
Offset	This value adds or subtracts the offset of the Polygon Collider 2D. This is usefull for special cases where the graphics does not copy the actual collision shape.
Warnings	Polygon collider also tends to give some warnings that the collider has discarded some shapes because it failed the Physics validation. This is due to Physics 2D “Box2D" minimum world space unity limitation. If any shape is smaller than that unit it gets discarded. So please be aware that, this is an Physics2D limitation.

Animation

SVG Frame Animator

Miscellaneous/SVG Frame Animator

The SVG Frame Animator component is there for animating the source SVG Asset of SVG Renderer and SVG Image. You can simply drag and drop multiple SVG Assets in the SVG Frame Animator window for adding individual keyframes and then simply reorganize them with drag and drop list.

When you have at least two frames for animation an animation slider will appear.
This slider is possible to animate directly in Unity Animation Window.

Settings

SVG Settings

Window/SVG Importer/Settings

SVG Importer has its default settings

You can simply override them as you wish.
The next time you will import any file, it will use these settings. So SVG Importer can fit your workflow much better.

Format	Every graphics card has two different rendering modes.
Opaque	This mode best fits for non-transparent objects which utilise the Z-Buffer which will discard non-visible pixels as soon as possible. This greatly improves the performance, because you render only what you see. The only downside is that you have to handle your z position manually to avoid z-fighting glitches and artefacts.
Transparent	This mode is best when used on transparent or semi- transparent objects. It does not use Z-buffer and it can suffer from great performance loss. But it can be fully alpha blended, great for fade in/out effects. This mode behaves exactly the same as Unity Sprites.
UGUI	This mode is purely for the new Unity UI. Instead of triangles, Unity UI uses Quads. Because of this fact we have to emulate quads from triangles which suffer from wasted space about 1/4 of the original size. Also, it can be fully transparent and supports Unity Masks.
Gradients	Option for optimising shader and mesh complexity
Always	This option will always use material which supports gradients and will always use uv and uv2 mesh attributes.
Auto	This option will automatically decide which material to use and when to use uv and uv2 mesh attributes
Never	This option will always use the simplest material possible and will never use uv or uv2 mesh attributes. It will replace gradients with default color.
Mesh Compression	Increasing this value will reduce the file size, but might introduce irregularities.
Scale	This will not change the quality of the mesh, it will only scale it down.
Quality	This is the quality value of the Mesh. The higher the value is the better the quality.
Depth Offset	This option is available only if Format is set to Opaque. Small values can introduce an z-fight artefact due to low z-buffer precision, increase this number if you see any problematic z-buffer issues.
Compress Depth	This option is available only if Format is set to Opaque. It will greatly reduce the z depth spread of the graphics, which could be much easier to work with.
Custom Pivot	Turn this on when you need more precise settings of your pivot point.
Pivot	The pivot point of the graphic represents how the graphic should align.
Generate Collider	This option will automatically add polygon colliders in any new files added to the scene. It will generate outline of the graphics so your polygon collider is able to reproduce the physical shape of the geometry. For adding colliders to existing SVG renderers add SVG Collider to them.
Keep SVG File	This will include the original SVG text document in the final build. Turn off, for smaller file size.
Normals	This will generate normals for lighting effects.
Tangents	This will generate tangents for advanced lighting effects.
Asset Post-processor	If you want to stop automatic SVG Import you can deactivate it here.
Support Service	This service runs in Unity background and ensures that you can Drag and Drop your SVG Asset directly in your scene.