web-dev-qa-db-ja.com

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のない場合は私を修正しますキャッシュできません。

html5microdataschema.orgsvgw3c-validation
7
Simon Hayter

Microdataは、HTML5で定義されている HTML elements でのみ使用できます。 HTML5によると、 svg element はHTML名前空間にありません。 WHATWGのHTML仕様 明示的に言及 Microdataはsvgに対して機能しません（2014-01-02に引用）：

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

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

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

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

（b）「隠された」linkを使用して情報を複製できます。

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

（c）img要素を使用できます（caniuse.comによると img_でSVGファイルを使用 は 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はmetadata要素で使用できます 。

6
unor

公式ドキュメントで提案されているように、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>

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

2
Peta Sittek

もう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>
2
Stephen Ostermiller