<img src/> beserta atribut alt (ralat kalau admin salah mendefinisikan ^_^). meskipun saat ini Google sudah punya perangkat lunak yang berjalan untuk menangani SVG sebagai bitmap (konversi ke JPG) terlebih google pernah mengatakan "We index SVG content whether it is in a standalone file or embedded directly in HTML link". namun untuk embed SVG mentah langsung pada HTML saya masih meragukannya apa benar google bisa mengkonversi langsung dengan gambar utuh, tujuan pada artikel ini adalah untuk menghindari kasus-kasus seperti itu, dari pada ragu mending cari aman saja.terus bagaimana menggunakan SVG untuk Logo header agar tetap terindex pada SEO images google ?
Image publishing guidelines.
Optimalisasi Gambar.
Biasanya ketika kita memasang SVG langsung pada HTML akan menggunakan baris code kurang lebih seperti ini.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>kalau hanya untuk menggunakan SVG pada icon-icon tertentu tidak jadi masalah. namun untuk logo header saya tidak menyarankan memasang langsung code tersebut.
alangkah baiknya Logo header tetap dalam bentuk
<img src/> saja.Rekomendasi penggunaan logo header dengan images.
cara 1 : format gambar bisa berupa svg/png/jpg/gif ataupun webp(Chrome, Opera, Android) ataupun JPEG XR (IE).
<img src="../images/logo.svg/png/jpg/gif" alt="logo Header Blog"><img src="data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........ %3e%3c/path%3e%3c/g%3e%3c/svg%3e" alt="logo Header Blog">Saya tidak menyarankan penggunaan background image CSS untuk mengganti logo header karena tidak semua Browser support.
kecuali kalian menggunakan bantuan javascript. apapun itu tetap tidak baik hal penting seperti logo header jika tetap memaksaan menggunakan background images. seperti yang saya bilang kita cari aman saja ^_*
.logo {
background-image: url("logo/image.svg");
background-repeat: no-repeat;
background-color:transparent;
}
/*
atau
===================================================
*/
.logo {
background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........ %3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-repeat:no-repeat;
background-color:transparent;
}Cara 2 : SVG Fallback - Guide
SVG Fallback Rekomendasi
ambil url logo dengan format PNG dan SVG dan letakan dimana logo anda akan di tampilkan
<img src="../images/logo.svg"
data-fallback="../images/logo.png"
alt="SVG Support Icon"/>Simpan Javascript pada HTML biasanya di letakan di atas
</body><script type="text/javscript">function svgasimg() {
return document.implementation.hasFeature(
"http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}
if (!svgasimg()){
var e = document.getElementsByTagName("img");
if (!e.length){
e = document.getElementsByTagName("IMG");
}
for (var i=0, n=e.length; i<n; i++){
var img = e[i],
src = img.getAttribute("src");
if (src.match(/svgz?$/)) {
/* URL ends in svg or svgz */
img.setAttribute("src",
img.getAttribute("data-fallback"));
}
}
}</script>Hasil Code di atas seperti ini
Kesimpulannya tautan url img lebih cepat terkonversi google dibanding jenis xml langsung pada html.Segala kekurangan tentang tutorial mengganti logo header menggunakan gambar SVG bisa kalian pertimbangkan mana yang lebih baik. mungkin di antara pembaca ada yang lebih tahu dengan SEO images google.
di sini saya hanya membantu sedikit bagi yang awam cara menggunakan SVG pada logo header saja.
