SITECORE MANIA 開発者向け技術ブログ

コードサンプル

佐藤

佐藤

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 タイプ

以上、Sitecore 10(サイトコア)でSVG画像を利用する方法でした。



※エントリーの内容・画像等は、公開時点での情報に基づきます。
※Sitecoreのバージョンによって実装されている機能が異なります。

この記事を読んだ人はこちらの記事も読んでます

Sitecore導入に関するご相談・資料ダウンロード

導入をご検討・ご依頼の方や、サービスについてご不明点がございましたらお気軽にお問い合わせください。

Sitecoreの運用問題を解決する

既にSitecoreを導入しているお客様向けサービス