How to Use Vector Format (SVG) File as a Web Resource in Dynamics 365

Satyvir Jasra, 08 October 2017

Microsoft Dynamics 365 July Update allows us to add new types of Web Resources, and one of those new types is Vector Format (SVG). In this blog I will talk about why this is a good news for Developers and how easy it is to change the dimensions of an SVG file. 

For those who are not familiar with Scalable Vector Graphics (SVG) format, it is basically an XML based text format that describes how an image should look. This allows us to scale up or down an image based on our requirement without compromising the quality.

This means we can use the same image for different purposes by resizing it without losing any quality, and keep up with consistency. We can use SVG type web resource for Custom entity icons, icons for Ribbon, Sitemap areas and subareas, and many different places. However, we must upload a new web resource for each different size (length and width). For example, for Entity icons, I must upload a SVG file with 32 x 32 pixels, and another one with 16 x 16 pixels. Dimensions of the SVG file can easily be modified using any text editing tools. Following line of code can be used to change the dimensions, in this case I have set both width and height to 16px.

Creating a web resource of type Vector format (SVG) is similar to creating a web resource of type JPG format or PNG format, all we have to do is select the Vector format. I created two web resources, “mag_/img/cart_16x16.svg” and “mag_/img/cart_32x32.svg”.

After adding the web resources, I updated the icons for my custom Entity called “Purchase”. Notice how vector graphic images are recommended for consistency. Once I selected the new icons, I clicked on OK. Be sure to save and publish all the changes.

Let’s see what the updated icons for “Purchase” entity look like now.

Notice, how 32x32px cart icon which was scaled up from 16x16px cart icon has lost no quality. All I changed was the width and height value to create 32x32px version of icon from 16x16px version.

In conclusion, I believe letting the user upload SVG format file as a web resource is a great move. With this approach, we only need to manage only one SVG file, and can scale it accordingly when using it for multiple web resources.

However, there is still some room for improvement. It would have been much better if we could just upload one SVG file as a web resource, and use that web resource in different places with different dimensions. For example, the user should be able to use that same web resource for both 32x32px and 16x16px entity icons by specifying the dimensions when it is being used.