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

Ok, I found the solution. In Inkscape:

1. "File" -> "Save As..."
2. Change "Save as type" to "Optimized SVG"
3. Hit the "Save" button
4. Select your options (default works fine) and hit "Ok"

Voila, the new file will work with SVG Importer
NB: Keep and use an original Inkscape formatted file for editing in Inkscape!

 

Amazing! Thanks!
I will put this in the docs.
You are my savior

 

Glad I could help

While this did solve my gradient problem, I don't know if it will fix any other problems that may (hopefully not) exist. From reading the Inkscape docs it didn't seem as though there were too many other oddities in there. I sincerely hope it works for others with more complicated vectors.

 

Hi, a couple questions:

1. In the Unity UI, does SVG Importer support fills like left to right, radial, etc. like the built-in Image component?
2. If using Deferred, where we can't use the antialiasing in the QualitySettings, would postprocess AA help with the jagged edges of vector graphics?

Thanks.

 

1. Right now it is not supported and for the future, I am not sure if there is any real benefit from supporting this.
I can see the benefit for usage, but not for the actual performance.

2. Postprocess AA should definitely help!

 

It seems I spoke too soon after all
The Optimized SVG method does not work when 2 or more objects share the same gradient reference.
It still does a wonderful job of reducing garbage in the file though. In the attached screenshot you can see the settings used to produce the smallest SVG file (as far as I've found).



Unfortunately, this means that a modification would still be needed to make this work with SVG Importer.

In a sense, this is a more optimized version of what Illustrator does, since the gradient is only defined once in the file. If the gradient were complex and used 100 times, the Illustrator output would be much larger as it duplicates the same gradient data for each path.

 

Hi

I have installed unity 5.2.1
and also Unity 5.3.0 beta 2
and I don't see any problems,
perhaps the patch version had some
strange regression bug in it?

 

I just bought SVG Importer... I found that I can use the Unity UI Mask component with an SVG Image as a child to get the same effect as a radial fill which works just as well as a filled sprite!

I've been testing in deferred, linear, and HDR with postprocess antialiasing, and I'm getting some interesting/strange results. Postprocess AA works with the SVG only when it is set to Opaque or Transparent. When the SVG is set to UGUI and is placed as an SVG Image in a Canvas, Postprocess AA has no effect and I'm left with lots of jaggies.

However, if I go into the quality settings and enable MSAA antialiasing (which shouldn't work in deferred or with HDR on according to the Unity docs), the UGUI SVG Image gets antialiased(!), but the Opaque/Transparent SVG doesn't. I thought you can't get MSAA in deferred rendering, so how is the UGUI SVG Image getting antialiased?!

So it would seem that the optimal solution in deferred is to use Postprocess AA for non-UI vectors, and enable MSAA for UI vectors. I don't know how that's possible, but I'll take it. From my testing, enabling MSAA in deferred has no effect on anything else in the scene, and doesn't prevent HDR from working.

Can someone else confirm this?

 

Please don't do both.
You run 2x fullscreen antialiasing post-processing per frame which will hurt your performance extremely.
I would suggest you to render your canvas in a specific camera in which the antialiasing post process effect is
and then try it if it works in your case.

UI Canvas if set to overlay works like a separate camera,
that is the reason why it does not work for your post process filter.

Also if you need more cameras than one in your game setup,
try to add your post process effect to the latest camera. The one which is rendered the least.

 

All right, for performance considerations, removed MSAA in deferred and did some more testing:

As you mentioned, if the canvas is set to Screen Space Overlay, there is no way to add Postprocess AA to SVGs because it renders even if there are no cameras in the scene, and adding AA to any camera in the scene does nothing.

If the canvas is set to Screen Space Camera, and a second camera rendered latest is used just for that (with culling set to UI), then we can get Postprocess AA on both the UI and world objects with just AA enabled on this second camera. However, with Screen Space Camera, we lose the performance benefits of Overlay mode, but we gain the ability to place objects in front of the UI if so desired.

Thanks for the tip! Looking forward to designing a resolution independent UI with vectors without the problems with bitmaps. I know you have other priorities with SVG Importer that come first, but just wanted to reiterate a request for importing SVGs from the file system at runtime hopefully some time in the future.

 

Hi,

Importing the SVG during runtime is not a problem.
I just see a problem with the actual performance.
I am very performance oriented person

 

I understand... also, I may have spoken too soon about Screen Space Camera. Enabling Post AA for antialiased SVGs means any text in the UI gets affected too, resulting in blurry text. Not sure what to do here...

Edit: Unless I stick with the original solution and its performance impact, or create two UIs, one just for Vector in Camera Space and one for text in overlay mode and try to keep them synced, which would be a logistical headache with positioning, animations, enabling/disabling, etc.

 

With forward rendering it is really easy that you can use antialiasing without problems
but with deferred rendering I don't have any experience.
The blurry text is strange, because transparent objects should not be written in z-Buffer,
so it should not be affected at all. Strange behaviour.

 

Yeah, it's getting a little complicated with deferred. Since I'm developing for Standalone, the performance impact for the first solution should be minimal according to the profiler.

Btw, I'm using Photoshop to export SVGs and it seems to import fine.

With one SVG on screen (non-UI), I'm getting 48B of allocation every frame, from Renderer.get_sharedMaterials() in SVGRenderer.OnWillRenderObject(). If I add some SVGs from the demo project, some of them add another 48B of allocation, and some don't add any. UI SVGs don't add any allocation.

 

thanks I will take a look at it!

 

Nope, Unity changed how they handle UI once again in a patch(!) release.
http://forum.unity3d.com/threads/basemesheffect-fluctuations.357799/

Edit: more related link http://forum.unity3d.com/threads/unity-5-2-ui-performance-seems-much-worse.353650/#post-2313297

 

Ah, so why it is not in the 5.3.0 beta 2 ?

 

Don't have beta 2 installed, but it is in beta 3.

 

So I tested the 5.3.0 beta 3 and the Unity GUI does not work on its own.
When I put there regular image with sprite, it is flashing like a disco ball
and sometimes it does not render at all.

 

Hi Jaroslav! I'm loving SVGImporter so far!

I'm however running into an issue. I'm switching all my SpriteRenderers to SVGRenderers and I'm now missing the IsVisible property which Im using to destroy objects when off screen.

Is there a way to replicate this with SVGImporter that I may have overlooked?

 

HI,

You can look at the MeshRenderer component which is present
on every SVGRenderer component which has the isVisible property as well.
I would probably integrate an function which will do the same thing so you don't have to
call get component MeshRenderer.isVisible

Is it understandable?

 

That worked! thanks.

 

Works fine for me. At least in the Editor.

 

I am running mac, and you?

 

Windows.
May be you can check further / report it here http://forum.unity3d.com/forums/5-3-beta-forum.94/ (5.3 Beta Forum)

 

Hi, I like the asset so far. Are you going to add API Documentation to SVG Importer. Im having a hard time adding the vector graphics part to a UI SVG Image at runtime. I would like to be able to swap out different SVG images while the application is running. Any help would be grateful.

 

"Save Mesh File" feature, peaked my interest. My Mac Swift3d app was the only one I've discovered that came close to importing vector gfx (.EPS in its case with fills, gradients, etc. intact) that can later be exported to a 3d format, however its been discontinued and doesn't support the import of SVG with fills, gradients, etc., so I'm considering another alternative like SVG Importer because other 3d apps appear to only support importing SVG paths.

In what format would saving the mesh file be in?
Is it possible to export the saved 2D mesh file intact to a 3d format (i.e. OBJ, DAE, or FBX)?

 

Sure thing,

You can swap different SVG images via
vectorGraphics property at runtime.

 

Hi,

right now the format is native Unity mesh which I think is compatible only with Unity.
It would be possible in the future to save it to FBX format,
however, there is one catch. You need custom shaders for the gradients,
So I don't know if it is possible to have custom shaders in FBX files, I don't think so.
But it would be possible to export the gradients as series of textures and map
every texture as a individual gradient.
But you are the first one with this request I must say:

http://wiki.unity3d.com/index.php?title=ExportOBJ
there is some script which exports to OBJ
it would be without the textures but at least for now, you can use the output mesh.

 

I figured out how to add at runtime and swap them out. I can adjust the scale to change the size of the svg image. How would I adjust the SVGRenderer to be exactly 1 world unit or x number of pixels in the scene?
Thanks Again.

 

Hi,

100 pixels at 72 dpi of the document is 1 unit in Unity.
if you change the default scale of the SVG asset which is 0.01 for example to 0.1
then it would 100 pixels at 72 dpi = 10 unity in Unity.

It is btw part of the documentation

 

hello Jaroslav,

will you be supporting adobe .ai format?

 

Hello,

Probably not. Adobe Illustrator can export really good SVG files so there
is actually no need for using Adobe Illustrator format directly.
Or is there any specific reason for this feature?

 

Hi I have just started using SVG Importer but am having trouble with depth issues.

I have watched all your youtube videos and read the documentation. I have solid svg files and so have set the render mode to "Opaque". This problem does not exist when using "Transparent".

Here is my example:

I have a "background.svg" which is made up of two squares filled with color. I set this sorting order to "0". I then have another "object.svg" which I set the sorting order to "5". This "object.svg" however seems to sit in a depth between the two colored squares in my background. Adjusting the Sorting Order makes no difference, my only option is to use the "z" axis on the transform.

I am not using the "SVG Sorter" because I have a mix of different game object and it throws lots of errors (becasue the is no SVGRenderer) and I would like to sort my depth order manually.

I have found that setting everything to "transparent" solves this problem. Is there a way to achieve the save results using the "Opaque" render mode or does this need you to adjust the z transform.

Thanks,

Adam

 

Hi, for the SVG Sorter I have an update so PM me your email so I can send it to you.
The Unity sorting layers and sorting order works only for transparent objects.
Opaque objects has to be sorted with zDepth. That means you have to manually translate
the objects with the z-value on the transform component. To clearly see the depth,
please switch from 2D mode to the 3D mode to see the depth.

Opaque rendering unfortunately cannot be sorted like transparent objects because they
have different depth, which is a tricky problem. The only way how to streamline this workflow is
to use the SVG Sorter or sort your objects manually.

That is the reason why the SVG Importer uses transparent rendering by default because it is much easier to manage.

 

Hi, just wondering if you've managed to minimize the GC Allocations and if any work has been done to fix the issues with 9-slicing. Thanks!

 

Hi,

yes the latest version contains bugfix for the GC allocation.
Unfortunatelly the 9slicing is still in development.

 

Hi everyone! I just got approved on the Unity tutorials website, you are more than welcome
to learn how to use SVG Importer and some tips and tricks.

http://unity3d.com/learn/tutorials/topics/asset-store/getting-started-svg-importer?playlist=17132

Cheers!

 

I just finished a huge update which should greatly improve the
compatibility with Inkscape, Corel Draw and probably even Flash.
Do you want to stress test the build?

Send me your purchase order number on email.
Cheers!

 

My previous Inkscape tests are now working with the new version
I like the optimizations and other changes as well. Nice one!

 

That is awesome news
I am glad that my work was worth it.

If you spot any problem, please report it.

 

Hi! I've been using this tool for a few weeks and loving it. However I just ran into a problem when using gradients with transparency in it.

For example I have a circle with a solid color... and directly on top of that circle I have another circle with a radial gradient. The gradient is transparent in the center then fades to black going outward.

When I import this SVG into Unity... only the top circle is shown with the gradient.. but there's no transparency there. It's just a solid gradient from white to black.

 

Could you please send the SVG file at my email?

you can find my email address there:
http://svgimporter.com/contact/

 

Not sure if this is the right topic, but I thought I would share a little web demo made with this plugin to test out the art pipeline.
https://dl.dropboxusercontent.com/u/39878607/WebDemo/WebDemo.html

 

I upgraded SVG Importer in my project from 1.0.8 to 1.0.9 but now the game will not run because I get this error:

Error CS0101 The namespace 'SVGImporter.Utils' already contains a definition for 'SVGCombineMesh' game_1.CSharp C:\000\prog\Unity_-_projects\game_1\Assets\SVG Importer\Plugins\Core\Mesh\SVGCombineMesh.cs 11

 

Hi,

I would recommend to remove the old SVG Importer plugin before upgrading to new one.
I should create some update script which will do it automatically.

Thanks for the info!

 

Hello!
Is it possible to support SVG filters like the feColorMatrix?
https://docs.webplatform.org/wiki/svg/elements/feColorMatrix

thanks!

 

Hello,
It would be probable doable, but the filter which you showed are native
in Adobe Illustrator, Affinity Designer and probably even in Inkscape are
capable of recolouring the graphics as well, so why is there need for this
filter? Thanks for your response, if it is doable inside the vector editor
then I have to know the reason why to replicate the behaviour inside
the plugin as well.

I am working right now on some really sweet features so
stay tuned

 

Hello Jaroslav,

First off, I'm a big fan of the SVG Importer! Your hard work has definitely not gone unnoticed!

There's only a couple things stopping me from switching over my whole project to SVGs

1) Runtime importing.
I'm currently developing a platform that involves a lot of Data-Driven Programming (Web & Locally). Our Platform will have an endless amount of icons for each game, rewards, prizes etc. Also each player has a unique avatar (currently 1000+ and growing), so these files/assets will need to be downloaded and imported. Unity's texture loading from external folders and lack of multi-threading support is really starting to hinder progress.
So will this be a reliable possibility in the near future?

2) Unity UI Fill Methods
Fill options for SVGImage like the built in uGUI would be an awesome feature. Currently have multiple UI elements that need it so I can't swap them out for SVGs


Thanks Byron

 

My main issue is that some svgs are exactly the same as some others in my game but i want them to have a hue/saturation filter on them. Also some svgs may have a soft shadow gaussian blur filter as the native Unity UI shadow is not appropriate and looks odd.

Cant wait to try the new features!