Vector iconography: Using SVG images in your app

Sign in to queue

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!

  • User profile image
    martinsuchan

    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.

  • User profile image
    Jeff Evans

    I'd like to second Martin Suchan- I'm trying to use the new DrawSvg method in Win2D, in a C++/winrt project, and I see that though the svg does render nicely in the desired CanvasControl, the Size argument in that method is apparently ignored. Surely there must be some way to scale the Scalable Vector Image? I must be missing something obvious.

  • User profile image
    Jeff Evans

    If I could correct my previous remark: the Size argument is probably not being ignored; it's just that it refers to the viewport, not the viewbox. But the viewbox needs changing in order to scale the image, and the DrawSvg method's SIze argument is apparently only intended to tell how much of the image to draw. However, I'll guess that 99% of the users of this method are interested only in drawing the entire image at specified scales, and to that 99% the three existing DrawSvg methods in the Canvas Drawing Session are kind of useless.

  • User profile image
    Jeff Evans

    In case any other human ever reads this: I have the answer. The Width and Height attributes in the svg will take priority over the viewport Size argument in DrawSvg - if the svg has no Width and Height attributes then DrawSvg draws it at the requested Size - no problem. This is not documented, and I'm told that is because MS did not want to encourage people to do it this way; they wanted us to set a transform for the drawing session. But it works fine, and in a case like mine in which almost every svg has a slightly different scale, I think it's simpler.

Add Your 2 Cents