Vector iconography: Using SVG images in your app

Sign in to queue

Description

SVG is the de facto standard for vector graphics images, with ubiquitous authoring support and an ever-growing prominence on the web. With Windows 10 Creators Update, you can finally bring the convenience and efficiency of SVG images to your Windows app. Use XAML to draw SVG images with a single line of code, or use powerful new APIs in Direct2D to parse, render, and manipulate SVG images. In this presentation we cover what parts of SVG are supported; when to use SVG; and how to load, draw, and manipulate SVG images.

Day:

0

Session Type:

Pre-Recorded

Code:

P4078

Embed

Download

The Discussion

  • User profile image
    Licantrop0

    Please work with Windows team to show the icon/thumbnail and the preview pane of an svg image in File Explorer

  • User profile image
    carlomendoza

    Can it be used for Tile (Square, Wide), Badge assets for the app?

  • User profile image
    rickman

    @carlomendoza: Sorry, but right now we do not support using SVG images as your app's tile, logo, or splash screen assets; the SVG support discussed in this presentation is for in-app assets only. If you'd like to see more functionality, please let us know by creating or upvoting a suggestion on our UWP UserVoice forum.

  • User profile image
    rickman

    Presenter, here. I'll be checking these comments periodically to answer any questions you may have. Also, here are some pointers to resources mentioned in the presentation:

  • User profile image
    rickman

    A couple of additional tips on creating and using SVG images:

    • When authoring your assets, make sure you're only using supported SVG primitives, as anything else in the SVG file will be ignored. One unsupported tag you may run into is the <style> element: if your SVG image is showing up as a colorless blob, then your image is probably using the <style> element. Use presentation attributes or style attributes instead. In Adobe Illustrator, you can do this by changing the "CSS Properties" option (found in the SVG Options dialog when saving as SVG) to any value other than "Style Elements".
    • When adding an SVG image to your Visual Studio project, you may need to use the Properties window to manually set the added file's "Content" property to "Yes" and its "Item Type" property to "Image". If your app fails to find your SVG image at runtime, check that you've provided the correct path to the asset, and check that these properties are correctly set.
  • User profile image
    canol

    I was waiting for this feature for so long! I am a fan of using vector images in apps, especially for things like icons inside buttons...

  • User profile image
    rickman

    Great news: As of today, Direct2D's powerful SVG rendering is now available through Win2D as well!

Add Your 2 Cents