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

Awesome, glad to hear! I personally am not aware of any distribution channels... but let me know when you have something up and running and I'll test it!

 

@Jaroslav-Stehlik thanks for a great asset - its a core for my coloring book app https://play.google.com/store/apps/details?id=pl.ayground.coloringbook - looking forward to see your coloring book demo so I can further improve what I do with SVG Importer.

Have a great weekend!

 

Killian, I see that you're importing them while having UWP selected in the Build Settings. This causes problems in the SmallXMLParser class that SVG Importer uses because it can't use some Unicode methods or something. You can comment out that part of the code but you'll lose the functionality to create SVG Assets during runtime so we have had to write our own code to work around that.

TLDR;
You'll be able to import the files if you temporarely switch to the Standalone Windows platform or rewrite some part of the SmallXMLParser class.

 

If you need beta testing of a new SVG Importer version feel free to send it and I will implement it into my project see if it breaks or not. Any new and improved versions are always welcome ^^

 

As far as I know, if you upload a new version on the asset store, unity will detect the files that are changed when trying to reimport the asset in the project (those will be the only one selected in the drop down menu)

 

Hi, Thanks for your reply.
You are right on this, if I import my svg files with other build settings, this work perfectly.

 

Thank you very much. It works!!

 

No, I would maintain a separate email list, ask people that want to be on the beta to email you with their Asset Store order number (so you know they have it) and send out the beta that way.

I'd happily test and feedback too.

 

Also, @Jaroslav-Stehlik, when using SVGImages on a ScreenSpace-Overlay Canvas, the UIAntialiased shader has no effect, when switching to ScreenSpace-Camera and assigning a Camera to the Canvas then it works.
My guess is that, as a ScreenSpace-Overlay Canvas is way bigger than a ScreenSpace-Camera one, the antialiasing is just not visible and results in sharper edges. any idea on how to fix this?

 

Yeah, this is part of the problem I've been having as well. I'm hoping Jaroslav's new shaders fix it.

 

@Jaroslav-Stehlik When I set UI svg asset to use layers it just shows white quad. and coloring also doesn't work
https://www.dropbox.com/s/ppllpub4qobjzl9/Recording #1.mp4?dl=0
what am I missing?

also is is possible somehow to use same svg asset for ui and sprite?

 

@Jaroslav-Stehlik in SvgImage OnPrepareForRendering is never called.
Please some help

 

@Jaroslav-Stehlik I desperately need the anti-aliasing to work. I needed it when I started this project over 2 years ago, and I need it now more than ever that we're about to make some big distribution deals. I've been patient for a very long time now... Please give me something to work with... anything at all.

 

Update: In the meantime, I was able to switch from Screen Space - Overlay to Screen Space - Camera all across the game without causing too many issues, which made everything look slightly better. Additionally I've disabled SVG Importer's anti-aliasing on all SVG Images, and cranked up Unity's to 8x, which also helped quite a bit.

It's not the perfect solution, because not everybody can use Screen Space - Camera, but in my case it helped quite a bit.

 

I'd like to test the new beta version as well. I've bought SVG Importer a long time ago and it's a top tier tool.
Got a published app using SVG Importer with Unity 5.6.x on both iOS and Android and looking to try the beta with the latest Unity LTS version (2017.4)

Also had an issue open @ the issue tracker for ages now related to gradient rendering on certain devices like a Galaxy S6, workaround being only forcing openGL ES2 on all devices (https://issuetracker.unity3d.com/is...-incorrectly-on-android-devices-with-mali-gpu). Hope a SVG Importer update will fix it, since Unity set the issue status to "Won't fix".

I will PM you with my email address, thanks for your work on this wonderful asset.

 

Hello guys, we recently bought this tool and got stuck on these weird issues.
Some of the assets dont get imported properly. Here's an example of this. The first one is how it's designed, the second is after Unity's import.

I went through this thread and found a similar issue but haven't managed to find a solution.

 

In the example you provided, I'd image that expanding the strokes to objects (mountain) in your design program will probably fix the issue. What program are you using?

 

Hi all,

We've just imported the latest version of SVGImporter (1.1.6) on a machine with an older unity install. What exactly does "ignore SVG Canvas" do? We would like the canvas size (and any whitespace) to be respected as we are doing animations using the SVG Frame Animator. When we un-check "Ignore SVG Canvas", the SVG/mesh is not rendered. Is anyone able to help? do we need to copy/paste any hotfixes into the SVGimporter source code or do we just need to update Unity? Our unity version is: 2017.3.1f1.

 

I am using the most recent version of unity.
Why can i not use .svg assets in my tilemap?

https://docs.unity3d.com/Manual/Tilemap-TileAsset.html
Says that "Typically, Tiles are actually Sprites that are arranged on a Tilemap."
And
https://assetstore.unity.com/packages/tools/sprite-management/svg-importer-38258
Says that "SVG importer fully mimics Unity native sprites so your team doesn't have to learn anything new."

So the tilemap should work with svg assets considering that they are sprites but if I drag the svg asset into the tile pallet nothing happens. So i'm not sure where i can go from here, please help.

 

When I use Modifiers ( twirl,sphere..) if the material is Sprite Diffuse , the Image becomes very dark, can't recieve lights. There is a way to solve this problem?

 

@Jaroslav-Stehlik

Will we get an update that improves Anti-Aliasing in the near future? We're running into a couple of problems that have been posted in this thread multiple times already and the once in a month replies don't really assure that those will be taken care of. A colleagae has tried to contact you through mail but has not received a response.

Some of the weird behaviour that anti-aliasing causes is described below;
1. Scaling a SVG Renderer or SVG Image makes it blur way to much, so much that it turns into one big blob.
2. Increasing the Orthographic Size on a Camera does the same thing but only applies to SVG Images.

These things create weird side effects in our project. For instance, we fade away objects (SVG Renderer) by slowly scaling objects down and then masking the removal by a particle effect but the anti-aliasing causes flashes because of the asset going wild and spiking when it's nearing a certain scale. A work around that we could use is disabling anti-aliasing when the scale reaches a pre-set point but this will disable anti-aliasing in it's entirety and the player will notice that all the other objects are aliased for a small amount of time.


The reason we use SVG Importer is because SVG assets would retain their quality no matter how far you zoom in or out. Combine that with the built-in anti-aliasing which is actually better than the Unity anti-aliasing which applies anti-aliasing on everything in the scene. Using other anti-aliasing methods might not be possible for us because we're developing for very specific hardware.

 

May be I can help you. First point is what SVG converted to concrete scale, for example 5x, importer creates mesh for 5x quality with some vertex count and triangle count. If you scale greater than 5x, the mesh can't be rendered like in flash or adobe illustrator, because of vertex count. It's not aliasing, it's vertex count. With SVG Importer you can't take universal scaling, like in flash or illustrator. If you need bigger scale than 5x, you should select VertexPerMeter (VPM, QUALITY) in mesh importing process, for example 5000-10000 etc, and this mesh can be scaled to bigger scale, but not to arbitrary.

 

In my experience, MSAA is great for SVG Importer. But geometry AA is broken, I can't remember any version with worked geometry AA from SVG Importer. Better use MSAA.
p.s. Also if you need to disable MSAA partially, you can make two cameras, one with MSAA enabled, and one with disabled, you can progrrammatically change MSAA enabled option on camera, and render specific gameObjects with specific camera by layer index (not 100% sure it work out-of-the-box with importer).

 

Hi @Jaroslav-Stehlik,
We use Adobe Animate to make svg animations, which are exported frame by frame and rendered in Unity using SVG Importer. This works fine in most cases, but some of our animations need to tween colors. For that, we are using color effects, and those are apparently not working in SVG Importer?

You can reproduce the problem with the test file attached. If you open it with a browser, yo should see a transparent brown rectangle, but SVG Importer renders it as an opaque brown rectangle, regardless of the import settings.

Is this feature not supported? Are there any workarounds you know about?

 

I, too, am struggling to get the lights to work properly with the imported SVGs.

Has anyone been able to do so lately?

I was following these steps, not sure if there's something newer to follow from:

Thanks.

 

You have to disable anti-aliasing during SVG import and change the shader in your material:



Although the representation isn't valid as some elements are becoming translucent for some reason. You need to investigate this more.

 

guys check first post

 

Hi @Jaroslav-Stehlik ,

I got an issue from svg image in unity 2018 after upgrading my project from 2017.

the ui svg image got weird behaviour, it have weird position and scaling without even edit the value.

When I set deactive and activate again the gameobject contain ui svg image, it cause a weird problem. Then if I disable the svg image on the inspector, the gameobject is okay. But it just temporary. When I play the editor, the weird behavior occurs again.

Here is the screenshot of the problem during set active gameobject false into true, and set active svg image false into true.

How to fix this bug? thank you.

 

Is there a problem with the anti-aliasing?

This is how it looks on my end (using Unity 2017 LTS @ MacOS):

https://imgur.com/a/LIxwVhv

Strangely it works in the editor window.

 

The demo uses really old asset serialization so I think it is only related to the demo.

 

We have exactly the same issue in Unity 2018.

 

Hi guys. I am about to purchase the svg importer. But I wanna know something. Does it support shadow effects?
For instance, if I import an svg asset from illustrator and it has shadows, will svg importer render the shadows?

 

@akwaahenkan

According to page 4 in the manual it appears that shadows will need to be vectorized prior to import, however Unity has the capability to cast shadows on or from SVG imports.

supported features

- Linear Gradients
- Radial Gradients
- Symbols
- Clip Paths "experimental" - Cutouts

- Strokes
- Complex Shapes

unsupported features

- Masks “SVG mask will no be supported due to hardware limitations”
- Text “most graphics editors can convert text to curves”
- Filter Effects “Does not mean that we can not use custom shaders in the future”
- Animation

 

Is antialiasing support planned for screen space overlay canvas?

 

Very useful asset, however, it would be better if you included scripting documentation.

 

I hope so... In the meantime, you could try using Screen Space - Camera. See the excerpt from a previous post below for more info.

"In the meantime, I was able to switch from Screen Space - Overlay to Screen Space - Camera all across the game without causing too many issues, which made everything look slightly better. Additionally I've disabled SVG Importer's anti-aliasing on all SVG Images, and cranked up Unity's to 8x, which also helped quite a bit.

It's not the perfect solution, because not everybody can use Screen Space - Camera, but in my case it helped quite a bit."

 

I want to combine the SVG sprite with the cloth component, which works and would be amazing, but unfortunately, this method also spams this error.

MissingReferenceException: The object of type 'MeshRenderer' has been destroyed but you are still trying to access it.
Your script should either check if it is null or you should not destroy the object.
SVGImporter.SVGRenderer.OnWillRenderObject () (at Assets/SVG Importer/Plugins/Core/SVGRenderer.cs:336)
UnityEngine.GUIUtilityrocessEvent(Int32, IntPtr)​

I know it's probably an unorthodox method, but has someone an idea how to fix this error (since the principle works). Alternatively, does anyone know how to use mesh deformations (as used for cloth and also for spine-based 2D), yet combined with SVGs?

 

Thank you Shane. Unfortunately in my case I require Screen Space Overlay. After reading your solution earlier on, I ran a demo project with screen space camera and everything looked awesome. For now I will stick to sprites and hopefully in the near future, will be able to swap over to SVGs.
Unity's upcoming Vector Graphics Package is looking good, tho UI support could be a long way off.
Thanks again

 

Hi!
I'm trying to use Particle System with SVG Importer, but it changes the color of the particles (red blood) to the colors of the SVG background (sky blue). What am I missing?

 

@Jaroslav-Stehlik Any updates? You were talking about a new version of the plugin that needed testing? We're all really curious.

 

@Jaroslav-Stehlik
Maybe Discord.

 

His Anti-Aliasing vid might contain some helpful clues.

 

Hi @Jaroslav-Stehlik thanks for being so honest about the reasons for not spending that much time working on the plugin, really appreciate your sincerity and openness. Having said that, my graphic designer found a couple issues with assets imported with SVG Importer, which consisted in assets appearing pixelated. After changing different parameters to try and find out what was the issue, I found the following:
- When using Canvases in the screen space overlay, the SVG images get pixelated unless the main camera is orthographic and the size is 300 (the bigger the size the smoother it gets until 300, then it starts getting completely blurry).
- When I switch the exact same camera with all the SVG images to screen space camera and assign a camera to it, the pixelation issue gets automatically resolved, it looks like when in screen space overlay the antialiasing is not working at all.
Hope you can give me insight on this issue and hopefully a solution that doesn't involve changing all the canvases to screen space camera :O. Thank you!

 

Something happened between Unity 2017.4.7 and 2017.4.12 - a lot of our SVGs that worked flawlessly before are now being imported as empty graphics. Also, viewing multiple of these empty graphics in the preview window selecting them one after another in the project tab crashes the Unity editor. Something is rotten there and it prevents us from updating.

 

Quick question, was the Stroke Renderer ever finished? I have an svg of a stroke line that I import into the scene with the Stroke Renderer attached, but changing the values doesn't seem to make any difference whatsoever. How do you go about using this as there's little to no explanation in the documentation

 

@syamilsynz @Jaroslav-Stehlik I have a similar issue. After upgrading to 2018 (latest) from 2017- SVG UI graphics will often be mis-scaled to huge proportions. Enabling and disabling them can sometimes fix the issue- but it is not reliable. This happens in editor and in builds. It makes SVG's unusable- so I have 2 choices- remove all SVG from the project (a week of work) or stay on 2017 which is not feasible due to features I need.

Is there any reliable work-around or fix? Do we even know what causes the bug?
Any help appreciated.
Thanks,
-GS

 

Hi @Jaroslav-Stehlik,
How can I used it in Canvas to adapt to different resolutions? like UGUI. can you give me a demo or blog for it ?

 

@Stanhome This asset does not work properly in Unity 2018. There is no support. I have built a large game that depends on this asset and I was forced to update from 2017 to 2018 for other support- it is going to be a huge undertaking to remove this asset. I am trying to find some work around to make it work and avoid the UI overhaul- at this point no luck and no answers on the forum. I would highly discourage you from integrating this into a serious game title. Unity is developing their own native solution which does not work with UI currently- and I would not use that either. I would wait until it is ready because that will be properly supported.

 

Hi @Jaroslav-Stehlik

I'm guessing SVG Importer isn't being updated anymore? If that is the case, you should consider removing it from the Asset Store to stop people buying it and expecting it to be supported. Assets die due to a lot of reasons, the previous SVG asset I was using (RageTools) has gone now too, but better to be clear about this to potential purchasers up front.

 

It is really very good package in term of quality and making the size of application small. It does not loss quality while scaling up and scaling downing and i need the same feature in my colouring application. It has been more than three days but did not get the idea how to colour SVG. Could you guide me. We have to implement this feature on our application . https://play.google.com/store/apps/...ter.color.by.number.paint.coloring.book.pages
Thanks !