SVG Importer | Vector Graphics | Unity UI Supported [OPEN SOURCE]

@ortin, which item on the 5.2 http://unity3d.com/unity/roadmap is that referring to? I see the mask reference.

 

Hi, I am not in the beta program.
Where I can find any info about the Unity 5.2 new features and is also any documentation available ?

 

Beta is open for all Pro users http://unity3d.com/unity/beta/

And I'm talking about:

Using Mesh instead of UIVertex'es makes all custom UI components broken in 5.2
Edit: seems with latest releases Unity added backward compatibility...

 

Not sure if there is some specific info about these features...
I assume how to use 2D mask can be found out from Standard UI shader sources for 5.2 (can be downloaded from beta page) and using Mesh instead of UIVertex'es is sort of straightforward though I've seen few topics on 5.2 forum http://forum.unity3d.com/forums/5-2-beta-forum.89/

Why I asked the question: I'm going to upgrade to 5.2 as soon as it's released as it promises big UI performance boost so I'm considering when I can fully start working to integrate your plugin.

 

@ortin, I must be tired as I don't see that level of detail on the roadmap page. I expect you got that from the release notes? Thanks for the clarification.

 

I think this should be easy to implement if the API would not be a mess

 

LOD Groups right now are not the main topic. I would expect that I will throw them in the request pool after I finish
clip paths and 9slice.

 

@ibyte yes, it's from release notes here http://unity3d.com/unity/beta/

 

Thanks ortin fot he info. I am really excited about the updates

 

OK, seems I backward-compatibility isn't that backward.
Plugin in 5.2

 

In your manual you say that UI mode uses about 25% more vertices but in reality it uses like 400+% more. For example tiger.asset from examples (14k vertices) even doesn't fit into canvas. Is it a bug or I misunderstood something?

 

OMG... Unity what have you done to me

 

Hi,

I see, the vertex count in the asset is different than in the SVG image.
You are right, it is much more wasteful. The reason for that is that unity UI
right now uses a quad structure for geometry. Which has one big flaw.
You cannot share simply vertices and also it is hard convert triangles
into quads, and sometimes it is impossible. So it is very wasteful.
That is the reason why in Unity 5.2 this should be resolved with
custom meshes

 

Jaroslav,

When you guys worked on your mobile game which used meshes for everything (generated from SVG Importer), did you find yourselves running into problems with too many vertices?

I guess what I'm wondering is that I'm looking at primarily using SVGs for my artwork but am concerned about running up high vertex counts. I will be using relatively few textures and mostly meshes. What would the vertex limit be for a game running on new-ish mobile devices (let's say iPhone 5 or higher) in your opinion? 1

I've heard estimates of keeping your draw calls under 50 and your textures under a certain size and your vertex count under 100k, but in a game with almost no textures and only meshes with colored vertices (aka SVG generated meshes) I wonder if this is different.

I know, I should profile and find out - every device is different, etc. But I'm curious what your experience was?

Thanks

 

Hi, great question.

Our game Mimpi dreams has approximately around 30 thousand vertices on screen
and ranges from 20 to 30 draw calls with the UI.

This leads us that the game runs smooth around 60fps on iPad2 without antialiasing
and iPad3 and higher with 4x antialiasing.
On mobile, it runs smooth on iPhone4s and higher.
So your target vertex count should be targeted on your device specification.
I find that around 30 thousand it is ok on most low-end devices.
But on high-end devices it should be ok to push up to 100 thousand vertices.

My personal experience is that the vertex count in most cases
is not so important as the fillrate.

To decrease the fillrate on mobile, you should use opaque rendering format.
The opaque rendering mode utilises the z-buffer wich reduces greatly the fillrate.
But it is much harder to handle the sorting manually because the assets must have
different z value and cannot be sorted automatically as the transparent rendering mode.

Also, if you have transparent areas in your assets even if they are set to opaque rendering
the transparent parts will remain transparent which will still increase fill rate.

So you should also take transparency in account when targeting mobile.
And that is not an SVG Importer issue but mobile GPU issue in general.

I hope that it helped a little.

 

Thanks, that is helpful.

I also found this video which shows some of the device limits and was very useful:

Another question: can static batching be used with your asset?

I'm making a 2D sidescroller type game, and have two use cases for using SVGs:

1. Background graphics, such as trees, rocks, mountains. These I hope could be statically batched, and may contain more than the minimum number of vertices allowed for dynamic batching. You're allowed 900 vertex attributes per object for dynamic batching, and my understanding is that you're using color, position, uv0 and uv1 which would allow me roughly 225 vertices per object for dynamic batching.

2. Character parts. I intend to build a character's appearance out of many little pieces of art, such as chest armor out of multiple small pieces, leg armor out of pieces, etc. attached to a hierarchy for animation. I hope to be able to use dynamic batching for these, but I'm not sure how many vertices I can get away with while still keeping the art style we need.

Thanks for your help,
Clay

 

Yes,
1) we use static batching for backgrounds and parallaxes and it saves us many draw calls.
2) we also use characters, sliding boxes, opening doors and so on for dynamic stuff and
the dynamic batching handles that quite well.

So It is possible to combine them quite well.
with the character, it highly depends on how many pieces you use and how detailed they are.
It is possible that for very detailed characters which do not take too much screen and
are not subject for scaling that they can be in some cases more efficient with sprites.
But if you need them to show with great resolution then the vector graphics is a better solution.

I don't say use only vector graphics for everything.
But instead combine them wisely based on your needs.

I am glad to help you.
If you would like to leave an honest review on the asset store
that could help me

 

Actually svgs on the characters is one of the main reasons I wanted to switch to the svg importer.

See I've been trying to figure out the best way to do many variations of clothing/armor on an rpg game with up to 20 characters on the screen at once while still working on mobile devices. Each character would have different equipment with different colors.

Imagine different styles of armor, etc.

I've been wracking my brain on how best to handle this and have considered a few options:

1. Each character has its own texture, and either use render targets or something like procedural materials (substance) to build these textures. 1 Draw call per character. I'm worried about texture memory and the time it'd take to load pieces and render them to a render target on mobile.

2. Use a single large atlas texture with armor parts and build up a charaxter's appearance by mixing and matching sprites and use the sprite color property to give variations. Single draw call if batched, but I'm worried about not being able to fit all my armor combinations in a single texture. The main feature of this rpg is going to be character progression and lots of types of customization, weapons and armor.

3. Use meshes instead of textures (svg generated). This allows me to mix and match many different combinations of pieces and still batch.

The backgrounds I may end up using sprites though there are also benefits to using svgs there as well.

Thanks for the reply, I'm going to work on some sample svgs for equipment parts and some background elements like trees, etc.

 

Yeap that seems reasonable!

Give it a try. And if you go into any trouble just contact me.

 

Does it mean that 'SVG Image' will have 'Image Type' (Simple/Sliced) like UI's 'Image'?

 

Exactly

 

Hey Jaroslav,

Our game art is comprised from Illustrator artwork that are pretty heavy on the layer count. The layers allow us to do some pretty cool animations once imported as sprites into Unity.

However, it can get pretty painful having to start from illustrator, import into Photoshop, export each layer as its own texture, import into Unity, give each layer a more user friendly name, change pivot points for each, and so on. Painful process.

I saw on your animation feature real, it looked like in the project view you had each layer as a different SVG file. I was wondering does your importer support, or plan to support, dragging in a single SVG file, and then separate each layer into it's own Unity SVG Image on import?

Not even sure that's possible, but I guess its the one major thing that's putting our team on the fence if we should switch to SVGs instead of textures. All the other features in your product would help us a ton, its just that we are fairly far into development so if we have to import all our images using the same workflow process stated before, then we just might have to hold off until our next project.

Keep up the good work!

 

Hi,

Every SVG file is treated as a separate image.
There is not actually any function for exporting different layers.

However, our team does this on a regular basis. They break down the original file
into separate SVG files manually and it does not take so much time even on large project.
You should be aware that this approach has a great benefit. If you set up
your workflow like so, it becomes extremely easy to switch different graphics.
So if you later decide to switch some graphics you just drag and drop
new file in the same folder as the original and it gets automatically updated if it has the same filename.
If there would be any file splitter it would be very hard to decide which file should
be overwritten and which should not. Which could lead in broken references
which can be very bad for the user. The problem with SVG is that it does
not have any concept of layers as Illustrator have. It uses only groups.
In the future, there could be some list in which you could show or hide
some specific layers, but it was not requested too much so it is not considered
as must have feature.

 

I am proud to announce that I just completed the first phase for working Clip Paths.

The first phase means that it should work in Adobe Illustrator and maybe other
Vector Graphics programs, but they are still in an experimental phase, which means
if you download any SVG which was not made in this program, it is not guaranteed
that it would work. But I would of course work hard on make it compatible with more
software.

 

Hi,

I'm trying to import SVG's from Sketch, and I'm running into a problem with duplicate id's.

In Sketch's exported SVG, every element gets an id tag, which are often duplicates ("shape" or "rect"). SVG Importer will overwrite existing elements, rather than just allowing duplicates.

Is not allowing duplicate names part of the SVG 1.1 spec, or just a result of how the importer was coded?

Thanks,
Mark

 

Hi,

I personally think that you should avoid duplicates, but web browser works somehow in linear workflow
so it works. But SVG Importer works in separate passes, that is the reason why it differs.
Try to open the file in different program and save it in here.
Also, could you please send me some example on my Email so I can resolve this problem faster?
I am sure it would require to redesign a large amount of the importer which would take some time.

Thank you.

 

Do you support Unity 4? The asset store is forcing me to upgrade to Unity 5 but your post says "Unity 4.6.0 and 5+ Compatible, fully cross-platform."

 

Hi, yes the plugin works in Unity 4.6
The reason why it was uploaded with Unity 5.0 was because Unity wants only 5.0+ versions for promotion.
And I want to be promoted on the Asset Store... So that is the only reason why I decided to upload it with never version.
Also, users who had newer Unity cannot download it because Unity restricts them that Unity 4.6 assets are too old...
If you send me your invoice number, I can send you the latest package.

 

Thanks for the quick reply. Pretty lame of Unity honestly. FYI, I also have put assets on the store so I understand the process. Will purchase tonight. Thanks again!


EDIT: Bought it using Unity Website because Unity 4.6 disabled the buy button. Tried importing it and Unity says the package is an unknown format. Will send you a PM Invoice number. :/

 

Hi everyone,

If you want to get the latest version with symbol and clip path support to give it a try
contact me via email and send me your invoice number and I will send it to you ASAP.
Especially those who use flash for export I recommend to try this version.
Thanks for your attention.

 

You simply upload with both 4.6 and 5.0, problem solved. But even if you did use 4.6, what happens is that users get a warning that it wasn't uploaded with Unity 5, it doesn't mean it can't be downloaded.

--Eric

 

Thank you, will try it!

 

Sweet looking 9-slice coming next week!

 

@Graham Dunnett Hi, the poll on this thread is now obsolete.
Could I kindly ask you for the poll to be deleted?
I cannot find any button for that in the poll manager.
Thank you!

 

Just wanted to give a big thanks to Jaroslav for helping me with a problem importing some SVGs into Unity. Turns out the problem was at my end as I was using film grain on some objects which Illustrator treats as images.

 

What poll? ;-)

 

THX

 

Hi Jaroslav....
awesome product by the way - so, thanks...
one of the things we are using it for is a load of little snow flakes - there are a couple hundred on screen at any one time... at the moment i can't get the batching to work... they are all plain white and the renderer component on each SVGRenderer object has the same material... but still the dynamic batching doesn't seem to work... there are about 200 draw calls... if i turn off the flakes it drops down to 7... so i'm wondering if there's something obvious i'm missing... ?

the snowflakes are all instantiated at runtime... i notice their meshes are all individual instances..

thanks...

 

Hi,

the reason for that is that Dynamic Batching can batch only certain amount of meshes.
http://docs.unity3d.com/Manual/DrawCallBatching.html
Dynamic batching can batch only 900 vertex attributes into one draw call.
If SVG Asset has about 100 vertices in fact it uses Vertex position, Color, UV, UV1
which are 4 attributes. 100 * 4 = 400 vertex attributes.

If you would have thousand stars, each has 100 vertices. You will have 400 000 vertex attributes
which is 444 draw calls. Which seems that it is your case.

You can optimise this simply with static batching, which will result only in one drawcall.
For stars which can be done as particles, you can actually export the star as an mesh
and then use that mesh as a particle in shuriken particle system. This will result also in have
only one draw call and you could animate it.

I hope that I helped you a little. Also please don't forget to leave an honest review on the asset store.
Thank you!

 

Version 1.0.6 is now live!
9-slicing, Symbols, Clip paths "experimental".

Enjoy!

 

9-slicing doesn't work if you don't set all 4 borders.

 

Also Sliced image inherits 'Preserve aspect' from Simple.

 

And it doesn't seem to work in a correct way:

 

HI Ortin thanks for the repro.
I will take a look at it.

 

Hi, so I think that I have fixed the first two bugs so I can send you the fix.
the last bug is a little bit trickier and I hope I will fix it during the weekend.

 

Hi,

The latest version has a serious bug. The recolor feature does not work.
If you experience this, please contact me on support@svgimporter.com
and I will send you the fixed version.

I am sorry for this bug, I will reupload the version and hope that Unity will approve it quickly.

 

I just submitted hot-fix.
Now it is upon Unity.

 

This asset is broken in Unity 5.2.0f3, please fix. For how expensive this is, you should give some consideration to forward compatibility testing before a major release.

Code (csharp):

1. Assets/SVG Importer/Plugins/Core/SVGImage.cs(234,44): error CS0619: `UnityEngine.UI.Graphic.OnFillVBO(System.Collections.Generic.List<UnityEngine.UIVertex>)' is obsolete: `Use OnPopulateMesh instead.'
2. Assets/SVG Importer/Plugins/Core/SVGImage.cs(395,34): error CS0619: `UnityEngine.UI.MaskableGraphic.m_IncludeForMasking' is obsolete: `Not used anymore.'
3. Assets/SVG Importer/Plugins/Core/SVGImage.cs(430,50): error CS0619: `UnityEngine.UI.MaskableGraphic.m_IncludeForMasking' is obsolete: `Not used anymore.'

 

I get same error with Unity 5.2.

 

Hi, For sure this will be fixed this week.

But, if you think that when Unity is not supporting any backward compatibility
and in the end I am the one who to blame, then I am deeply sorry for Unity.