I often learn little tricks as I work on different projects, and I figured it is about time I shared some. These are not necessarily the best ways to do it but just some things I have picked up while I work.
This one is a best practice. Jake Archibald created SVGOMG as an online, graphical interface to the node-based SVG Optimiser. It really is brilliant and very easy to use. It has lots of settings that allow you to alter the balance between file size and accuracy, but the default settings are perfectly fine for most cases! You can often reduce the precision, sometimes all the way down to 1, to get a great saving in file size while hardly affecting the image itself at all.
I recently worked on building a really lovely website and it had a beautiful map with sketched icons. It was clear that SVG was the best way to go. I soon realised that I needed to manually edit the code fairly regularly during development. This wouldn't be an issue if it weren't so big, my text editor would keep slowing to a crawl (and another *ahem*Atom*ahem* just crashed every time). Eventually I realised that the best workflow I could find was to optimise it as much as possible with SVGOMG and then use dev tools to edit it. Not only was it faster but so much easier too!
Want to add a class? Easy, click add attribute. Need to remove an icon? Easy, select the group and delete. I have been using dev tools since firebug originally came out, so I'm not sure why I have never used it for SVG development before. Far easier than exporting every time or editing at a very slow pace. I could just modify the DOM (in some cases using JavaScript) and simple copy the SVG element back into the file and optimise again if needed.
On that same project I noticed an issue where the click event would only trigger if I clicked on the actual icon. As we were using sketch style icons, there was a lot of whitespace and sometimes it was very hard to click directly on it. Now, I'm quite brushed up on my CSS so I thought I was clever and added pointer-events: bounding-box; to the groups, I even added pointer-events: none; to the parts of the map that were not clickable. With a smug smile I left it like that.
Then of course we noticed a cross-browser bug. It turns out that some browsers did not support bounding-box. I tried lots of different ways such as adding display: block; or a width and height. In the end I wasn't able to find a solution so I asked Twitter.
Thanks to the ever-talented Amelia Bellamy-Royds, I learned that the best way to do this cross-platform is to add some rects or circles behind the icons with pointer-events: none; I went back to my dev tools and wrote a quick little script that looped over all of the icons, getting their bounding box and appended a rect to the group with the width, height and x,y coordinates. With a quick copy into the file and through SVGOMG, I tested it on the suspect browsers. It worked great!