Uso del marcado del logotipo de Schema.org con imágenes SVG

8

Hice un logotipo que es increíble y lo guardé en formato AI y SVG. Deseo utilizar el archivo SVG en un sitio, ya que el logotipo aparecerá muchas veces en todo el sitio y sería mejor que guardar el logotipo en formato PNG y tener solicitudes innecesarias del lado del servidor. Ahora, esto funciona muy bien 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>

Ahora surge el problema cuando se utiliza el logomarcado Schema.org . Utilizando:

<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 esperaba, falla la validación del W3C y recibo los siguientes mensajes de error:

El itemcope de atributo no está permitido en el elemento svg en este momento.

El tipo de elemento de atributo no está permitido en el elemento svg en este momento.

El atributo itemprop no está permitido en la imagen del elemento en este momento.

Ahora sé que la validación de W3C no es algo esencial, pero preferiría tener una solución que satisfaga tanto a Google como a W3C.

Estoy seguro de que algún gurú del W3C podrá señalarme en la dirección correcta, preferiría no usar DATA URI si es posible, ya que sé que podría ser una solución, pero corríjame si estoy equivocado o no DATA URI No son almacenables en caché.

— Simon Hayter
fuente

7

Los microdatos solo se pueden usar en elementos HTML tal como los define HTML5. Según HTML5, el svgelemento no está en el espacio de nombres HTML. La especificación HTML de WHATWG menciona explícitamente que Microdata no funciona svg(citado el 02/01/2014):

Actualmente, el itemscope, itempropy otros atributos de microdatos solo se definen para elementos HTML. Esto significa que los atributos con los nombres literales " itemscope", " itemprop", etc., no provocan el procesamiento de microdatos en elementos en otros espacios de nombres, como SVG.

(a) Podría agregar un divelemento sin sentido :

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

Los analizadores de microdatos comprenderían que el contenido del divelemento con la logopropiedad contiene el logotipo de la organización. Pero como el svgelemento no es parte de HTML, no hay reglas definidas para obtener el valor correcto (= la URL de la imagen). Por lo tanto, es muy poco probable que los analizadores de microdatos puedan hacer algo con esta información (por ejemplo, mostrar el logotipo en un contexto diferente).
Tenga en cuenta que el uso itempropen un divelemento da como resultado un valor de cadena , que no es lo que Schema.org espera para la logopropiedad.

(b) Podría duplicar la información con el "oculto" link:

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

(c) Podría usar el imgelemento (de acuerdo con caniuse.com, usar archivos SVGimg tiene más soporte que usar SVG en línea en HTML5 ):

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

(d) Tal vez podría usar RDFa Lite en su lugar , pero no estoy seguro de si funciona para espacios de nombres "mixtos". Pero para SVG 1.2 Tiny, RDFa se puede usar en el metadataelemento .

— unor
fuente

gran respuesta. El problema con el uso de la etiqueta img es que no se escala tan bien, o al menos en mis pruebas el cambio de tamaño usando width: height:la etiqueta img tuvo efectos indeseables. Le daré otra oportunidad ... será un dolor tener que usar sprites png ya que esto agregará 100kb vs 2kb.

— Simon Hayter

2

Simplemente puede referirse a su logotipo a través de la etiqueta meta / link como se sugiere en la documentación 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 : cambiado de <meta>a <link />como lo sugiere unor.

— Peta Sittek
fuente

Usted debe utilizarlink en lugar de metasi el valor es un URI (que es lo que sugerí en la parte (b) de mi respuesta ).

— hasta el

2

Otra alternativa sería guardar su imagen como un .svgarchivo. Puede usar cualquier editor de texto para crear este archivo y pegarlo en su marcado SVG. Luego, coloque el marcado como lo haría para 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>

— Stephen Ostermiller
fuente