Using SVG (Scalable Vector Graphics) Web Resources for Creating Icons

Starting with Dynamics 365 v9.0, there is now support for SVG when creating a web resource. Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation(copied from Wikipedia).

What this means is that instead of the traditional raster based images(JPEG, PNG etc.) which render based on thousands of  tiny squares or pixels with each pixel representing a color, vector based graphics use lines and curves to form polygons and other shapes. This has the advantage of the image being able to scale up or down without looking blurry or pixelated like a raster based image, while still being sharp and maintaining the same clarity.

When creating icons for entities or when using SVG in sitemaps, ribbons etc. this reduces the burden of generating images in 16 pixels and 32 pixels or in the right size. We could instead just create one web resource and reuse it in multiple places.

Let's look at an example by setting icons on an custom entity called Device.

In order to generate the SVG icons we could use free online tools to convert images in PNG or JPEG to SVG or we could use professional editors like Adobe Illustrator.

For this example I have downloaded an image from Icons8 which has a lot of free icons and usually has the icons I am looking for. If you are lucky enough you might also be able to directly download the SVG file if it's free.

After downloading the icon I used another online free utility called Vectorizer to convert the image in PNG to SVG. Notice that I used an PNG image with 100 px. There is also picsvg which seems to work pretty good. Make sure to tweak the filters to find the one that looks best.

Now let's create a new web resource for this

We can now specify our entity to use this web resource for both the 16 and 32 pixels.

Also, notice that SVG is being recommended :)

It's nice to see Dynamics 365 provide support for SVG as this makes it flexible and easy to maintain icons.

Feel free to comment if you found better ways to generate the SVG.