[SwiftUI] SVG 이미지를 로드하는 방법🖼️

[SwiftUI] SVG 이미지를 로드하는 방법🖼️

(How to Load SVG Images in SwiftUI)

이번글에서는 SDWebImage와 SDWebImageSVGCoder를 이용하여 SVG 이미지를 표시하는 방법을 알려드리겠습니다 :)

먼저 두 라이브러리를 세팅하는 방법부터, SVG 이미지를 로드하는 과정을 단계별로 정리해볼게요.

---

1️⃣ 필요한 라이브러리 설치

1. SDWebImageSwiftUI
   이 라이브러리는 SwiftUI에서 인터넷 이미지를 로드하기 편리한 기능을 제공합니다.
2. SDWebImageSVGCoder
   SVG 이미지를 SDWebImage에서 해석할 수 있도록 도와주는 코더입니다.
   – 이 패키지를 설치하면 SDWebImage도 자동으로 설치됩니다.

GitHub 링크:

• SDWebImage/SDWebImageSwiftUI
• SDWebImage/SDWebImageSVGCoder

SPM(스위프트 패키지 매니저) 추가 방법

• Xcode 상단 File > Add Packages
• 위 GitHub 주소를 복사하여 입력, 버전 선택 → Add Package

---

2️⃣ App의 init()에서 코더 등록

SwiftUI 프로젝트에서 @main으로 정의된 App 구조체가 있을 텐데,
여기서 SVG 코더를 등록해줘야 합니다.

@main
struct SvgImageTutorialApp: App {
    init() {
        SDImageCodersManager.shared.addCoder(SDImageSVGCoder.shared)
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

---

3️⃣ ATS(네트워크 보안) 설정 확인

만약 HTTP(비보안) 연결로 SVG 이미지를 가져오려면, iOS에서 ATS 예외를 설정해야 합니다.
(HTTPS 주소라면 별도 설정 없이도 가능)

• 프로젝트 → TARGETS → Info 탭 열기
• NSAppTransportSecurity 키에 예외 도메인을 설정

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <false/>
            <key>NSExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
        </dict>
    </dict>
</dict>

• example.com → 예외로 설정할 도메인 이름
• NSIncludesSubdomains → 서브 도메인(sub.example.com)도 포함할지
• NSExceptionAllowsInsecureHTTPLoads → HTTP 허용 여부
• NSExceptionRequiresForwardSecrecy → 완벽한 순방향 보안 요구 X
• NSExceptionMinimumTLSVersion → 최소 TLS 버전

---

4️⃣ SwiftUI에서 웹 이미지(SVG) 로드 예제

이제 실제로 SVG 이미지를 화면에 표시해봅시다.

import SwiftUI
import SDWebImageSwiftUI
import SDWebImageSVGCoder

struct ContentView: View {
    var body: some View {
        VStack {
            WebImage(url: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg"), 
                     options: .retryFailed)
                .onFailure { error in
                    print("이미지 로드 실패:", error)
                }
                .resizable()
                .scaledToFit()
                .frame(width: 120, height: 120)
        }
    }
}

---

🏁 마무리

1. SDWebImageSwiftUI + SDWebImageSVGCoder 설치
2. App 초기화 시점에서 SDImageSVGCoder 등록
3. ATS 예외(HTTP 필요 시) 설정
4. WebImage로 SVG URL 이미지를 표시

 

🎩Tip

• 이미지가 잘 안 뜨면 도메인 예외, HTTPS/HTTP 주소 확인
• 캐싱, 로깅 등 SDWebImage 기능도 다양하게 활용 가능합니다.