Utilizzo del markup del logo Schema.org con immagini SVG

Ho creato un logo fantastico e l'ho salvato in formato AI e SVG. Vorrei utilizzare il file SVG su un sito poiché il logo apparirà molte volte in tutto il sito e sarebbe meglio che salvare il logo in formato PNG e avere richieste non necessarie sul lato server. Ora, funziona alla grande usando:

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

Ora il problema sorge quando si utilizza il logomarkup Schema.org . usando:

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

Come mi aspettavo, fallisce la convalida W3C e sono accolto con i seguenti messaggi di errore:

• Attributo itemscope non consentito sull'elemento svg a questo punto.
• A questo punto l'attributo itemtype non è ammesso sull'elemento svg.
• Attributo itemprop non consentito sull'immagine dell'elemento a questo punto.

Ora so che la convalida del W3C non è una cosa essenziale, ma preferirei avere una soluzione che soddisfi sia Google che W3C.

Sono sicuro che alcuni guru del W3C saranno in grado di indirizzarmi nella giusta direzione, preferirei non usare URI DATI se possibile poiché so che potrebbe essere una soluzione ma correggermi se sbaglio o no URI DATI non sono cachable.

I microdati possono essere utilizzati solo su elementi HTML come definiti da HTML5. Secondo HTML5, l' svgelemento non si trova nello spazio dei nomi HTML. Le specifiche HTML di WHATWG menzionano esplicitamente che i microdati non funzionano svg(citato il 02-01-2014):

Attualmente, i itemscope, itemprope altri attributi di microdati sono definiti solo per gli elementi HTML. Ciò significa che gli attributi con i nomi letterali " itemscope", " itemprop", ecc., Non causano l'elaborazione dei microdati su elementi in altri spazi dei nomi, come SVG.

(a) È possibile aggiungere un divelemento insignificante :

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

I parser di microdati comprenderanno che il contenuto divdell'elemento con la logoproprietà contiene il logo dell'organizzazione. Ma poiché l' svgelemento non fa parte di HTML, non ci sono regole definite per ottenere il valore corretto (= l'URL dell'immagine) da esso. Quindi è molto improbabile che i parser di Microdata possano fare qualcosa con queste informazioni (ad esempio, mostrando il logo in un contesto diverso).
Si noti che l'utilizzo di itempropun divelemento genera un valore stringa , che non è quello che Schema.org prevede per la logoproprietà.

(b) È possibile duplicare le informazioni con "nascosto" link:

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

(c) È possibile utilizzare l' imgelemento (secondo caniuse.com l' utilizzo di file SVG inimg ha un supporto maggiore rispetto all'utilizzo di SVG inline in HTML5 ):

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

(d) Forse si potrebbe usare RDFa Lite invece , ma non sono sicuro se funziona per gli spazi dei nomi "miste". Ma per SVG 1.2 Tiny, RDFa può essere utilizzato metadatanell'elemento .

Puoi semplicemente fare riferimento al tuo logo tramite tag meta / link come suggerito nella documentazione ufficiale: 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>

Modifica : modificato da <meta>a <link />come suggerito da unor.

Un'altra alternativa sarebbe quella di salvare l'immagine come .svgfile. È possibile utilizzare qualsiasi editor di testo per creare questo file e incollarlo nel markup SVG. Quindi applica il markup proprio come faresti per un .pngo .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>