Sitecore 10(サイトコア)でSVG画像を利用する方法

今記事ではSitecoreでよく使う画像アイテムを、SVG画像に対応するためにはどうするべきかについて記載していこうと思います。

まずSVG画像に対応するにはconfigの追加設定が必要です。
未設定の場合、Configとサイトの設定についてを参考にし下記の設定を追加します


    
        
            
            
        
        
            
              
                
              
              
                
              
            
            
                
                  image/svg+xml
                  false
                  system/media/unversioned/image
                  system/media/versioned/image
                  
                  
                    
                      png
                    
                    150
                    150
                    #FFFFFF

設定を行わなかった場合、SVG画像をImageフィールドで選択すると下記のようなエラーが出ます。

MIME タイプ

設定を行った後にSVG画像をアップロードすると、メディアアイテムのMime TypeがSVGのものになり、SVG画像をSitecoreで画像として扱えるようになります。

MIME タイプ

設定後、Imageフィールドで画像を選択すると問題なく設定できるようになります。

MIME タイプ

下記のコードでViewレンダリングを表示させてみます。

  @using Sitecore.Data.Items;
  @using Sitecore.Data.Fields;
  @using Sitecore.Resources.Media;
  @{
  
      // ThumbnailImage
      ImageField imageField = Sitecore.Context.Item.Fields["ThumbnailImage"];
      var image = new MediaItem(imageField.MediaItem);
  
      // URLの取得
      string url = MediaManager.GetMediaUrl(image);
  }

表示結果は下記のとおりです

MIME タイプ

問題なくSVG画像が表示されているかと思います。

また、特殊な例ではありますが、imgタグではなくsvgタグで出力させたいこともあるかと思うので、こちらについても説明します。

下記の処理を加えると、svgタグで出力することもできます。

RenderSvgImageのメソッドを加えます。

  public class RenderSvgUtil
  {
      public MvcHtmlString RenderSvgImage(MediaItem mediaItem)
      {
          Assert.ArgumentNotNull(mediaItem, "mediaItem");

          string result;

          using (StreamReader reader = new StreamReader(mediaItem.GetMediaStream(), Encoding.UTF8))
          {
              result = reader.ReadToEnd();
          }

          XDocument svg = XDocument.Parse(result);

          if (svg.Document?.Root != null)
          {
              result = svg.ToString();
          }

          return new MvcHtmlString(result);
      }
  }

RenderSvgImageを使用して、svgデータを文字列として出力します。

  @using Sitecore.Data.Items;
  @using Sitecore.Data.Fields;
  @using Sitecore.Resources.Media;
  @using RenderSvgUtilのネームスペース
  @{
      // ThumbnailImage
      ImageField imageField = Sitecore.Context.Item.Fields["ThumbnailImage"];
      var image = new MediaItem(imageField.MediaItem);
      var url = RenderSvgUtil.RenderSvgImage(image);
  }
  @url

以上で下記のようにSVGタグでの出力が行えます。

MIME タイプ