Использование разметки логотипа 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>

Теперь проблема возникает при использовании logoразметки Schema.org . С помощью:

<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, и меня приветствуют следующие сообщения об ошибках:

• Атрибут itemscope не разрешен для элемента svg на данный момент.
• Атрибут itemtype не разрешен для элемента svg на данный момент.
• Атрибут itemprop не разрешен для изображения элемента в этой точке.

Теперь я знаю, что проверка W3C не является существенной вещью, но я бы предпочел иметь решение, удовлетворяющее как Google, так и W3C.

Я уверен, что некоторые гуру W3C смогут указать мне правильное направление, я бы предпочел не использовать URI DATA, если это возможно, поскольку я знаю, что это может быть одним из решений, но исправьте меня, если я ошибаюсь или нет URI DATA не кэшируются

Микроданные могут использоваться только для элементов HTML, как определено в HTML5. Согласно HTML5, svgэлемент не находится в пространстве имен HTML. HTML-спецификация WHATWG прямо упоминает, что микроданные не работают svg(цитируется в 2014-01-02):

В настоящее время itemscope, itempropи другие атрибуты микроданных определены только для HTML - элементов. Это означает, что атрибуты с буквенными именами " itemscope", " itemprop" и т. Д. Не приводят к обработке микроданных в элементах в других пространствах имен, таких как SVG.

(а) Вы можете добавить бессмысленный 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имущества.

(б) Вы можете дублировать информацию со «скрытым» link:

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

(c) Вы можете использовать этот imgэлемент (согласно caniuse.com использование файлов SVG вimg имеет больше поддержки, чем использование встроенного SVG в HTML5 ):

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

(d) Возможно, вы могли бы вместо этого использовать RDFa Lite , но я не уверен, работает ли он для «смешанных» пространств имен. Но для SVG 1.2 Tiny в metadataэлементе может использоваться RDFa .

Вы можете просто ссылаться на свой логотип через мета / тег ссылки, как это предлагается в официальной документации: 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>