Playing with vectors – SVGs in canvas apps

Scalable Vector Graphics, also known as SVG, is a vector image format that uses an Extensible Markup Language (XML) structure. This means that it's a text-based file format composed of coordinates that together draw an image.

One particular advantage of this format is that the quality is not affected when you change its dimensions. Being a vector format, it draws the image according to its dimensions. One usage example is a company logo, where you need to maintain quality, no matter the size, in places such as on business cards, websites, and document templates.

This format provides even more features, such as animation or HTML content styling. For the complete documentation, please refer to https://developer.mozilla.org/en-US/docs/Web/SVG

Getting ready

The resources needed to build this recipe, as well as the canvas app, are available in our GitHub repository located at https://github.com/PacktPublishing/Microsoft...