AndroidApp에서 SVG를 사용할 때주의해야 할 사항

※자신에게의 비망록으로서 쓰고 있습니다

하고 싶은 일



여백을 포함하여 아래 아이콘을 SVG로 내보내고 싶습니다.


내보내기



「별명 보존」으로 내보내면 불필요한 기술을 포함해 내보내져 버리므로, 「스크린용으로 내보내기」로 내보냅니다.
파일 > 내보내기 > 화면용 내보내기 형식은 SVG를 선택합니다.
기어 마크를 클릭하여 SVG의 형식 설정을 아래와 같이 해 두면, 불필요한 태그나 기술을 최소한으로 할 수 있습니다.

SVG 형식 설정





내보낸 소스 코드


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
  <defs><style>.a{fill:none;opacity:0;}</style></defs>
  <title>ic_clear</title>
  <rect class="a" width="72" height="72"/>
  <path d="M54,21.63,50.37,18,36,32.37,21.63,18,18,21.63,32.37,36,18,50.37,21.63,54,36,39.63,50.37,54,54,50.37,39.63,36Z"/>
</svg>

또한 defs 태그는 인식되지 않으므로 편집기를 열고 rect에 직접 style을 작성합니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
  <title>ic_clear</title>
  <rect fill="none" opacity="0" width="72" height="72"/>
  <path d="M54,21.63,50.37,18,36,32.37,21.63,18,18,21.63,32.37,36,18,50.37,21.63,54,36,39.63,50.37,54,54,50.37,39.63,36Z"/>
</svg>

이제 오류없이 AndroidApp에서 SVG가 표시되는지 궁금합니다.

좋은 웹페이지 즐겨찾기