가능하면 png 보다는 svg 파일을 이용하려고 하는 편인데, 가끔씩 의도한 대로 동작하지 않을 때가 있어서 골치아프다.
이번 케이스는 path 가 gradient 로 fill 되어 있는 svg 이미지에서 gradient 가 제대로 표현되지 않고 배경색으로 나오는 문제였다.
예를 들면
이렇게 나와야 하는데 실제로는 전체 글자가 흰색으로 나와서 아무 것도 보이지 않는 문제가 생긴 것이다.
chrome 이나 다른 편집툴에서 보면 다 제대로 보이는데, flutter_svg로 올리면 gradient 가 제대로 표현되지 않는 문제였다.
문제의 svg 파일은
<svg width="77" height="36" viewBox="0 0 77 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="76" height="36" fill="white" fill-opacity="0.0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.5681 13.8066V31.5186H50.2919V13.8066H46.5681ZM15.5837 14.8092H11.7167V21.3975H3.83938V14.8273H0V31.534H3.83938V24.6678H11.7167V31.5186H15.5837V14.8092ZM21.0648 30.8503C22.1788 31.4231 23.4678 31.7096 24.9318 31.7096C26.0935 31.7096 27.12 31.5345 28.0111 31.1844C28.9023 30.8184 29.6423 30.3012 30.2311 29.6328L28.2498 27.4845C27.8202 27.8983 27.3428 28.2086 26.8176 28.4154C26.3084 28.6223 25.7116 28.7258 25.0273 28.7258C24.2635 28.7258 23.5951 28.5905 23.0222 28.32C22.4652 28.0335 22.0276 27.6277 21.7093 27.1026C21.5446 26.8079 21.4248 26.4896 21.3498 26.1477H31.0666C31.0825 25.9886 31.0984 25.8215 31.1143 25.6465C31.1302 25.4555 31.1382 25.2884 31.1382 25.1452C31.1382 23.7607 30.8438 22.5751 30.255 21.5885C29.6662 20.5859 28.8625 19.822 27.844 19.2969C26.8415 18.7558 25.7116 18.4853 24.4544 18.4853C23.1495 18.4853 21.9798 18.7717 20.9454 19.3446C19.911 19.9016 19.0915 20.6814 18.4868 21.6839C17.898 22.6706 17.6036 23.8084 17.6036 25.0974C17.6036 26.3705 17.9059 27.5084 18.5106 28.5109C19.1154 29.4976 19.9667 30.2774 21.0648 30.8503ZM21.3068 23.9755C21.3688 23.5777 21.487 23.2196 21.6616 22.9013C21.9321 22.3921 22.3061 22.0022 22.7835 21.7317C23.2768 21.4452 23.8417 21.302 24.4783 21.302C25.1148 21.302 25.6718 21.4452 26.1492 21.7317C26.6266 22.0022 27.0006 22.3841 27.2711 22.8775C27.4507 23.2049 27.5707 23.5709 27.6311 23.9755H21.3068ZM40.4289 31.5186V29.9228C40.1485 30.3942 39.7666 30.775 39.2831 31.0651C38.567 31.4948 37.644 31.7096 36.5141 31.7096C35.5115 31.7096 34.6522 31.5425 33.9361 31.2083C33.22 30.8582 32.6709 30.3888 32.289 29.7999C31.9071 29.2111 31.7161 28.5507 31.7161 27.8187C31.7161 27.0548 31.8991 26.3864 32.2651 25.8136C32.6471 25.2407 33.2438 24.7951 34.0554 24.4768C34.867 24.1426 35.9253 23.9755 37.2302 23.9755H40.1902C40.1902 23.1798 39.9435 22.5592 39.4502 22.1136C38.9728 21.668 38.2328 21.4452 37.2302 21.4452C36.5459 21.4452 35.8696 21.5566 35.2012 21.7794C34.5488 21.9863 33.9918 22.2727 33.5303 22.6388L32.1935 20.0369C32.8937 19.5435 33.7372 19.1616 34.7238 18.8911C35.7105 18.6205 36.713 18.4853 37.7315 18.4853C39.6889 18.4853 41.2087 18.9468 42.2908 19.8698C43.3729 20.7928 43.914 22.233 43.914 24.1904V31.5186H40.4289ZM40.1902 26.1477V27.4606C39.9674 28.0335 39.6093 28.4711 39.116 28.7735C38.6227 29.06 38.0657 29.2032 37.4451 29.2032C36.7926 29.2032 36.2754 29.0679 35.8935 28.7974C35.5275 28.5109 35.3444 28.129 35.3444 27.6516C35.3444 27.2219 35.5036 26.8639 35.8219 26.5774C36.156 26.291 36.7608 26.1477 37.636 26.1477H40.1902ZM59.2391 31.7096C57.7273 31.7096 56.5497 31.3277 55.7063 30.5638C54.8628 29.784 54.4411 28.6303 54.4411 27.1026V21.8272H52.4599V18.9627H54.4411V15.8356H58.1649V18.9627H61.3636V21.8272H58.1649V27.0548C58.1649 27.5959 58.3082 28.0176 58.5946 28.32C58.8811 28.6064 59.2709 28.7496 59.7643 28.7496C60.3531 28.7496 60.8544 28.5905 61.2681 28.2722L62.2707 30.898C61.8887 31.1685 61.4272 31.3754 60.8862 31.5186C60.361 31.6459 59.812 31.7096 59.2391 31.7096ZM74.1718 19.1059C73.3762 18.6922 72.4691 18.4853 71.4506 18.4853C70.3526 18.4853 69.3739 18.716 68.5145 19.1775C68.0823 19.4097 67.7003 19.6921 67.3687 20.025V13.8066H63.6449V31.5186H67.3687V25.169C67.3687 24.3734 67.496 23.7209 67.7507 23.2117C68.0212 22.7024 68.3872 22.3284 68.8487 22.0897C69.3261 21.8351 69.8592 21.7078 70.448 21.7078C71.2756 21.7078 71.9121 21.9545 72.3577 22.4478C72.8192 22.9411 73.0499 23.705 73.0499 24.7394V31.5186H76.7737V24.1665C76.7737 22.8616 76.543 21.7953 76.0815 20.9678C75.62 20.1244 74.9835 19.5038 74.1718 19.1059Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint1_linear" x1="-7.16557" y1="19.2185" x2="81.734" y2="20.2984" gradientUnits="userSpaceOnUse">
<stop stop-color="#078495"/>
<stop offset="1" stop-color="#79CAD3"/>
</linearGradient>
</defs>
</svg>
이런 것이었는데, 좀 귀찮지만, 아래와 같이 <defs> ~ </defs> 부분을 <path> 전으로 옮겨주면 잘 동작한다.
<svg width="77" height="36" viewBox="0 0 77 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="76" height="36" fill="white" fill-opacity="0.0"/>
<defs>
<linearGradient id="paint1_linear" x1="-7.16557" y1="19.2185" x2="81.734" y2="20.2984" gradientUnits="userSpaceOnUse">
<stop stop-color="#078495"/>
<stop offset="1" stop-color="#79CAD3"/>
</linearGradient>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.5681 13.8066V31.5186H50.2919V13.8066H46.5681ZM15.5837 14.8092H11.7167V21.3975H3.83938V14.8273H0V31.534H3.83938V24.6678H11.7167V31.5186H15.5837V14.8092ZM21.0648 30.8503C22.1788 31.4231 23.4678 31.7096 24.9318 31.7096C26.0935 31.7096 27.12 31.5345 28.0111 31.1844C28.9023 30.8184 29.6423 30.3012 30.2311 29.6328L28.2498 27.4845C27.8202 27.8983 27.3428 28.2086 26.8176 28.4154C26.3084 28.6223 25.7116 28.7258 25.0273 28.7258C24.2635 28.7258 23.5951 28.5905 23.0222 28.32C22.4652 28.0335 22.0276 27.6277 21.7093 27.1026C21.5446 26.8079 21.4248 26.4896 21.3498 26.1477H31.0666C31.0825 25.9886 31.0984 25.8215 31.1143 25.6465C31.1302 25.4555 31.1382 25.2884 31.1382 25.1452C31.1382 23.7607 30.8438 22.5751 30.255 21.5885C29.6662 20.5859 28.8625 19.822 27.844 19.2969C26.8415 18.7558 25.7116 18.4853 24.4544 18.4853C23.1495 18.4853 21.9798 18.7717 20.9454 19.3446C19.911 19.9016 19.0915 20.6814 18.4868 21.6839C17.898 22.6706 17.6036 23.8084 17.6036 25.0974C17.6036 26.3705 17.9059 27.5084 18.5106 28.5109C19.1154 29.4976 19.9667 30.2774 21.0648 30.8503ZM21.3068 23.9755C21.3688 23.5777 21.487 23.2196 21.6616 22.9013C21.9321 22.3921 22.3061 22.0022 22.7835 21.7317C23.2768 21.4452 23.8417 21.302 24.4783 21.302C25.1148 21.302 25.6718 21.4452 26.1492 21.7317C26.6266 22.0022 27.0006 22.3841 27.2711 22.8775C27.4507 23.2049 27.5707 23.5709 27.6311 23.9755H21.3068ZM40.4289 31.5186V29.9228C40.1485 30.3942 39.7666 30.775 39.2831 31.0651C38.567 31.4948 37.644 31.7096 36.5141 31.7096C35.5115 31.7096 34.6522 31.5425 33.9361 31.2083C33.22 30.8582 32.6709 30.3888 32.289 29.7999C31.9071 29.2111 31.7161 28.5507 31.7161 27.8187C31.7161 27.0548 31.8991 26.3864 32.2651 25.8136C32.6471 25.2407 33.2438 24.7951 34.0554 24.4768C34.867 24.1426 35.9253 23.9755 37.2302 23.9755H40.1902C40.1902 23.1798 39.9435 22.5592 39.4502 22.1136C38.9728 21.668 38.2328 21.4452 37.2302 21.4452C36.5459 21.4452 35.8696 21.5566 35.2012 21.7794C34.5488 21.9863 33.9918 22.2727 33.5303 22.6388L32.1935 20.0369C32.8937 19.5435 33.7372 19.1616 34.7238 18.8911C35.7105 18.6205 36.713 18.4853 37.7315 18.4853C39.6889 18.4853 41.2087 18.9468 42.2908 19.8698C43.3729 20.7928 43.914 22.233 43.914 24.1904V31.5186H40.4289ZM40.1902 26.1477V27.4606C39.9674 28.0335 39.6093 28.4711 39.116 28.7735C38.6227 29.06 38.0657 29.2032 37.4451 29.2032C36.7926 29.2032 36.2754 29.0679 35.8935 28.7974C35.5275 28.5109 35.3444 28.129 35.3444 27.6516C35.3444 27.2219 35.5036 26.8639 35.8219 26.5774C36.156 26.291 36.7608 26.1477 37.636 26.1477H40.1902ZM59.2391 31.7096C57.7273 31.7096 56.5497 31.3277 55.7063 30.5638C54.8628 29.784 54.4411 28.6303 54.4411 27.1026V21.8272H52.4599V18.9627H54.4411V15.8356H58.1649V18.9627H61.3636V21.8272H58.1649V27.0548C58.1649 27.5959 58.3082 28.0176 58.5946 28.32C58.8811 28.6064 59.2709 28.7496 59.7643 28.7496C60.3531 28.7496 60.8544 28.5905 61.2681 28.2722L62.2707 30.898C61.8887 31.1685 61.4272 31.3754 60.8862 31.5186C60.361 31.6459 59.812 31.7096 59.2391 31.7096ZM74.1718 19.1059C73.3762 18.6922 72.4691 18.4853 71.4506 18.4853C70.3526 18.4853 69.3739 18.716 68.5145 19.1775C68.0823 19.4097 67.7003 19.6921 67.3687 20.025V13.8066H63.6449V31.5186H67.3687V25.169C67.3687 24.3734 67.496 23.7209 67.7507 23.2117C68.0212 22.7024 68.3872 22.3284 68.8487 22.0897C69.3261 21.8351 69.8592 21.7078 70.448 21.7078C71.2756 21.7078 71.9121 21.9545 72.3577 22.4478C72.8192 22.9411 73.0499 23.705 73.0499 24.7394V31.5186H76.7737V24.1665C76.7737 22.8616 76.543 21.7953 76.0815 20.9678C75.62 20.1244 74.9835 19.5038 74.1718 19.1059Z" fill="url(#paint1_linear)"/>
</svg>
path 에서 fill="url(#paint1_linear)" 과 같이 사용하기 전에 paint1_linear 가 정의되어 있어야 하는 버그가 있는 듯 하다.
(flutter_svg 1.1.4 기준)
