플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의

Question

강사님 안녕하세요~ 피그마에서 24 아이콘 키라인 가이드에 맞춰 아이콘을 제작(union > flatten 모두 적용 완료)하여 svg로 아이콘을 전달하였으나, 플러터 개발 환경 > 배포하여 적용해보면 svg 아이콘 깨짐이 발생하는 문제를 겪고 있습니다~ svg export 플러그인, SVG 최적화( SVGOMG ) 적용하여 수정했으나, 동일하게 SVG 깨짐 현상이 해결되지 않는데요~ fill rule editer 플러그인은 아직 적용하지 않았으나, 이를 적용하지 않는 것이 문제일까요? fill rule editer도 다시 적용해 볼 예정입니다만, 해결이 될지 알 수 없어서 문의 드려봅니다! 실무에 유익한 강의 항상 감사합니다!!

DX Lab · Answer

안녕하세요 askare님 ☺ 질문 주셔서 감사합니다! 말씀해주신 내용만으로는 정확한 상황을 파악하기는 조금 어려우나, 남겨주신 설명을 바탕으로 유추해보았을 때, 아래와 같은 경우일 수 있을 것 같아 몇 가지 자료를 함께 공유드립니다. 자료 1 : Figma에서 SVG를 깔끔하게 내보내는 방법 https://levimcg.com/blog/more-control-over-figma-svg-exports/   자료 2 : SVG 사용 시 fill-rule 문제에 대한 자세한 설명 https://medium.com/thoughts-overflow/the-mystery-of-the-disappearing-holes-a-gripping-tale-of-using-svg-in-android-442f6035a452 도움이 되셨으면 좋겠습니다. 감사합니다!

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. askare님. 플러터(Flutter) 개발 환경에서 SVG 아이콘이 깨지는 문제를 해결하는 데 도움이 될 만한 정보를 제공해 드리겠습니다. SVG 파일이 깨지는 이유는 다양한 원인이 있을 수 있습니다. 플러터의 경우 특히 SVG 해석 과정이 다른 환경과 다를 수 있기 때문에 몇 가지 점검이 필요합니다. 아이콘의 크기 및 여백 확인 : 플러터에서 아이콘을 불러오는 경우 SVG 뷰박스(viewBox) 속성과 실제 아이콘 크기가 맞지 않을 수 있습니다. Figma에서 내보낼 때 아이콘의 크기와 위치를 다시 한번 확인해 보세요. SVG Export 설정 : SVG가 너무 복잡하거나 경로(path)가 너무 많으면 문제가 발생할 수 있습니다. 필요 없는 요소를 제거하고 단순화하여 SVG를 내보내 보세요. Flutter의 SVG 지원 패키지 : Flutter에서 SVG를 표시하기 위해 flutter_svg 패키지를 주로 사용합니다. 패키지가 최신 버전인지 확인하고, 관련 문서에서 SVG 지원 기능에 대한 제한 사항 및 권장 설정을 읽어보세요. Fill Rule Editor 적용 : 경로의 채우기 규칙(fill-rule)이 올바르지 않으면 아이콘이 제대로 보이지 않을 수 있습니다. fill-rule 을 확인하고 필요하다면 Figma의 Fill Rule Editor 플러그인을 사용해 보세요. 플랫폼별 테스트 : 각 플랫폼(Android, iOS)에서 SVG 렌더링 결과가 다를 수 있습니다. 모든 플랫폼에서 동일하게 깨지는지 테스트하여 문제의 범위를 좁힐 수 있습니다. 관련하여 다른 학습자분들의 경험을 공유하는 아래의 글에서 더 많은 정보를 찾을 수 있습니다: - 플러터 SVG 문제 관련 Q&A SVG 처리 관련 주요 문제를 다루는 이러한 방법들이 도움이 되리라 생각합니다. 해 보신 내용이라도 다시 검토해 보시고, 지속해서 문제가 발생하면 추가적인 정보를 바탕으로 더 진단할 수 있을 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.