WPF에서 SVG 사용하기: 렌더러 또는 XAML 그림 선택하기

SVG가 브라우저에서 열린다고 파일 이름을 WPF의 Image에 넣었을 때 같은 렌더링 파이프라인을 얻는 것은 아닙니다. 먼저 애플리케이션이 실제로 받을 대상을 선택하세요. 라이브러리로 처리한 SVG, 네이티브 WPF 그리기 객체, 래스터 내보내기 중 하나입니다.

WPF의 기본 이미지 코덱에는 PNG와 JPEG가 포함되지만 SVG는 나열되어 있지 않습니다. Image 컨트롤은 DrawingImage도 표시할 수 있으므로 벡터 표시가 SVG 파일을 직접 불러오는 것을 뜻할 필요는 없습니다. Microsoft는 이를 별도의 이미징 및 그림 소스 방식으로 설명합니다.

이 안내에서는 직접 만든 책갈피 아이콘으로 선택을 구체화합니다. 아래 SVG와 XAML은 손으로 작성했습니다. 변환기 벤치마크나 Windows 애플리케이션 캡처가 아닙니다.

파일을 바꾸기 전에 표현 방식 선택하기

이 선택은 애플리케이션이 표시할 객체에 관한 것입니다. 디자이너가 편집 가능한 SVG 마스터를 유지해야 하는지는 결정하지 않습니다. 앱이 PNG를 받더라도 마스터는 보존하세요.

작은 네이티브 DrawingImage부터 시도하기

단순한 아이콘은 직접 작성한 그림으로 SVG 파서를 추가하지 않고도 유용한 기준을 얻을 수 있습니다. Microsoft는 Image.Source를 DrawingImage로 설정한 뒤 Drawing 속성에 그림을 지정하는 구조를 보여 줍니다. 다음 원본 예제는 그 문서화된 패턴을 따릅니다.

다음은 청록색 책갈피와 별도의 산호색 원으로 된 SVG 디자인입니다. 편집기에서 비교할 소스가 필요하다면 bookmark.svg로 저장하세요.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

이 Image를 Grid 같은 기존 WPF 창의 레이아웃 컨테이너 안에 넣으세요.

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

보이는 두 그리기 객체는 책갈피와 원을 각각 정의합니다. 투명한 사각형은 아트워크 주변의 빈 여백을 포함해 예제의 전체 120×80 그리기 경계를 설정합니다. 이후 도형을 클리핑하거나 XAML을 SVG 문서로 바꾸지는 않습니다.

좌표는 의도적으로 정한 작성 값입니다. 두 코드를 비교하세요. 책갈피는 같은 점을 사용하고 원은 같은 중심과 반지름을 사용합니다. 이는 검토할 수 있는 작은 수동 변환이며 모든 SVG 기능을 XAML로 옮기는 공식이 아닙니다.

소스 파일은 XML로 확인했지만 Windows WPF 애플리케이션에서 이 예제를 빌드하거나 렌더링하지는 않았습니다. 채택하기 전에 프로젝트에서 테스트하세요.

재사용하기 전에 경계와 브러시 확인하기

제공된 크기에서 시작하세요. 책갈피 아래쪽 홈이 계속 보이고 원이 떨어져 있는지 확인하세요. 그런 다음 더 넓거나 높은 레이아웃 슬롯을 시도하세요. Microsoft의 이미지 늘이기 안내에 설명된 대로 Stretch="Uniform"은 사용 가능한 영역에 맞추면서 비율을 유지합니다.

산호색 Brush 값을 다른 색상으로 바꾸세요. 이는 네이티브 그리기 객체를 의도적으로 편집하는 것이며 임의로 가져온 SVG 부분도 같은 편리한 제어 기능을 제공한다는 증거는 아닙니다.

그림이 중앙에서 벗어나 보인다면 경계를 SVG의 viewBox 및 빈 여백과 비교하세요. 실루엣이 정확해도 레이아웃 슬롯에서 차지하는 비율이 달라질 수 있습니다. 최종 아트워크를 추가할 때도 이 단순한 기준을 유지하세요.

SVG가 입력으로 유지된다면 렌더러 사용하기

네이티브 도형을 손으로 관리하기가 어렵다면 WPF용 SVG를 명시적으로 읽는 라이브러리를 평가하세요. SharpVectors.Wpf 패키지는 SVG 파싱, 변환, 보기 컴포넌트를 제공합니다. 프로젝트에 추가하기 전에 현재 버전, 대상 프레임워크, 의존성을 확인하기에 패키지 페이지가 적절합니다.

SharpVectors의 시작 안내는 WPF 그리기 객체로의 변환과 이미지 기반 표시 예제를 설명합니다. 이는 일반 비트맵 파이프라인에 SVG 파일 이름을 디코딩하도록 요청하는 것과 다른 방식입니다.

먼저 원본 책갈피를 라이브러리 입력으로 사용한 뒤 실제 아트워크로 바꾸세요. 다음 확인은 분리해서 진행하세요.

1. 로딩: 선택한 예제가 프로젝트에서 파일 또는 애플리케이션 리소스를 찾나요?
2. 표현: 사용 목적에 맞게 API가 그리기 객체를 반환하거나 XAML을 생성하거나 비트맵을 렌더링하나요?
3. 모양: 실행 중인 애플리케이션에서 홈, 분리된 원, 색상, 빈 여백이 올바른가요?
4. 배포: 대상 컴퓨터에 라이브러리의 런타임 어셈블리나 다른 에셋이 필요한가요?

설치한 릴리스에 맞는 예제를 따르세요. SharpVectors는 IncludeRuntime 설정을 설명하고 TextAsGeometry를 사용 중단 예정으로 표시하며 버전 2.0의 네임스페이스 변경을 안내합니다. 이는 설정을 복사하기 전에 오래된 코드를 검토해야 하는 이유이며 하나의 변환 설정이 무기한 적절하다고 가정할 이유가 아닙니다. SharpVectors 문서

글자가 있는 로고는 소스뿐 아니라 실제 대상 출력도 살펴보세요. SVG 글꼴 변경 안내는 글꼴에 의존하는 텍스트와 외곽선으로 유지되는 글자의 차이를 설명합니다. 텍스트 변환은 편집 가능한 내용을 바꿀 수 있으므로 원본 디자인 파일을 보관하세요.

다른 XAML 프레임워크의 SvgImageSource를 가져오지 않기

이 문제를 검색하다 보면 Microsoft의 SvgImageSource 참조를 접할 수 있습니다. UWP 클래스 문서는 이 유형을 Windows.UI.Xaml.Media.Imaging에 둡니다. 이는 WPF의 System.Windows 컨트롤 및 미디어 클래스와 다른 API입니다.

네임스페이스나 패키지를 추가하기 전에 예제가 명시하는 프레임워크를 확인하세요. XAML 마크업이 비슷하다고 UWP나 WinUI 이미지 소스가 WPF 기본 기능이 되지는 않습니다. 다른 프레임워크의 해결책은 그곳에서는 유효해도 자신의 데스크톱 프로젝트에는 맞지 않을 수 있습니다.

PNG로 충분한지 결정하기

필요한 크기를 알고 애플리케이션에서 도형을 편집할 필요가 없다면 PNG 내보내기는 합리적인 전달 방식입니다. 해당 크기로 내보내고 실제 배경에서 투명 가장자리를 비교하며 가장 크게 표시되는 경우를 확인하세요. 비트맵의 레이아웃 크기를 키운다고 소스 경로가 재생성되지는 않습니다.

렌더링 라이브러리에 시간을 쓰기 전에 SVG 안의 내용도 확인하세요. 래스터 이미지만 포함한다면 감싼 파일을 가져와도 그 그림이 편집 가능한 도형이 되지 않습니다. 래스터를 포함한 SVG 안내는 확인할 사항을 보여 줍니다. 아이콘 모음에는 전체 세트에 동일한 여백 및 실루엣 확인을 적용하세요. UI 아이콘 준비 작업 흐름은 이 아트워크 단계를 다룹니다.

책갈피나 로고가 PNG 또는 JPG로만 남았다면 PerfectVector의 이미지 벡터화 작업 흐름으로 편집 가능한 SVG 후보 파일을 준비할 수 있습니다. WPF 전달 방식을 선택하기 전에 복원된 실루엣, 홈, 분리된 세부 요소를 살펴보세요. 벡터화는 아트워크를 준비하며 WPF 렌더러를 설치하거나 네이티브 XAML 변환을 보장하지 않습니다.

더 폭넓은 이미지 벡터화 안내는 소스 복원 단계를 설명합니다. 소스가 준비되어도 애플리케이션 확인은 WPF에서 해야 합니다.

FAQ

WPF Image가 SVG 파일을 직접 불러올 수 있나요? WPF의 문서화된 기본 이미지 코덱에는 SVG가 포함되지 않습니다. SVG 지원 라이브러리를 사용하거나 DrawingImage로 네이티브 그리기 객체를 제공하거나 PNG 같은 지원 래스터 형식을 제공하세요.

DrawingImage는 SVG 파일과 같은 것인가요? 아닙니다. DrawingImage는 WPF 그리기 객체를 표시합니다. SVG 라이브러리가 이 객체를 만들 수도 있고, 여기의 작은 예제처럼 직접 작성할 수도 있습니다.

UWP SvgImageSource 예제를 WPF에서 사용할 수 있나요? WPF 기본 API로 취급하지 마세요. UWP 참조는 다른 네임스페이스와 프레임워크에 속합니다. 실제 애플리케이션에 맞는 코드와 의존성을 선택하세요.

SVG를 XAML로 변환하면 모든 효과가 보존되나요? 그렇게 가정하지 마세요. 변환기의 문서화된 기능을 확인하고 텍스트, 경계, 별도 도형, 효과를 포함하여 대상 애플리케이션에서 아트워크를 살펴보세요.

Sources

1. Microsoft — WPF 이미징 개요 — 기본 비트맵 형식과 이미지 늘이기 동작.
2. Microsoft — 그림을 이미지 소스로 사용하기 — 네이티브 DrawingImage와 그리기 객체 구조.
3. SharpVectors — 시작하기 — WPF 그림 변환, 런타임 설정, 문서화된 마이그레이션 주의 사항.
4. NuGet — SharpVectors.Wpf — 현재 패키지 식별 및 호환성 정보.
5. Microsoft — UWP SvgImageSource 클래스 — 흔히 혼동하는 API의 프레임워크 및 네임스페이스 경계.

전체 에셋 세트를 교체하기 전에 WPF 방식 하나를 선택하고 작은 디자인을 비교하세요. 래스터 아트워크를 복원해야 한다면 편집 가능한 SVG 후보 파일을 준비하고 도형을 살펴본 뒤 애플리케이션에서 선택한 표현 방식을 테스트하세요.