WebExtension: Using an SVG Icon

Add-ons Development
1

I have an addon for which I have previously used a collection of PNG icons. I am trying to replace the icons with a single SVG icon.

I have the following in my manifest.json file:

"browser_action": {
    "default_icon": "/content/images/icon.svg",
    …
},

as per https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/browser_action, but it doesn’t show up at all — just a space where the button should be.

What is the trick to getting an SVG icon working?

Thanks

2

Try placing it in the root directory with no path. Just a wild attempt. When working with webext’s i found some funky solutions.

3

Thanks. Tried & Failed.

I know the icon file is OK, because I can use it the addon icon:

"icons": {
    "48": "/content/images/icon.svg"
},

As you see, I had to include an arbitrary size to get it to work. It still doesn’t work for the addon button.

4

Ah very cool, thanks for sharing that solution!

5

In my experience, SVG icons sometimes work and not in other cases. First, you should experiment with Nightly. When it fails, you need to debug it using Browser Toolbox, Browser Content Toolbox, Add-on Debugger etc. Also, clean installation of the add-on might help. (And most users do ‘clean installation’)

6

I have found a workaround for what I think is a bug.

Although the documentation says you can supply a string instead of an object, it doesn’t appear to work. Instead, I fake it with the following code:

"browser_action": {
	 "default_icon": {
		"24": "/content/images/icon.svg",
		"48": "/content/images/icon.svg",
		"96": "/content/images/icon.svg"
	},
	…
},

Same SVG image, but pretend it’s one of a number of icons.

7

I can’t reproduce this. Here’s a simple add-on that uses an SVG icon for the browser action: https://www.dropbox.com/s/qkuirqfb3b47nx8/browserAction-svg.zip?dl=0. It works fine for me (using “Load temporary add-on”) on Firefox 48, OS X. Does it not work for you?

8

I tried this but it didn’t work. I created the svg with Inkscape, and tried the “Plain SVG” setting in the Save As dialog. Should I use a different one? It also has “Optimized SVG”, “Compressed SVG”, “Inkscape SVG”, etc.

What program did you use to make the svg?

9

You need to give your SVG a default width/height (within the .svg file) -

https://bugzilla.mozilla.org/show_bug.cgi?id=1306030

10

I just went to the image properties and verified that a width and height were set, and it still doesn’t work. Here is the file:

Here is the manifest file:

{
"manifest_version": 2,
"name": "ssjs",
"version": "0.1",

"browser_action": {
	"browser_style": true,
	"default_icon": 
	{
		"16": "icons/ssjs.svg",
		"24": "icons/ssjs.svg",
		"48": "icons/ssjs.svg",
		"96": "icons/ssjs.svg"
	},
	"default_title": "ssjs",
	"default_popup": "popup/ssjs_pop.html"
},

"description": "displays loaded CSS and JS files",

"icons": {
	"16": "icons/ssjs.svg",
	"24": "icons/ssjs.svg",
	"48": "icons/ssjs.svg",
	"96": "icons/ssjs.svg"
},

"content_scripts": [
  {
	"matches": ["*://*/"],
	"js": ["content_scripts/ssjs.js"]
  }
],

"applications": {
  "gecko": {
     "id": "ssjs@raphael.com"
  }

}
}

Do you see anything wrong?

11

After closing and restarting FF it started working. Possible caching issue?

12

Is this after restarting after adding width/height?

Restarting without width/height doesn’t work right?

Definitely a caching issue. I hit it a lot. Are you loading the addon via about:debugging? I do.

13

@noitidart, when I opened the svg in Notepad++, the width and height were already there, but at first they were in mm. I tried changing the units in Inkscape to pixels, and then reloaded in about:debugging, and it didn’t work. I then tried changing the dimensions and tried grouping the objects in a few different ways, and it didn’t work. When I came in the next day, I restarted FF and it started working, so I’m pretty sure it was caching.

When you clear the cache in the history, does that also clear the addon cache?

14

@raphael75 I have encountered times when Firefox will only render some svgs if you include a viewBox definition:

<svg viewBox="0 0 48 48" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
   ...
</svg>
15

@mottie, I just checked the svg, and Inkscape did add a viewbox definition.

16

It might. But I think this is a different kind of cache, restarting the browser is the only way.