SVG export of image layers still very complex

  1. Describe the problem your experiencing and how your idea helps solve this
    I have read this blog by Figma where in they have improved export of SVG files and it’s a great step.
    With Figma’s new SVG Exports, less = more

However, the generated code for image layers is still very complex. Instead of just exporting an <image> tag, it instead creates a pattern definition which has xlink:href property as an <image> tag which is defined elsewhere, then this pattern definition is used a fill of a rectangle shape. This seems a very convoluted way of doing this.

  1. Add as much context as possible (screenshots, Figma files, mockups, etc.)
    For an example, say this simple design with an image inside a frame

The SVG code that gets generated for this is

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100" height="100" fill="white"/>
<rect x="25" y="25" width="50" height="50" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.02)"/>
</pattern>
<image id="image0" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAQAUlEQVRoQ+2a2Ytl13XGf3uf8U413Bq71dUtdcuyuiVbciIiW1KCPJHgWM5gbLCxICQYAoaAIQSSl4SQp7zmJe8mEPIoyENkSESMFIzjCVseJJdUPXd1V9WtO55xnx3WOlUt5w8wCNP1cqd9917rW99a61v7lgE8vwZ/5oEj77MoPojI+ywgPIjIg4j8ihAwv/H0Ez60AVFosQZ845VvSRiQVzWRNfSSiMhCYgzDKNDnsmazG7PciWgaT+U8o0VFXjU02pka0iCkcg338opRWTOpaxrvqZpGvx9bSyc0ONdQNp6idjjvaYDKOZzYYjwWQ1k7Pcda2FkdKBy5rHcNYWAxn/id3/LWWiJrMcbQNLLNe3/WGiIbsJpELIUBm52IlcSwksb0QsuwG+OahjgKKWrD7v4EC2pEFIihAa6BedPw7iRnf1GyqEvwntB4luOQ3DmyusZgcAiQ8lmA8w2TvORonhMHhqUkpKhqlropzqPOzcuKOAgwn/vUx7yxoX4gKAVhSBQEBEFA64QltZbVJGQ5iuiEsN4JuLjWpxNJ1Bpe3x/xqfND0iBm9/aEqhQwDMN+RF45vDGExjAtavYmGTemGcdFyVIUsN2L2O6E1L5hXjX85GDKrXnOoq5Vc4hTG92YfhISec+9eU7dNEyKmlTOLysCCcKfvvSir8R7LEFgMCYkjiJ6acwgiYmMoRNZYmsYhOIcBMZzYaXL0XzBN37wDtePpnz1uct85rHz1Fmhh1saOp2Em6MFewcZUWAYdlNK55iUNXldk1VyqmdSVGRlwSSvubsoqL1nUTuNaGQ8cWiYFzWLstDoCGsCC+vdlL3RjGlRYb72+U/7lU5CEEaEcYw3ERUGK7SIIqXQUhopIrHxfOf2Ic/tbLCRBvztK9/iqPI0XtAJ+cc/fJHLWz2S1RTvPX6a462lqjzOORa1YZ5LhCxX9yeMFyXTouQwKxhlOXVda44Wzind6rphUVbMyoJeGLKoSlVUsYVzSx12R1NG80ojZP765Zd8N0lY7qasdVNsGFLZiBJL0YANA5Y7KatpCHXBP7zyX3z2qcd49tw6f/Vv32RluKZcrvI5L7/wDF/8zctEcUBnewljDb5aYFwF6QCcbNFw72Chz03omUxm1K4WwjMrchaZwOgZ5zWjrGScFexPFyyKitQaVhLL7mjGvUWhiZwGhsSA+Ze//LJPk0QsxkYhy2lKHCfUNkBIEseR0k4S6JXXv8t3dq+zvLrCuc019m7c4uKlixwejjm4e4sndrb5p7/4Co0JqRTZkkHXYrsr4A24mmq84HiWkRWOfmrodSy4gnqWMR7nCsq8rNmfF9w5zkitx5U1d6aZRnA5gV/cm2iUVqOAjdizGjjMv379C35zdYleP2VxfEzRNFydNazGAf/8v+/yxeef4rnHH2Gcl/zdN15hnOWcv3CRD3/oCj/7+S5nNtdJOwnf/d4P2FhO+ZuXX8I2Jd+7dshr3/0xn/v4czz37DMcHo149MJ58A5/dI+7BxMmWU7lLGVVUxclVe20NI+KChpHRENWFWSLkoNpRiXUcjVrYcMw8mylnqDOqMsC8/cvf9pf2ljm7iTjP352izzuMc0dDy13uHZwyHBlwCNrA5ZWVvj2m7vga/qra7zw/Ass9VKuXr3OaDSiESSPD1mKYVGUdJbXmS4WrC/1yBZTLp7fYWdrg8888zhNWTHodUj7AwoigiDUIkI+ZzQuyMqKrKh0n7ApsU2l9ExxajSuIvA1vszIFxmNc5ivf+nT/s29u9xcOIIo5Yknr7Bz4TxvfOu/MQbqumRjY4vR8ZiV5SXGkwlRGrO1eYbJfMYHP/gBiqLi4O4duqFl0E21dN/Z36fb61Flcy3jG+tDmtoxGPTZ3twixrHVC7i0PuA7d3M+89zTLC8PaPIKV1W8+sb32bt5m6TT5ROPb7OZhnhXUJYlR+OMbJFhXMnhZE4YRJgvf/Z5/8Zb+/T6Xc7vnNfkvXptj04cUVQlSbfD1voWR0fHBGFAr99jMBhgjeHg4IDj8ZgzZ84yn825d+82Gxub2m0tNf1ej06acnFnSw24dHadThIznUue5CRJxM1bdznKHKE1fOm3n6C0IT/dn/Hv//ltzp7dYv/OHYarAz555RwfvbDO3p0D9m7d4+NPXuR4MqWoGxwB5iPPfNivbW/TH/QJbMzB4QHX9/awQcD2mYe0UVrjNPyXrzyp8mP/zm2VHlmWtVE6HpGmqTp359YtPvTUU0SR5eGHL+DqhqOjA9aHq9pbHlofaL8KaKhrz/U7B1y7e8xkOuXSIw+TpgnXbtym3+/rY1VVpJ2I0b1Dtrc3SCLL3rt7vPT0JZ69coHCidyxmD/44h976R8Hh8da+4u8pGkcVV1yePcucylzoom6qdJGqluv12N8PFHdJFJDHpeX+1y69CijowOKouCxy1e4ePFh3t27xsPntllZ6jOZznTv0fGE89tD3tm7znRRkoSGnZ3zWBsQpzF5XnDj+i02tjdVkuTzGTdv31bK9Xtdjkcj5uMRv/fRJ6jKikfPrGF+/wuf94eHI975xS6dbk8jc3w8Jgo8xjc4b6illOYlosmkUYom0z/xQ8TIyUtBU8Si94YiLxiub9BfXuIjT32InbNbLC/1NTFpaoos450bt7HGsjFcoShLup0Oizznxq19puMxlx65wIXz58F4JrMZP/zhjzgcjTQ/pOgsDwbM5jPy2RSzevYhLw1IeD9fZORFqdwVLqdJwNFooRZHcUxdOcLQYoQaosesRTSmiEZxTr4nj75pWkVc1RhjSXpdAhPw4osvcGZrncks4+aN69RVyfrqsp65u7tLKVrSeM3HbhqxOlxheWXI5cuP89Ofv8UTj13ixz/5GT9/e1eVutiwvb3Ondv7mM7Kaourq/HS+rwhiEWag7cB3lttZv7k1kgQTJOQQb9VARKxLCsoq1KNDsNQUXbSB0Ql1BXeeULd01OVGd45fa+hwYnqFaluDHGS4vR9RxKFGBvQGawwWFpmY+dhHnnkHFVZ8Ob3f8RsMlEKtqA5zOow9Y032ozEAKGJEdvFESxJHKokryoVtHgv84YnMCL3oGkEgIDGRMq2MDA6T4hT7SESLWkSLQWNVIuTuSeILHVZE4SWXjcmy2psaNWZOGnPTZKYuokxgVVFceEDF5nPFlx76y3qMsd4R11VmE439IJGRwYkNUzQsSq9jZHK0iaDCDgpBvrKS/6IVW2q2MBo5EwQyAbYSACJFBExRsqxRlh8sDJ1nAxwUihklkkjoijQ/CtzEYEQSkSMp9+N9ex5LpFTJBU8aarCItlPQep0Ix0JpVxKuOWwKAmV/51uhOIrEXON5kjtPLUYJnVZnWodUXa2oyGRyH0pCtbQ78U6wZV1Q5Y3lLWhduj+NkANl1DJHsZanUy99ZSlU+cSC7V3BFpRvLIlm5fkJ+JSnOt0QsxgKfYt0pYolM1EKFqiKNQDirymlpPV7ZOH+1VLotY6oLL9ZJ8wlkIg+wiqhlKkvjiP0ZG6HWFDgigkL2rKqqF2Th2WuUWalUieMPA6d9RVo9QPI0ue1UpHeZ7GUq5DBdic3e54oUQsdLBt0kmZPYVb6KY4e0FRWookkNfxVaMntBIqCt2kcqmU8FTacSWqPebTqUY8DmQjoWujTTErapIkbYdbAUNEYuZI4uDknspTlyXTSaniWUpVVTriKNDXeSazgOSlxXzw0b5PkoCuzBtijCAZBcpPNdwEeikgyM/mju21hEXhKEpHGodEkSE7oUEodEwt05nnaJyzvr3Bx559krfevs713RuUdUWvGxKHnjg2zOeS6HKG5B/kuVwuOH0/TS3dJOTouMI3Fa62OBPo2rJuLyHGU0eaWH1uVlcSr81P0QzUu25qGfTkhDappUpNZrXqoX4/0llCAbJGq5oo1bVhl1rUd+M0F6JOyuUrV7h8ZYfFLOf69RG7u29z796Yqih0XA4jT5Y1LPWtDnB5XnN4XNFNBEjoduRRaGdIQ2nMTvNI8lMqrTBosXAscjDnNmPf7VjCKGivViJVLtqd88KRlZ7hckBZnd6wCJqRctM0Fb1eohWucgFxEnFme5PhcIMzZ87w0Jk1bXCz+YLZvGA8nnF4eMzx0SHvXr3JdLJQKssYLHSTiinREFq2hcSwtRHhGqPGF5XQyioIQu0kEmdAxhcz6Efa7oSzkuTyQZ43hKHRCiJdW96U3Neubo0+xp2ETpJq911d6TMc9tlcX6EoPIdHU73nCoJI9dX6+ipJDEkc00kjalcxneUcHk5YLHKORmON5N39Y80heS4skKO1JJc1rnba28RpYxvSKMG5SitgXXnMcJj6JBbJISFz2pyk0ouxUl2EPlIMxKgwDFTtSjXq9Tq6tqwqlTMiM0RGSWfvdbsUhQPb6HQnI7nM8WKcGOSaWkt0XraXDWKc7C02lHlBXlTM53MquW2R6x693WkLTlmJoG1vXySP28LTYDa3u0I4NUAOkvXCw16vSxzL9Y/IDgmvcLUtVdqpjdxMtuJQ1hgTEMUhadpKEdlPIOx0+koTmSIjmf9P9pDZRiSGACSziqjY++fLRaGX6hXraCxry7rWs+bz7H6DjiNDVTVKM7O23vdigChPcVsSWhwR7eTqtkG28uK9m0gRa9JbRIKI3pLeoF33RNuIY5IvgmhRlFqal5Z6uq+gKj1CthUtJqpanJM1pTjTvKcgTltXoFVUvupVAkVRTFEW7d5OCkaBObezoX2skjslOaSRsivkapvjaX8QtE4Ts3XMEMqsfSLr2/Vtjmlnt5airNhYX1MjZDQQAFq50lZJvcc6QUqeK0Va3BR1WdvmhNC97Wdig/QQoWE7R4gyDzArqz3ZtdVXgtRJBGShSvKTN+Tw0+4u8kL+Wkq1DbSloDgWtFHVStbwR5/7XWbzMa9+842WbqrnWgNPRaXeN+sNuteElmRvBWk7Hug6+Uzek4lQqHfiRCuRLGZ5pXVEkRBR18qmk/InG3ut8eLQKdJayUQBB/J+20/EAb2DlUhFkRYOocrX/vxPeOfqLq+++jqhrP/lvSVRFfU2MqfAtV2+lTynzrQRbKVSe9nfrjlF1wyWOnobf7pAZbpT39TTVpqcGvDeYWK8rJNEbCMikWm5rHs1Ii5rvvpnX+Ht3V1ee+1/2mFMHZayLr3DqViUSiZaQyJxaljrRBuZFuCWHfI9fW3lexKXll6m109UNIoRwlMxSFAWaunPDVGk7yu1VLm3tDnlsDgiX9AbSblcFimvezuqSn6/aH/XEBGq9AvaMnzfYVHNShe5eqpP6NcWGTG2rnSOuC9KTxlwP3on1DdpJ2odMba9TDgdgGjH2dMfbWRNm6wtelL35bnSS5O3HT1bbrbqVRCTNfr7SdyOwVp7tMf+Ulqf5J98p03SNu9OgVGWqMJu80OAks//v70P/vPhhM7vk4cHP0+/TwJx34wHEXkQkV8RAr821Po/AEZDA1JWsG8AAAAASUVORK5CYII="/>
</defs>
</svg>

Instead of this complex code, it could easily have been a single <image> tag without the need of any <rect>, <defs>, <use> and <pattern> tags

  1. Ask questions to bring the community into the conversation
    (e.g. Does anyone else experience this? Is anyone using a plugin or workaround to help solve this?, etc.
    Does Figma have any plan to simplify SVG for image layers?
    Or, is there some other external tool which can help me simplify SVG generated here. I have used SVGO but it doesn’t simplify it further.

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