Use SVG.js v3.0 in Edge Extension

Getting Started

I’m currently developing an Edge extension. So far, I’ve got to retrieve favicon .ico images, but now I’m looking into how to add a mark to these favicons.

For example, enclosing the image with a large red circle or adding a star mark to the top-right corner of the image.

Using the SVG format is convenient for layering images like this.
But for a beginner in web development like me, this is quite a challenge…

How to use SVG files within Edge Extension?

• First, since Edge Extensions are applications that run in the web browser, Node.js libraries cannot be used.
• Converting ICO files to SVG format on my own without using a library seems really difficult! (I can’t do it…for now…)
• Then, finally, I found a JavaScript library supporting web browser that can handle SVG images.

Yes, it’s SVG.js.

SVG.js v3.0 – document

Concept for creating SVG files by using SVG.js

1. First, I will use the image() method of the svg.js library to embed the ICO image inside the SVG.
2. Next, I will place other SVG format files and SVG shape elements within the same container.
3. Finally, I will use the export feature of SVG.js to save it as a single SVG file.

Sounds about right?

SVG.Image – Image()

Import / Export SVG – svg()

This is a sample code and result introduced in the SVG.js v3.0 documents.

var draw = SVG().addTo('body').size(500, 130)

var image = draw.image('https://cdn.img42.com/4b6f5e63ac50c95fe147052d8a4db676.jpeg')
image.size(100, 100).move(20, 20)

What’s next?

There are still many things I need to look into.

• Is it okay to directly input an .ico image into the image() method, or do I need to convert it to PNG or JPEG first?
• How can I display the SVG image I will create as a favicon from Edge Extension?

Stay tuned!