As a developer who works with SVG icons provided by designers a lot, I can definitely say including the canvas makes things a lot easier on our end :thumbs_up:

Definitely, absolutely keep all the icons the same size, unless you have a very good reason not to. I’d go one step further, and ensure you have some spare padding included, so you have enough space if an icon needs to extend further than your standard square or circular icons.

In terms of exporting, different tools have different ways of handling padding.

Sketch

Use artboards or slices for exporting, so you get explicit padding control. Slices are good. Don’t forget about them. Be incredibly careful when exporting artwork with inner or outer strokes — SVG only supports centred strokes and the conversion from inner or outer to centered (as required) can mess things up very badly.

Illustrator

Use artboards and Export for Screens for exporting, so you get explicit padding control. If you don’t want to use artboards, and you do want to use the Asset Export panel, you can add rectangles with no fill to control the padding (gah!). And if you do that, you can name the unwanted objects “DELETE_ME” or similar, then batch grep to remove them from all your SVGs.

Photoshop

It’s probably best to not export SVGs from Photoshop. I’ve done a bit of testing and the results aren’t good, unless the icons are pretty simple.

Adobe XD

Artboards are the way to go, if you want padding control. You can also use the unstyled rectangle trick, if you want to use the standard layer and group exporting, but with padding control.

Affinity Designer

Use slices in the export persona to get explicit padding control. SVG exporting from Affinity Designer is pretty solid. Possibly the best of the bunch.

Keeping the canvas also allows you to shift the icon around so that it's visually centered. For example, a ▶ will need to be shifted to the right slightly to appear as if it's in the middle.

Keeping the canvas is new to me - I'm going to try this method. Thanks!

Yup, what everyone else said. Keeping a wrapper leads to less issues in my experience.

I agree with everyone else. The one exception is if you want the svg to be animated (animated / drawn out on screen) or if it's not used as an box image (for example if text should wrap around the shape of a sphere), then the former option is better

I've always kept the canvas in there. If something needs to be resized, it's nice for the devs I work with to be able to do it without having to pay attention to uneven dimensions.

Mileage may vary though depending on what the developers you work with currently expect and how they currently lay out icons. This seems like a good opportunity to connect with them and find out.

I mostly use Adobe Illustrator when I have to create icons. While designing for websites: - I first create the icon in a 24x24 px canvas. - I convert all strokes & text to outlines (if any). - Resize them on a smaller artboard (5x5 px) and export them as svg. - After export, I run svg optimizer from terminal. - While coding, I use CSS to resize my svg icon based on design.

Of course I use the artboard to export unless I am creating an animated svg icon. This way I ensure my site doesn't get heavy on file sizes.

Keep a 1:1 aspect ratio. I find it's easier to maintain from a consistency point of view + scales the same as sibling icons when resized (either by width or height).

Better to leave the canvas in, it's definitely easier and more consistent for everyone to implement. I'm always going with the second route in my work.

You could stumble upon some small spacing issues if you stack few icons horizontally (in case you have some kind of toolbars with bunch of icons in your design) because of the difference in width of each icon, but it's a lot smaller obstacle than having different heights.

I have a different question related to this (noobie alert!): do you embed the svg into html or use as background (say in psuedo classes) in css?