Usando a marcação do logotipo Schema.org com imagens SVG

Eu criei um logotipo que é incrível e salvei no formato AI e SVG. Desejo usar o arquivo SVG no site a, pois o logotipo aparecerá muitas vezes em todo o site e seria melhor do que salvar o logotipo no formato PNG e ter solicitações desnecessárias do servidor. Agora, isso funciona muito bem 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>

Agora, o problema surge ao usar a logomarcação 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>

Como eu esperava, falha na validação do W3C e sou recebido com as seguintes mensagens de erro:

• O atributo itemscope não é permitido no elemento svg neste momento.
• O atributo itemtype não é permitido no elemento svg neste momento.
• O atributo itemprop não é permitido na imagem do elemento neste momento.

Agora eu sei que a validação do W3C não é uma coisa essencial, mas eu preferiria ter uma solução que satisfaça o Google e o W3C.

Tenho certeza de que algum guru do W3C será capaz de me apontar na direção certa; preferiria não usar o URI DE DADOS, se possível, pois sei que poderia ser uma solução, mas me corrija se estiver errado ou não. não são laváveis.

Os microdados podem ser usados ​​apenas em elementos HTML, conforme definido pelo HTML5. De acordo com o HTML5, o svgelemento não está no espaço de nome HTML. A especificação HTML do WHATWG menciona explicitamente que o Microdata não funciona svg(citado em 02-01-2014):

Atualmente, os itemscope, itemprope outros atributos de microdados são definidos apenas para elementos HTML. Isso significa que atributos com os nomes literais " itemscope", " itemprop" etc, não fazem com que o processamento de microdados ocorra em elementos de outros namespaces, como SVG.

(a) Você pode adicionar um divelemento sem sentido :

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

Os analisadores de microdados entenderiam que o conteúdo do divelemento com a logopropriedade contém o logotipo da organização. Mas como o svgelemento não faz parte do HTML, não há regras definidas para obter o valor correto (= URL da imagem). Portanto, é muito improvável que os analisadores Microdata possam fazer algo com essas informações (por exemplo, mostrando o logotipo em um contexto diferente).
Observe que o uso itempropde um divelemento resulta em um valor de sequência , que não é o que o Schema.org espera para a logopropriedade.

(b) Você pode duplicar as informações com o "oculto" link:

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

(c) Você pode usar o imgelemento (de acordo com caniuse.com, usar arquivos SVG emimg tem mais suporte do que usar SVG embutido em HTML5 ):

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

(d) Talvez você poderia usar RDFa Lite vez , mas eu não tenho certeza se ele funciona para namespaces "mistos". Mas para SVG 1.2 minúsculo, RDFa pode ser usado no metadataelemento .

Você pode simplesmente consultar o seu logotipo por meio da tag meta / link, conforme sugerido na documentação oficial: 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>

Editar : alterado de <meta>para <link />conforme sugerido por unor.

Outra alternativa seria salvar sua imagem como um .svgarquivo. Você pode usar qualquer editor de texto para criar esse arquivo e colar na sua marcação SVG. Em seguida, coloque a marcação da mesma maneira que você faria para um .pngou .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>