WPFアプリケーションでSVGファイルを表示したい!

なんで標準で使えんとや。。

こんにちは、あらたまです!

WPFアプリケーションでSVGファイルを表示したいことがありませんか?ありますよね。はい、あります。

画像ファイルと違って、拡大・縮小しても綺麗なままですし、フリー素材も豊富です。

SVG → XAMLと変換しておいて使う方法もありますが、SVGファイルのままで使用できれば後で違う画像に差し替えるときも気軽です。

WPFの標準機能ではSVGを表示することができない。。

ちなみにUWPアプリケーションではSvgImageSourceなるクラスがあって、デフォルトでSVGに対応しているようです。

しかし、WPFアプリケーションはデフォルトではSVGに対応していません。

そこで便利な拡張機能を使わせてもうらうことにします。

SharpVectors
https://github.com/ElinamLLC/SharpVectors

SharpVectorsの使用方法

SharpVectorsはNuGetで取得して使うことができます。

VisualStudioのツールメニュー から
NuGetパッケージマネージャコンソールを起動します。

パッケージマネージャコンソールが起動したら、下記のコマンドを入力しSharpVectorsをインストールします。


Install-Package SharpVectors.Reloaded -Version 1.1.0

SVGを表示する

インストールが完了したらXAMLで下のように書くだけ!超かんたん。


<Window x:Class="WpfApp1.MainWindow"
        ... 省略 ...
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        ... 省略 ...
        >
    <Grid>
        <svgc:SvgViewbox Height="30" Width="30" Source="/Images/outline-add_box-24px.svg" />
    </Grid>
</Window>

ついつい忘れがちなところとして、VsisualStudioのソリューションエクスプローラーでSVGファイルを右クリック、 コピーの設定をしてくださいね。