WPFでSVGを使う：レンダラーかXAMLのDrawingを選ぶ

SVGがブラウザーで開いても、WPFのImageへファイル名を渡すだけでは同じ描画処理は得られません。まず、アプリに渡すものを、ライブラリが処理するSVG、WPFネイティブの描画オブジェクト、ラスター出力から選びます。

WPFの組み込み画像コーデックにはPNGやJPEGがありますが、SVGは一覧にありません。ImageはDrawingImageも表示できるため、ベクター表示は必ずしもSVGファイルの直接読み込みではありません。Microsoftは、画像とDrawingを画像ソースにする方法を別々に説明しています。

このガイドは独自のしおりアイコンで選択を具体化します。以下のSVGとXAMLは手書きで、変換ツールのベンチマークやWindowsアプリの撮影ではありません。

ファイルを変える前に表現方法を選ぶ

これらはアプリが表示するオブジェクトの選択です。デザイナーが編集可能なSVGマスターを保持するかは別です。アプリへPNGを渡してもマスターは保持します。

まず小さなネイティブDrawingImageを試す

単純なアイコンでは、手書きのDrawingが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>

既存WPFウィンドウのGridなどのレイアウトコンテナーに、次のImageを置きます。

<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>

2つの見える描画オブジェクトは、しおりと円を別々に表します。透明矩形は、周囲の余白を含む120 × 80の描画境界全体を確立します。後の形状を切ったり、XAMLをSVG文書にしたりはしません。

座標は意図した作成上の選択です。2つのコードを比較すると、しおりの点、円の中心と半径が同じです。確認できる小さな手動の置き換えであり、すべてのSVG機能をXAMLへ変換する方法ではありません。

元ファイルはXMLとして確認しましたが、WindowsのWPFアプリでビルド・描画していません。採用前に自分のプロジェクトで試してください。

再利用する前に境界とブラシを確認する

指定サイズから始め、しおり下部の切り欠きが見え、円が離れていることを確認します。次に、横長や縦長の配置枠を試します。Stretch="Uniform"は使用可能領域に収めながら比率を保ちます。Microsoftの画像の伸縮の説明に記載があります。

コーラルのBrushを別の色にします。ネイティブ描画オブジェクトの意図した編集であり、任意の読み込みSVG部品にも同じ便利な操作がある証拠ではありません。

中心からずれるなら、描画境界をSVGのviewBoxと余白と比較します。輪郭が正しくても、配置枠内で占める割合は異なる場合があります。最終画像を導入するときも、この単純な基準を保持します。

SVGを入力にするならレンダラーを使う

手でネイティブ形状を管理するのが現実的でない場合は、WPF向けにSVGを明示的に読み込むライブラリを評価します。SharpVectors.WpfパッケージはSVGの解析、変換、表示コンポーネントを提供します。追加前に現在のバージョン、対象フレームワーク、依存関係を確認する場所は、パッケージページです。

SharpVectorsの導入ドキュメントは、WPF描画オブジェクトへの変換と画像ベース表示の例を説明します。通常のビットマップ処理へSVGのファイル名のデコードを求める方法とは異なります。

最初に独自しおりをライブラリ入力にし、その後実際の画像へ置き換えます。次を別々に確認します。

1. 読み込み： 選んだ例がプロジェクト内のファイルやアプリのリソースを正しく見つけて読み込めるか。
2. 表現： 用途に応じてAPIが描画オブジェクトを返すか、XAMLを生成するか、ビットマップを描くか。
3. 見た目： 実行アプリで切り欠き、離れた円、色、余白が正しいか。
4. 配布： 対象マシンでランタイムアセンブリや他の素材が必要か。

インストール済みリリースに合う例に従います。SharpVectorsはIncludeRuntimeを説明し、TextAsGeometryを非推奨とし、2.0の名前空間変更を示しています。古いコードの設定をコピーする前に見直す理由であり、1つの設定が永久に適切とは想定しません。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で必要です。

よくある質問

WPFのImageはSVGを直接読み込めますか？ 文書化された組み込みコーデックにSVGはありません。SVG対応ライブラリ、DrawingImage経由のネイティブ描画オブジェクト、PNGなどの対応ラスター形式を使います。

DrawingImageはSVGファイルと同じですか？ いいえ。WPFの描画オブジェクトを表示します。SVGライブラリで作るか、この小さな例のように直接作成できます。

UWPのSvgImageSourceの例をWPFで使えますか？ WPFの組み込みAPIと扱わないでください。別の名前空間とフレームワークの参照です。実際のアプリ向けのコードと依存関係を選びます。

SVGからXAMLへの変換はすべての効果を保ちますか？ 想定しないでください。変換ツールの機能を確認し、文字、境界、別形状、効果を含む画像を対象アプリで確認します。

参考資料

1. Microsoft — WPF画像の概要 — 組み込みビットマップ形式と伸縮の動作。
2. Microsoft — Drawingを画像ソースに使う — DrawingImageと描画オブジェクトの構造。
3. SharpVectors — 導入 — WPF描画変換、ランタイム設定、移行の注意。
4. NuGet — SharpVectors.Wpf — 現在のパッケージと互換性情報。
5. Microsoft — UWPのSvgImageSourceクラス — 混同されやすいAPIのフレームワークと名前空間の境界。

素材一式を置き換える前に、1つのWPFの方法を選び、小さなデザインを比較します。ラスターの復元が必要なら、編集可能なSVG候補を準備し、形を確認してから、選んだ表現をアプリで試します。