AndroidIDE

[Android Studio] SVG 아이콘 추가 방법 (Vector Asset 사용)

떠돌이개발자

Android studio 에서 svg 아이콘은 어디에 추가해야되는가? Android Studio에서 SVG 아이콘은 주로 res/drawable 폴더에 추가한다.
다만, 그냥 복사 붙여넣기보다는 Vector Asset으로 추가하는 것이 가장 일반적이고 권장되는 방식이다.

SVG 아이콘 추가 방법 (Vector Asset 사용)

ndroid Studio의 Vector Asset에서 “Local file (SVG)” 선택 후 가져오기하면 벡터로 변환된다.

  1. res > drawable 폴더를 우클릭 →
    New > Vector Asset 선택
  2. “Asset Type”에서 “Local file (SVG, PSD)” 선택
  3. “Path”에서 SVG 파일 선택
    → SVG 미리보기가 나오면 확인
  4. 파일 이름 확인 후 “Next” → “Finish” 클릭

👉 이 과정이 끝나면 res/drawable 폴더에 .xml로 변환된 벡터 리소스가 생긴다.



주의사항

  • SVG에는 Android에서 지원하지 않는 필터나 태그(<style>, <use>, <foreignObject> 등)가 있을 수 있어요. 이럴 땐 SVG를 간단한 형태로 정리하거나, Figma 등에서 다시 내보내기(export) 하면 문제 해결돼요.
  • 만약 SVG가 복잡해서 안 되는 경우엔 PNG로 바꾸는 것도 고려할 수 있어요.

만약, 아래와 같은 svg를 가지고 있다면 chatGPT한테 벡터 이미지로 변경요청하면 바로 만들어준다.

<svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <line x1="20" y1="30" x2="80" y2="30" stroke="white" stroke-width="7" stroke-linecap="round"/>
      <line x1="20" y1="50" x2="80" y2="50" stroke="white" stroke-width="7" stroke-linecap="round"/>
      <line x1="20" y1="70" x2="80" y2="70" stroke="white" stroke-width="7" stroke-linecap="round"/>
      <path d="M50 20 Q 60 10, 70 20" stroke="#4FC3F7" stroke-width="5" stroke-linecap="round"/>
      <path d="M50 20 Q 40 10, 30 20" stroke="#4FC3F7" stroke-width="5" stroke-linecap="round"/>
       <circle cx="50" cy="15" r="4" fill="#4FC3F7"/>
    </svg>

SVG를 자동 변환하려면:


제미나이에게 svg 만들어달라고 요청하면 아래처럼 html 파일로 바로 볼 수 있게 만들어준다.

<!DOCTYPE html>
<html>
<head>
<title>App Icon 3: Layered Signal</title>
<style>
  body {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background-color: #1A237E; margin: 0;
  }
  .icon-container {
    width: 128px; height: 128px; background-color: #1A237E; border-radius: 24px;
    display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
</style>
</head>
<body>
  <div class="icon-container">
    <svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <line x1="20" y1="30" x2="80" y2="30" stroke="white" stroke-width="7" stroke-linecap="round"/>
      <line x1="20" y1="50" x2="80" y2="50" stroke="white" stroke-width="7" stroke-linecap="round"/>
      <line x1="20" y1="70" x2="80" y2="70" stroke="white" stroke-width="7" stroke-linecap="round"/>
      <path d="M50 20 Q 60 10, 70 20" stroke="#4FC3F7" stroke-width="5" stroke-linecap="round"/>
      <path d="M50 20 Q 40 10, 30 20" stroke="#4FC3F7" stroke-width="5" stroke-linecap="round"/>
       <circle cx="50" cy="15" r="4" fill="#4FC3F7"/>
    </svg>
  </div>
</body>
</html>

Related Posts

error: Content is protected !!