SVG Australis toolbar icon example

Talk about add-ons and extension development.
Post Reply
User avatar
MXN
Posts: 92
Joined: November 5th, 2002, 7:28 pm
Location: Stanford, California, United States
Contact:

SVG Australis toolbar icon example

Post by MXN »

I finished reading Mozilla’s guide to Australis toolbar buttons wondering if there was an example SVG file that could get me started making an Australis-style toolbar button icon. I didn’t find any, so I made an attempt at matching the built-in buttons.

This SVG file can be edited in Inkscape. It consists of some basic shapes that are filled with a gradient that more or less matches Mac Firefox’s toolbar sprites. A “letterpress” filter is then applied to the shapes; this filter may be of use to some of you.

I then hand-edited the file into a second, smaller SVG file. Australis icons use different fill gradients in each version of the Default theme, so you have to maintain multiple versions of this file. But since I didn’t want any additional overhead for the icon, I just used @media queries that were intended for theme developers, such as -moz-windows-theme: aero, to override the gradient for each platform. So the image below will look different depending on your OS:

Image

My extension’s primary UI is a toolbar button whose icon is meant to resemble the built-in Character Encoding icon. Not every extension fits that profile, but the great thing about a vector image is that you can tweak it to your needs. (It also takes up little space and renders well on high-resolution monitors.) These two SVG files are available under a CC0 Public Domain Dedication, so have at them.
Last edited by smsmith on March 5th, 2014, 8:00 pm, edited 1 time in total.
Reason: made into a 30 day sticky starting 05 March - smsmith/moderator
Noitidart
Posts: 1168
Joined: September 16th, 2007, 8:01 am

Re: SVG Australis toolbar icon example

Post by Noitidart »

Can we post in this topic? Super super thanks for this!
User avatar
MXN
Posts: 92
Joined: November 5th, 2002, 7:28 pm
Location: Stanford, California, United States
Contact:

Re: SVG Australis toolbar icon example

Post by MXN »

You’re welcome. :-) A couple notes for anyone who wants to try this approach:

  • I use XmlFormatter, cssmin, and jsmin to aggressively minify all the files before I release the extension. That cuts file sizes down quite a bit, but it also ensures that my extensions hang in AMO review limbo for ages. (The update to AVIM that uses this icon has been disabled by a reviewer.) If you don’t minify files, you don’t have to worry about this issue.
  • Originally, this file only supported Windows (XP and Aero) and Mac OS X. I recently added Linux support by defining the Linux gradient and overriding it for the Mac with @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme). Unfortunately, that means anyone who uses 10.6 Snow Leopard or earlier with the default Aqua tint will see the Linux gradient. If you don’t support Linux, you can move the Mac rules out of the @media block. Of course, if you already have separate, per-platform stylesheets, you can just include a few different copies of the SVG image in the appropriate places without hacking around it like I did.
Noitidart
Posts: 1168
Joined: September 16th, 2007, 8:01 am

Re: SVG Australis toolbar icon example

Post by Noitidart »

Thanks that helps, but I notice you're in Stanford, if I need more help I'm going to stop by :P Im in SJ :P lol

jk but I go to the PAMF around there sometimes. :P
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: SVG Australis toolbar icon example

Post by patrickjdempsey »

MXN wrote:I use XmlFormatter, cssmin, and jsmin to aggressively minify all the files before I release the extension. That cuts file sizes down quite a bit, but it also ensures that my extensions hang in AMO review limbo for ages. (The update to AVIM that uses this icon has been disabled by a reviewer.) If you don’t minify files, you don’t have to worry about this issue.


Yeah, I really wouldn't recommend using any methods that make it difficult to do a review. File size overhead is not a big deal and Mozilla really recommends using their internal standardized formatting, which has a lot of white space to make everything human readable.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
Post Reply