Basic SVG support

Feature Suggestions
1

Apart from the use of MultiDensityImageSource and importing Sketch. Is there a plan to support other vector formats like SVG?

2

Hi,

Yes, this is planned, but it can take some time. We want to nail a proper high level drawing API in connection with this.

3

Thanks Anders. Great to know. Will stick to MultiDensityImageSource at the moment then.

4

Is there a way to support svg files?

5

At the moment there is no direct SVG file support, but you can use Path with Data to draw vector shapes.

Take a look at this example on how to use different vector components in UX Markup.

6

@Arturs

Is there way for animating Path? Like this.

<App>
	<Panel Background="#fff">
		<Path ux:Name="SVG" Data="M0.5,0.656478748 L0.5,145.5 L145.331807,145.5 L111.758978,31.3260296 L0.5,0.656478748 Z" Color="#000" Width="30"/>
		<WhilePressed>
			<Change SVG.Data="M0.5,61.3849306 L0.5,206.5 L145.664228,206.5 L229.77838,0.732315632 L0.5,61.3849306 Z" Duration="0.3"/>
		</WhilePressed>
	</Panel>
</App>
7

@Junseok Kim: what a coincidence! We recently shipped a Fuse version that, indeed, allows you to animate paths. See this video by Mortoray for more details.

8

@Uldis: wow, can I make a rectangle into a circle with animation using this? I didn’t look into enough yet, but I’ll try that!

9

@Junseok Kim: I’ll just point out that a Rectangle can be made into a circle by just animating the CornerRadius property:

<App>
	<Rectangle ux:Name="rect" Width="100" Height="100" Color="#18f" Alignment="Center">
		<WhilePressed>
			<Change rect.CornerRadius="width(rect)/2" Duration="0.32" Easing="QuadraticOut" />
		</WhilePressed>
	</Rectangle>
</App>
10

@uldis My question was not enough :slight_smile: I’m wondering I can make path animation like in this link. https://codepen.io/noahblon/pen/IhLFK?limit=all&page=13&q=svg

11

I guess you could. Watch that video I linked and let us know how that goes!

12

Want to cast my vote for SVG support, all of my visual assets are vectors and I would rather keep it that way in the apps I write. Multi-sized PNGs are just a pain and eat up too much storage.

Seems like there has been enough interest in the community to put this on the roadmap at some point.