Verwenden des Schema.org-Logo-Markups mit SVG-Bildern

Ich habe ein fantastisches Logo erstellt und es im AI- und SVG-Format gespeichert. Ich möchte die SVG-Datei auf einer Site verwenden, da das Logo auf der gesamten Site mehrmals angezeigt wird und besser wäre, als das Logo im PNG-Format zu speichern und unnötige serverseitige Anforderungen zu haben. Dies funktioniert hervorragend mit:

<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>

Jetzt tritt das Problem bei der Verwendung von Schema.org- logoMarkup auf. Verwenden von:

<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>

Wie erwartet schlägt die W3C-Validierung fehl und ich werde mit den folgenden Fehlermeldungen begrüßt:

• Das Attribut itemscope ist zu diesem Zeitpunkt für das Element svg nicht zulässig.
• Das Attribut itemtype ist für das Element svg zu diesem Zeitpunkt nicht zulässig.
• Das Attribut itemprop ist für das Elementbild zu diesem Zeitpunkt nicht zulässig.

Jetzt weiß ich, dass die W3C-Validierung keine wesentliche Sache ist, aber ich würde es vorziehen, eine Lösung zu haben, die sowohl Google als auch W3C zufriedenstellt.

Ich bin mir sicher, dass ein W3C-Guru mich in die richtige Richtung weisen kann. Ich würde es vorziehen, wenn möglich keine DATA-URI zu verwenden, da ich weiß, dass dies eine Lösung sein könnte, aber mich korrigieren, wenn ich falsch liege oder nicht sind nicht zwischenspeicherbar.

Mikrodaten können nur für HTML-Elemente verwendet werden, wie in HTML5 definiert. Laut HTML5 befindet sich das svgElement nicht im HTML-Namespace. In der HTML-Spezifikation von WHATWG wird ausdrücklich erwähnt, dass Mikrodaten nicht funktionieren svg(zitiert am 02.01.2014):

Derzeit sind die itemscope, itempropsind, und andere Mikro Attribute nur für HTML - Elemente definiert. Dies bedeutet, dass Attribute mit den Literalnamen " itemscope", " itemprop" usw. keine Mikrodatenverarbeitung für Elemente in anderen Namespaces wie SVG verursachen.

(a) Sie könnten ein bedeutungsloses divElement hinzufügen :

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

Mikrodaten-Parser würden verstehen, dass der Inhalt des divElements mit der logoEigenschaft das Logo der Organisation enthält. Da das svgElement jedoch nicht Teil von HTML ist, sind keine Regeln definiert, um den richtigen Wert (= die URL des Bildes) daraus zu erhalten. So ist es sehr unwahrscheinlich , dass Mikrodaten - Parser konnte tut etwas mit diesen Informationen (zB das Logo in einem anderen Kontext zeigt).
Beachten Sie, dass die Verwendung itempropeines divElements zu einem Zeichenfolgenwert führt , den Schema.org für die logoEigenschaft nicht erwartet .

(b) Sie könnten die Informationen mit dem "versteckten" duplizieren link:

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

(c) Sie könnten das imgElement verwenden (laut caniuse.com hat die Verwendung von SVG-Dateien inimg mehr Unterstützung als die Verwendung von SVG inline in HTML5 ):

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

(d) Vielleicht könnten Sie stattdessen RDFa Lite verwenden , aber ich bin mir nicht sicher, ob es für "gemischte" Namespaces funktioniert. Für SVG 1.2 Tiny kann RDFa im metadataElement verwendet werden .

Sie können einfach über ein Meta / Link-Tag auf Ihr Logo verweisen, wie in der offiziellen Dokumentation vorgeschlagen: 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>

Bearbeiten : Geändert von <meta>zu <link />wie von unor vorgeschlagen.

Eine andere Alternative wäre, Ihr Bild als .svgDatei zu speichern. Sie können einen beliebigen Texteditor verwenden, um diese Datei zu erstellen und in Ihr SVG-Markup einzufügen. Setzen Sie dann das Markup so auf, wie Sie es für ein .pngoder tun würden .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>