将Schema.org徽标标记与SVG图像一起使用

我制作了一个很棒的徽标，并将其保存为AI和SVG格式。我希望在网站上使用SVG文件，因为徽标会在网站上出现很多次，并且比以PNG格式保存徽标和有不必要的服务器端请求要好。现在，使用以下命令效果很好：

<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 logo标记时会出现问题。使用：

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

如我所料，它未通过W3C验证，并且收到以下错误消息：

• 此时，元素svg上的属性itemscope不允许。
• 此时，元素svg上不允许使用属性itemtype。
• 此时，元素image上的属性itemprop不允许使用。

现在，我知道W3C验证不是必不可少的事情，但是我更希望有一个能够同时满足Google和W3C要求的解决方案。

我确信某些W3C专家将能够向我指出正确的方向，如果可能的话，我建议不要使用DATA URI，因为我知道这可能是一种解决方案，但是如果我错了或者不是DATA URI的话，请更正我不可缓存。

微数据只能用于HTML5定义的HTML元素。根据HTML5，该svg元素不在HTML名称空间中。WHATWG的HTML规范明确提到微数据不适用于svg（引用于2014年1月2日）：

目前，itemscope，itemprop，等微观数据的属性只为HTML元素定义。这意味着文字名称为“ itemscope”，“ itemprop”等的属性不会导致对其他名称空间（例如SVG）中的元素进行微数据处理。

（a）您可以添加无意义的div元素：

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

微数据解析器将理解div具有logo属性的元素的内容包含组织的徽标。但是由于该svg元素不是HTML的一部分，因此没有定义用于从中获取正确值（=图片的URL）的规则。因此，微数据解析器不太可能会对这些信息做任何事情（例如，在不同的上下文中显示徽标）。
请注意，itemprop在div元素上使用会导致字符串值，这不是Schema.org期望该logo属性的值。

（b）您可以使用“隐藏”来复制信息link：

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

（c）您可以使用img元素（根据caniuse.com，使用imgHTML5中的SVG文件比在HTML5中使用SVG内联具有更多的支持）：

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

（d）也许你可以使用RDFa的精简版，而不是，但我不知道这是否适用于“混合”的命名空间。但是对于SVG 1.2 Tiny，可以在metadata元素中使用RDFa。

您可以按照官方文档中的建议通过meta / link标记简单地引用您的徽标：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>

编辑：从改变<meta>到<link />由UNOR的建议。

另一种选择是将图像保存为.svg文件。您可以使用任何文本编辑器来创建此文件并将其粘贴到SVG标记中。然后像对a .png或那样进行标记.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>