Skip to main content
Solved

SVGs are exported with an incorrect size


David LEVACHE

Hello,

I experience issues when exporting vector icons as SVG. 

When the exported icon position is a plain pixel, the export is correct, and has the same size as in the design file.

The icon is at x= 0 ; y = 0

This is the exported SVG file content:

<svg width="1667" height="2500" viewBox="0 0 1667 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_20_4)">
<path d="M416.833 2500C646.833 2500 833.5 2313.33 833.5 2083.33V1666.67H416.833C186.833 1666.67 0.166698 1853.33 0.166698 2083.33C0.166698 2313.33 186.833 2500 416.833 2500Z" fill="#0ACF83"/>
<path d="M0.166698 1250C0.166698 1020 186.833 833.333 416.833 833.333H833.5V1666.67H416.833C186.833 1666.67 0.166698 1480 0.166698 1250Z" fill="#A259FF"/>
<path d="M0.166698 416.667C0.166698 186.667 186.833 4.76837e-05 416.833 4.76837e-05H833.5V833.333H416.833C186.833 833.333 0.166698 646.667 0.166698 416.667Z" fill="#F24E1E"/>
<path d="M833.5 4.76837e-05H1250.17C1480.17 4.76837e-05 1666.83 186.667 1666.83 416.667C1666.83 646.667 1480.17 833.333 1250.17 833.333H833.5V4.76837e-05Z" fill="#FF7262"/>
<path d="M1666.83 1250C1666.83 1480 1480.17 1666.67 1250.17 1666.67C1020.17 1666.67 833.5 1480 833.5 1250C833.5 1020 1020.17 833.333 1250.17 833.333C1480.17 833.333 1666.83 1020 1666.83 1250Z" fill="#1ABCFE"/>
</g>
<defs>
<clipPath id="clip0_20_4">
<rect width="1667" height="2500" fill="white"/>
</clipPath>
</defs>
</svg>

 

But when the icon is not on a plain pixel, the export is incorrect, with 1 extra pixel on the incorrectly aligned axis.

The icon is at x= 0.26 ; y = 0.21

This is the exported SVG file content:

<svg width="1668" height="2501" viewBox="0 0 1668 2501" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_20_4)">
<path d="M417.089 2500.21C647.089 2500.21 833.756 2313.54 833.756 2083.54V1666.88H417.089C187.089 1666.88 0.422698 1853.54 0.422698 2083.54C0.422698 2313.54 187.089 2500.21 417.089 2500.21Z" fill="#0ACF83"/>
<path d="M0.422698 1250.21C0.422698 1020.21 187.089 833.544 417.089 833.544H833.756V1666.88H417.089C187.089 1666.88 0.422698 1480.21 0.422698 1250.21Z" fill="#A259FF"/>
<path d="M0.422698 416.878C0.422698 186.878 187.089 0.211048 417.089 0.211048H833.756V833.544H417.089C187.089 833.544 0.422698 646.878 0.422698 416.878Z" fill="#F24E1E"/>
<path d="M833.756 0.211048H1250.42C1480.42 0.211048 1667.09 186.878 1667.09 416.878C1667.09 646.878 1480.42 833.544 1250.42 833.544H833.756V0.211048Z" fill="#FF7262"/>
<path d="M1667.09 1250.21C1667.09 1480.21 1480.42 1666.88 1250.42 1666.88C1020.42 1666.88 833.756 1480.21 833.756 1250.21C833.756 1020.21 1020.42 833.544 1250.42 833.544C1480.42 833.544 1667.09 1020.21 1667.09 1250.21Z" fill="#1ABCFE"/>
</g>
<defs>
<clipPath id="clip0_20_4">
<rect width="1667" height="2500" fill="white" transform="translate(0.256 0.211)"/>
</clipPath>
</defs>
</svg>

For now, when the issue occurs, the only solution is to realign the icons, but this can be a painful task.

Best answer by Gayani_S

 

Hey ​@David LEVACHE, thank you for reaching out and for providing such detailed information! 

This issue is often related to a bug our engineering team is aware of. The cause of the extra pixel is typically related to either the size or position of an element being a decimal point value.
 
To address this, you can pull up the Export Modal using Cmd + Shift + E, you'll see a warning about this as well as the export dimensions. This should allow you to quickly find assets that need attention.
 
At this point, you can try two things to resolve this - either manually changing its coordinates or size to the nearest whole pixel from the Properties Panel, OR using the Round to Pixel function from the menu:
 

  1. Select that object and go to main menu - from there choose Quick Actions.
  2. Search for Round to pixel:

Since we don't currently have an ETA for a fix, I'd also recommend activating Snap to Pixel Grid to see if that helps. You can enable it from the main menu > Quick actions:

When you enable this functionality, Figma will align objects to the underlying grid when placing or moving them. This can help to prevent misaligned pixel errors when exporting elements.
 
You can also take a look at this plugin, which might be helpful. 
 
In the meantime, I went ahead and added your case to our ongoing bug report. If you're seeing this happen again, but the dimensions or position are not a sub-pixel value, please contact our support team via this form, share your file with the team and add support-share@figma.com to your file as an editor. They'll help to take a closer look, thank you! 

View original

Gayani_S
Figmate
  • Community Support
  • February 3, 2025

 

Hey ​@David LEVACHE, thank you for reaching out and for providing such detailed information! 

This issue is often related to a bug our engineering team is aware of. The cause of the extra pixel is typically related to either the size or position of an element being a decimal point value.
 
To address this, you can pull up the Export Modal using Cmd + Shift + E, you'll see a warning about this as well as the export dimensions. This should allow you to quickly find assets that need attention.
 
At this point, you can try two things to resolve this - either manually changing its coordinates or size to the nearest whole pixel from the Properties Panel, OR using the Round to Pixel function from the menu:
 

  1. Select that object and go to main menu - from there choose Quick Actions.
  2. Search for Round to pixel:

Since we don't currently have an ETA for a fix, I'd also recommend activating Snap to Pixel Grid to see if that helps. You can enable it from the main menu > Quick actions:

When you enable this functionality, Figma will align objects to the underlying grid when placing or moving them. This can help to prevent misaligned pixel errors when exporting elements.
 
You can also take a look at this plugin, which might be helpful. 
 
In the meantime, I went ahead and added your case to our ongoing bug report. If you're seeing this happen again, but the dimensions or position are not a sub-pixel value, please contact our support team via this form, share your file with the team and add support-share@figma.com to your file as an editor. They'll help to take a closer look, thank you! 


David LEVACHE

Hello ​@Gayani_S!

Thanks for your reply. To give you a bit more context, I’m not the actual editor of the design files where I get my icons. So the “round to pixel“ or “snap to pixel grid” are not available to me, unless I copy/paste the icon I want to export in a draft file.

I had never noticed the useful warning in the export modal window… Because I don’t use it. I rarely export icons in batch, and use the right panel to export my files. And in that panel, there’s no warning. Until a proper fixed is applied, could you consider add the warning message to the right panel export section?

 

Thanks


Gayani_S
Figmate
  • Community Support
  • February 12, 2025

Hey ​@David LEVACHE, thank you for getting back! I’ll pass your warning message request to team internally for consideration. 

Please do let me know if there is anything else I can help with, thank you. 

 

 

 


Paul Velleux

I’m having a similar bug, but snapping artwork to pixel does not fix the problem. It’s also not a viable solution, because the artwork often needs to be precisely positioned to ensure alignment with other icons and other elements in our design system. ETA on a fix?

 


Paul Velleux

Figured it out! In my case, the parent frame was not aligned to round pixels values. once i aligned the frame above to even pixel numbers, the export worked. 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings