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 logo
marcado 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é.
fuente
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.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
Editar : cambiado de
<meta>
a<link />
como lo sugiere unor.fuente
link
en lugar demeta
si el valor es un URI (que es lo que sugerí en la parte (b) de mi respuesta ).Otra alternativa sería guardar su imagen como un
.svg
archivo. 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.png
o.jpg
:fuente