Introduction

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

Back To Top

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

Back To Top

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.

New Document

Back To Top

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.

Back To Top

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.

Back To Top

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.
 

Back To Top

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.

Back To Top

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.

Back To Top

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.

Back To Top

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.
SVG Collider 2D

Back To Top

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.

Back To Top

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.
 

Back To Top