How to make your SVGs "play nicely" with CSS

I recently had a ticket to make the bell "fill in" when the user's mouse hovers over it. My options were:

1. Use many many lines of JavaScript to sense when the user's mouse hovers then manually switch from Notification.svg to Notification_filled_in.svg.
2. Just use a few lines of CSS to slightly modify the SVG itself:

   .svgStyle {
   	height: 200px;
   	width: 200px;
   	stroke: blue;
   	fill: black;
   	transition: 3s all ease;
   }
   
   .svgStyle:hover {
   	stroke: yellow;
   	fill: black;
   }
   

As you can probably guess, I chose the second option. Here's how to make SVGs compatible with that.

Bad

Problems:

1. Fill attribute (black) should change color of the inside of the shape, not the inside of the line.
2. Stroke attribute (blue, then yellow on hover) should be an outline of the whole shape, not just the outline of the lines in the SVG.
3. After adding stroke, the width of the SVG exceeds the width of the viewbox.
4. Sometimes an SVG will be exported with a fill attribute already included. That's bad since it essentially "hard codes" a color for the fill and prevents us from manipulating it using CSS.

Good

Solutions:

1. Check in Sketch before exporting that your SVG implements fill correctly. This should be under "fills" in the UI.
2. Check in Sketch before exporting that your SVG implements stroke correctly. This should be under "borders" in the UI.
3. Open up Sketch. Then:
   • Create new artboard with the height and width of the final SVG,
   • Add the SVG to that artbox,
   • Make the SVG slightly smaller and in the center of the artboard (e.g. if the artboard size is 24x24, the actual SVG would be 22x22 before you add the stroke),
   • Check that stroke (called "outline" in the UI) will not go outside of the viewbox,
   • Click on the artboard itself (not the layer containing the SVG) and export it as you normally would.
4. Remember to remove any fills and strokes before exporting. Double-check this by looking in the exported file for fill="someColor" or stroke="someColor". If you see those, just delete them and re-save the file.