Unity UI SVG support script

Oh, I use RectMask2D in my game and it works without any problem. Don't you use RectMask2D?
Anyway, hope you'll solve your problem asap
Bu arada kral Türk müsün? Üstteki postta attığın resmin adı 'Ekran Resmi'

 

Once I have imported an SVG, how do I change the fill of a path through code? (or even get a reference to the SVG?) I can't find any documentation.

 

This is GREAT! I have been looking for sample code for a couple of days but couldn't find the link. Thanks!

One question - is it possible to apply the generated sprite to a 3d object, like a cube? Would the sprite go into the material for the cube? What would be the best way? (A high level response would be great, then I can just do the code myself)

 

Thanks! I will try this. I had added a Sprite Renderer as a child of the object I wanted the sprite to appear on - and this seemed to work fine. However, is this a wasteful way of doing it, or perhaps a bit hacky?

I am a decent coder, but new to Unity and 3D - so still trying to figure out the best practices.

 

Great! I just wanted it to attach on the surface, and actually not wrap around! Fatastic!!

 

Is it possible to add the 360 radial fill setting to the inspector? I haven't been able to extend the class to add this.

 

Has the SVG support for UI elements been rolled out to a Unity release yet, or still in development? Thanks.

 

Then what am I seeing here in 2018.3.12 that, after adding the Vector Graphics package, I have SVG image as an option under UI to add to a canvas? Thanks.

 

OK thanks, when I said elements I guess I should have said components.

 

Thanks for your reply. I was actually talking about the fill options in unity. The radial option allows you to do a circular progress bar. I wanted to add this feature to the vector version of UI Image

 

Like this:

 

Ah, that makes sense. That could be why I couldn't get it to work! Thank you. Maybe I can do something with masking.

Edit: Masking works perfectly

 

Just filing in for notifications but I am starting to use this vector package for a pretty large app so we will see how it goes.

Thanks for all your work on this mcoted3d.

 

@mcoted3d When will the "Keep Aspect Ratio" be implemented? As it should be an easy feature...
Someone already implemented it but changing it in a package will only keep those changes locally in the Library folder I think. Link

Also creating a material that uses the Unlit/Vector or Unlit/VectorGradient, the canvas will complain in SendWillRenderCanvases method that the material does not have a _Stencil property.

 

Hey just chiming in so I can follow along with this thread. Looking forward to seeing the ui support for SVG out of preview. Is there any roadmap available for the SVG plugin with features and unity version breakdown? we found the roadmap that the LWRP team did was super handy for us to plan out what tech solutions, thanks.

 

^ haha nevermind.. I just saw your post in the main SVG thread that said there's no roadmap. No worries =)

 

Hello, I am trying to change the property of a material in runtime. But there is no .sharedMaterial in SVGImage so I guess .material works as shared. Didn't find any normal way to change property of direct material instance. Help

 

Hello! I am having a problem with RectMask2D when the material is Unlit/VectorGradient, I have implemented a zoom system and when the material is empty the image is correctly contained in the edges of the mask, but when assigning Unlit / VectorGradient it is not properly contained
attaching screen caps
Is this a bug or intended behaviour?
Thanks in advance

 

I'm trying out the UI SVGImage component. Is there any way to enable MSAA just for the UI to help the edges?

 

Answering my own question:

• Create a new camera
  • Configure the camera only render UI objects
  • Configure the camera to clear using a transparent color
  • Have the camera render to a RenderTexture
  • Configure the RenderTexture to use MSAA
  • Add an image effect to your original camera that overlays the RenderTexture
• Switch the canvas to 'Screen Space - Camera'
  • Assign the new camera

When I set MSAA to 8x my edges look pretty again and it is only applied to the UI!

(disclaimer: only works for render pipelines which support camera stacking)

 

Hey there, just wondering if the SVG importer package (version 2) supports the use of the "use" element at all? I tried looking through the documentation here, but there is no mention of it.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

 

I have a concern about Stroke.

I am trying to get consistency between rectangles and circles. Right now I set both of them to have the same HalfThickness. Yet they both show different size strokes.



Both are setup identically, only one is a circle and the other a rectangle. I created them using the VectorUtils Make functions.

 

I neglected the fact that I added [SerializeField] in my base class to the field that controls that value. I had made the circle class first and made some adjustments. Created the rectangle class, was pretty tired and forgot about adjusting the stroke in the circle class. I kept looking at the base class thinking they are both the same value.

Sorry for taking your time.

 

How is the antialiasing for Overlay canvases coming for Unity UI? With the roadmap session today, I see that Unity has a high interest in using SVGs with UI Toolkit. Just hoping that Unity has antialiasing for all canvas modes in mind for the UI Toolkit as well.

 

Hello,

Is it possible to get the nested svg by id?
Like in the code below (I've edited the code posted earlier):

Code (CSharp):

1.     string svg =
2.         @"<svg xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" viewBox=""0 0 216 216"">
3.           <svg id =""a""></svg>
4.           <svg id =""b""></svg>
5.       </svg>";
6.    
7.     // Import the SVG at runtime
8.     var sceneInfo = SVGParser.ImportSVG(new StringReader(svg));
9.     var shape = sceneInfo.NodeIDs["a"].Shapes[0];
10.  

I can't get it working...

 

Hello there!

I'm building my game UI at a 4k resolution with PNG sprites.
Some of the sprites renders very bad when playing in Full HD, especially the outlined ones.
So I wanted to investigate the possibilities of using SVG for my UI like I do when I'm building a website.
I wonder what are the best practices to get a neat UI in both 4K and Full HD resolutions?




I downloaded the VectorGraphics preview.12 - 2.0.0 but I don't understand how I can use a SVG image in my UI canvas.
I don't know how to set the import and how to add this image on my canvas ?
Is there any guide to learn this workflow?
Is there any repository where I can download a component to add vector graphics to UI ?

Thanks for your help!

 

Once you've added the VectorGraphics package into your project, Unity should be able to correctly see SVG files (if they are in your Assets folder). Then you can click on the SVG file in Unity and convert it to Sprites or similar.
I think you can also do it via script (examples above in the post), but this one's simpler in the editor.

 

Hello @Janko44 and thanks for your answer.

I found a new object on the UI menu when I right click on the canvas in the Hierarchy.

It's called SVG Images, so I made some tests with it but my icons are still ugly in small sizes
It's working very well on bize sizes.

I found an old topic on Reddit that advice to turn on mipmaps on my icons, and for now this is the best results I've got by far, it is with High res PNGs with mipmap enabled.

https://www.reddit.com/r/Unity3D/comments/7066oc/best_practice_for_clean_unity_canvas_ui/

The original icon has been designed in 256*256 resolution, and here is a comparison of SVG (top) and PNG with mipmaps (64*64 to 2048*2048 resize test on a 4K canvas)

 

Hi @mcoted3d and thank you for your answer !
This looks much better with the 8x anti aliasing on.
I guess that the MSAA requires more client side performances.

I know that I can have a camera just for my UI, so that I can have one using MSAA and not the other one ?
Mhhh sounds that MSAA if for the whole project, oh wait I can disable it on the game camera, but what if I want to different MSAA settings ? Like 2x for game and 8x for UI ?

I tried the two camera setup but without success, my whole game end up to be black and I just see my UI.

Here is my game Camera where I removed UI from culling mask :


Here is my UI camera :


Here is my Canvas


And here is the result ...



Any idea of what I'm doing wrong ?
Thanks a lot for your help!

 

Hi @mcoted3d , thank you very much for your answer!

I have another thing that is specific to my game.
I use additive scenes. I have a Game scene for the game and its UI, and I have a Menu scene for the menus that is always loaded because it is used both in game and on the main menu.
My question is how do you tell the Menu scene canvas wich camera to use ?
Maybe my additive scene strategy is bad, what do you recommend ?



Many thanks! Have a nice day

 

@mcoted3d For now I have to main scenes Home & Game.
Every time a stack of scenes are loaded in additive mode :

Bootstrap + Main + Home + Menu
OR
Bootstrap + Main + Game + Menu

Home and Game has their own camera (Game use a ProCamera2D that Home do not need).
So how I tell to the Menu scene canvas to use the camera located either in Home or Game scene ?