Vector iconography: Using SVG images in your app

Sign in to queue


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.



Session Type:






The Discussion

  • User profile image

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

  • User profile image

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

  • User profile image

    @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

    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

    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

    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

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

  • User profile image

    I've just tested this and I have question - why it's not possible to scale the SVG image to any size? It's always rendered as a bitmap with the size taken from the svg file.

    If the path in svg file maps to 24x24 area, it's not possible to scale itlosslessly in my app to let's say 100x100?

    SVG stands for Scalable Vector Graphics, so if the SvgIamgeSource cannot be scaled to any value, it's pretty much useless.

Add Your 2 Cents