SVG画像でのSchema.orgロゴマークアップの使用

素晴らしいロゴを作成し、AIおよびSVG形式で保存しました。ロゴはサイト全体に何度も表示され、ロゴをPNG形式で保存してサーバー側の不要なリクエストを行うよりも良いので、サイトでSVGファイルを使用したいと思います。今、これは以下を使用してうまく機能します：

<svg id="my-logo" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
  </g>
</svg>

Schema.org logoマークアップを使用すると問題が発生します。使用：

<svg itemscope itemtype="http://schema.org/Organization" id="my-logo" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image itemprop="logo" x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
  </g>
</svg>

予想通り、W3C検証に失敗し、次のエラーメッセージが表示されます。

• この時点では、要素svgでは属性itemscopeは許可されていません。
• この時点では、要素svgで属性itemtypeは許可されていません。
• この時点では、属性itempropは要素画像では許可されていません。

W3Cの検証は必須ではないことはわかっていますが、GoogleとW3Cの両方を満たすソリューションを用意したいと思います。

一部のW3Cの達人が私を正しい方向に向けることができると確信しています。1つの解決策である可能性があることを知っているので、可能であればDATA URIを使用しないようにしますが、DATA URIが間違っているかどうかに応じて修正しますキャッシュできません。

microdataは、HTML5で定義されているHTML要素でのみ使用できます。HTML5によると、svg要素はHTML名前空間にありません。WHATWGのHTML仕様は、Microdataが機能しないことを明示的に述べていますsvg（2014-01-02で引用）：

現在、itemscope、itemprop、および他のマイクロデータの属性のみがHTML要素のために定義されています。これは、「itemscope」、「itemprop」などのリテラル名を持つ属性によって、SVGなどの他の名前空間の要素でmicrodata処理が発生しないことを意味します。

（a）無意味なdiv要素を追加できます：

<div itemscope itemtype="http://schema.org/Organization">
  <div itemprop="logo">
    <svg>…</svg>
  </div>
</div>

microdataパーサーはdiv、logoプロパティを持つ要素のコンテンツに組織のロゴが含まれていることを理解します。ただし、svg要素はHTMLの一部ではないため、要素から正しい値（=画像のURL）を取得するためのルールは定義されていません。したがって、Microdataパーサーがこの情報を使用して何かを実行する可能性はほとんどありません（たとえば、ロゴを別のコンテキストで表示する）。要素
でを使用すると文字列値が生成itempropされることに注意してください。これはSchema.orgがプロパティに期待するものではありません。divlogo

（b）「hidden」を使用して情報を複製できますlink：

<div itemscope itemtype="http://schema.org/Organization">
  <svg>…</svg>
  <link itemprop="logo" href="logo.svg" />
</div>

（c）img要素を使用できます（SVGファイルを使用imgするcaniuse.comによると、HTML5でインラインでSVGを使用するよりも多くのサポートがあります）。

<div itemscope itemtype="http://schema.org/Organization">
  <img itemprop="logo" src="logo.svg" alt="ACME Inc." />
</div>

（d）RDFa Liteを代わりに使用できるかもしれませんが、「混合」名前空間で機能するかどうかはわかりません。ただし、SVG 1.2 Tinyの場合、RDFaをelement で使用できます。metadata

公式ドキュメントで提案されているように、meta / linkタグを介して自分のロゴを参照するだけです。http：//schema.org/docs/gs.html#advanced_missing

<!-- schema.org item wrapper -->
<div itemscope itemtype="http://schema.org/Organization">
  <!-- This is Your original SVG markup -->
  <svg id="my-logo" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="scale(0.1)">
     <image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
   </g>
  </svg>
  <!-- schema.org itemprop markup -->
  <link itemprop="logo" content="my-logo.svg" />
</div>

編集：unorの提案に従ってから<meta>に変更<link />されました。

もう1つの方法は、画像を.svgファイルとして保存することです。任意のテキストエディターを使用してこのファイルを作成し、SVGマークアップに貼り付けることができます。次に、.pngまたはの場合と同じようにマークアップを配置します.jpg。

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/">Home</a>
  <img itemprop="logo" src="http://www.example.com/logo.svg" />
</div>