Sử dụng đánh dấu logo Schema.org với hình ảnh SVG

Tôi đã tạo ra một logo thật tuyệt vời và tôi đã lưu nó ở định dạng AI và SVG. Tôi muốn sử dụng tệp SVG trên trang web vì logo sẽ xuất hiện nhiều lần trên tất cả các trang web và sẽ tốt hơn là lưu logo ở định dạng PNG và có các yêu cầu phía máy chủ không cần thiết. Bây giờ, điều này hoạt động rất tốt bằng cách sử dụng:

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

Bây giờ vấn đề phát sinh khi sử dụng logođánh dấu Schema.org . Sử dụng:

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

Như tôi dự đoán, nó không thể xác nhận W3C và tôi được chào đón với các thông báo lỗi sau:

• Tại thời điểm này, thuộc tính mục không được phép trên phần tử svg.
• Tại thời điểm này, thuộc tính itemtype không được phép trên phần tử svg.
• Itemprop thuộc tính không được phép trên hình ảnh phần tử tại thời điểm này.

Bây giờ tôi biết rằng xác thực W3C không phải là một điều thiết yếu nhưng tôi muốn có một giải pháp thỏa mãn cả Google và W3C.

Tôi chắc chắn rằng một số guru W3C sẽ có thể chỉ cho tôi đi đúng hướng, tôi sẽ không sử dụng DATA URI nếu có thể vì tôi biết đó có thể là một giải pháp nhưng hãy sửa tôi nếu tôi sai hoặc không phải DATA URI không lưu trữ được.

Microdata chỉ có thể được sử dụng trên các phần tử HTML như được định nghĩa bởi HTML5. Theo HTML5, svgphần tử không nằm trong không gian tên HTML. Thông số HTML của WHATWG đề cập rõ ràng rằng Microdata không hoạt động svg(trích dẫn ngày 2014-01 / 02):

Hiện nay, các itemscope, itempropvà các thuộc tính dữ liệu vĩ mô khác được chỉ định cho các phần tử HTML. Điều này có nghĩa là các thuộc tính có tên bằng chữ " itemscope", " itemprop", v.v., không gây ra xử lý microdata xảy ra trên các phần tử trong không gian tên khác, chẳng hạn như SVG.

(a) Bạn có thể thêm một divyếu tố vô nghĩa :

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

Các trình phân tích cú pháp Microdata sẽ hiểu rằng nội dung của divphần tử có thuộc logotính chứa logo của tổ chức. Nhưng vì svgphần tử không phải là một phần của HTML, nên không có quy tắc nào được xác định để lấy giá trị chính xác (= URL của hình ảnh) ra khỏi nó. Vì vậy, rất khó có khả năng các trình phân tích cú pháp Microdata có thể làm gì đó với thông tin này (ví dụ: hiển thị logo trong một ngữ cảnh khác).
Lưu ý rằng việc sử dụng itemproptrên một divphần tử dẫn đến giá trị chuỗi , đó không phải là điều Schema.org mong đợi cho thuộc logotính.

(b) Bạn có thể sao chép thông tin bằng "ẩn" link:

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

(c) Bạn có thể sử dụng imgphần tử (theo caniuse.com bằng các tệp SVG trongimg có nhiều hỗ trợ hơn so với sử dụng nội tuyến SVG trong HTML5 ):

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

(d) Có thể bạn có thể sử dụng RDFa Lite thay thế , nhưng tôi không chắc liệu nó có hoạt động cho các không gian tên "hỗn hợp" không. Nhưng đối với SVG 1.2 Tiny, RDFa có thể được sử dụng trong metadataphần tử .

Bạn chỉ có thể tham khảo logo của bạn thông qua thẻ meta / liên kết như được đề xuất trong tài liệu chính thức: http://schema.org/docs/gs.html#advified_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>

Chỉnh sửa : Thay đổi từ <meta>thành <link />theo đề xuất của unor.

Một cách khác là lưu hình ảnh của bạn dưới dạng .svgtệp. Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào để tạo tệp này và dán vào đánh dấu SVG của bạn. Sau đó đặt đánh dấu vào giống như bạn sẽ làm cho một .pnghoặc .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>