Every time I’m trying to export an SVG, usually for icon purposes, the file preview, or when viewing in for example browsers, shows a huge white area with a small SVG in the top-left corner. These vectors still more or less work when used in code, but it doesn’t look good. When I look at professionally made icons their previews show just the icon in a large size, with no annoying whitespace. How to achieve this? I’ve attached images to show what I mean, there’s a clear difference when previewing something I’ve created and a Fontawesome icon.
Page 1 / 1
Hi @Juhani, Thanks for reaching out about this!
From what I’ve seen, when I export a 24 x 24 pixel layer, the exported SVG appears small in the top left corner of the screen when opened in a browser, just like in the first screenshot you provided.
Also, the larger the layer size in Figma, the bigger the exported image will display in a browser, but still have some white space.
Unfortunately, I haven’t found a method yet to prevent the surrounding white space from showing up after export. If anyone in our community knows a workaround or has some tips, please don’t hesitate to share them here!
Thanks for reaching out!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.