Saya telah membuat logo yang luar biasa dan saya menyimpannya dalam format AI dan SVG. Saya ingin menggunakan file SVG di situs karena logo akan muncul berkali-kali di seluruh situs dan akan lebih baik daripada menyimpan logo dalam format PNG dan memiliki permintaan sisi server yang tidak perlu. Sekarang, ini bekerja sangat baik menggunakan:
<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>
Sekarang masalah muncul ketika menggunakan logo
markup Schema.org . Menggunakan:
<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>
Seperti yang saya harapkan gagal validasi W3C dan saya disambut dengan pesan kesalahan berikut:
- Atribut itemscope tidak diizinkan pada elemen svg pada titik ini.
- Atribut tipe barang tidak diizinkan pada elemen svg pada titik ini.
- Atribut itemprop tidak diizinkan pada elemen gambar pada saat ini.
Sekarang saya tahu bahwa validasi W3C bukan hal yang penting tetapi saya lebih suka memiliki solusi yang memuaskan Google dan W3C.
Saya yakin bahwa beberapa guru W3C akan dapat mengarahkan saya ke arah yang benar, saya akan perfer untuk tidak menggunakan DATA URI jika memungkinkan karena saya tahu itu bisa menjadi salah satu solusi tetapi perbaiki saya jika saya salah atau tidak DATA URI tidak bisa dilewati.
sumber
width: height:
tag img memiliki efek yang tidak diinginkan. Saya akan mencobanya lagi .... akan merepotkan jika harus menggunakan png sprite karena ini akan menambah 100kb vs 2kb.Anda cukup merujuk ke logo Anda melalui tag meta / tautan seperti yang disarankan dalam dokumentasi resmi: http://schema.org/docs/gs.html#advanced_missing
Sunting : Diubah dari
<meta>
menjadi<link />
seperti yang disarankan oleh unor.sumber
link
alih-alihmeta
jika nilainya adalah URI (yang saya sarankan di bagian (b) dari jawaban saya ).Alternatif lain adalah menyimpan gambar Anda sebagai
.svg
file. Anda dapat menggunakan editor teks apa saja untuk membuat file ini dan menempelkannya di markup SVG Anda. Kemudian pasang markup seperti yang akan Anda lakukan untuk a.png
atau.jpg
:sumber