Awesome tip about exporting to SVG with embedded images

General Discussion
1

When generating an SVG from a frame that has a PNG image inside and a drawing or some text, usually the resulting file exported from Figma will be huge.

You can get a much more smaller file —2× smaller or more— following these steps.

  • Output SVG as normally from Figma
  • Output just the PNG of the sub-element
  • Compress the PNG in TinyPNG
  • Convert the PNG to Base 64
  • Substitute the base 64 chain in your SVG file for the new code generated in the above URL
  • Save as a new file
  • Test in the browser before delivery

HT to this SocialQuotient

2 Likes
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.