Apakah SVG mendukung penyematan gambar bitmap?

147

Apakah gambar SVG murni vektorial atau bisakah kita menggabungkan gambar bitmap menjadi gambar SVG? Bagaimana dengan transformasi yang diterapkan pada gambar bitmap (perspektif, pemetaan, dll.)?

Sunting : Gambar dapat dimasukkan dalam SVG dengan referensi tautan. Lihat http://www.w3.org/TR/SVG/struct.html#ImageElement . Pertanyaan saya sebenarnya adalah apakah gambar bitmap dapat dimasukkan ke dalam svg sehingga gambar svg akan mandiri. Sebaliknya, setiap kali gambar svg ditampilkan, tautan harus diikuti dan gambar diunduh. Rupanya file .svg hanyalah file xml.

image svg bitmapimage chmike
sumber

Jawaban:

207

Ya, Anda dapat mereferensikan gambar apa pun dari <image>elemen. Dan Anda dapat menggunakan data uri untuk membuat svg sepenuhnya mandiri. Sebuah contoh:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

Titik-titik adalah tempat Anda akan menambahkan data base64 yang disandikan, editor grafik vektor yang mendukung svg biasanya memiliki opsi untuk menyimpan dengan gambar yang disematkan. Kalau tidak, ada banyak alat di sekitar untuk penyandian ke dan dari base64.

Berikut adalah contoh lengkap dari svg testuite.

Erik Dahlström
sumber
2
@Alexandar itu pertanyaan terpisah, dan saya yakin Anda dapat menemukan jawaban untuk itu di situs ini (pengkodean sesuatu ke base64 tidak spesifik svg).
Erik Dahlström
1
@Erik - Misalkan saya memiliki gambar yang sama diulang ribuan kali dalam file svg yang sama. Bisakah saya menempatkan data base64 di satu tempat dan membiarkan gambar merujuk ke data itu dari sana?
Rohit Vats
3
@Erik - Sudahlah saya mendapat jawaban saya dari sini - stackoverflow.com/questions/16685014/… . Jawab pembicaraan tentang pengelompokan di sana. :)
Rohit Vats
3
Jangan lupa untuk mendeklarasikan namespace xlinkapa adanya: xmlns:xlink="http://www.w3.org/1999/xlink"beberapa browser / pemirsa mungkin tidak melihat gambar Anda tanpanya
Marc_Alx
1
FYI: menurut pengalaman saya, browser Chrome menampilkan gambar ini bahkan jika Anda tidak menentukan widthdan heightdalam tag gambar svg. Namun Firefox dan IE tidak menampilkan gambar jika Anda menghilangkan atribut ini. Jadi pastikan Anda menentukannya!
Stonecrusher
23

Saya memposting biola di sini, menampilkan data, gambar jarak jauh dan lokal yang disematkan di SVG, di dalam halaman HTML:

http://jsfiddle.net/MxHPq/

<!DOCTYPE html>
<html>
<head>
    <title>SVG embedded bitmaps in HTML</title>
    <style>

        body{
            background-color:#999;
            color:#666;
            padding:10px;
        }

        h1{
            font-weight:normal;
            font-size:24px;
            margin-top:20px;
            color:#000;
        }

        h2{
            font-weight:normal;
            font-size:20px;
            margin-top:20px;
        }

        p{
            color:#FFF;
            }

        svg{
            margin:20px;
            display:block;
            height:100px;
        }

    </style>
</head>

<body>
    <h1>SVG embedded bitmaps in HTML</h1>
    <p>The trick appears to be ensuring the image has the correct width and height atttributes</p>

    <h2>Example 1: Embedded data</h2>
    <svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
    </svg>

    <h2>Example 2: Remote image</h2>
    <svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
    </svg>

    <h2>Example 3: Local image</h2>
    <svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
    </svg>


</body>
</html>
davestewart
sumber
17

Anda dapat menggunakan URI Data untuk memasok data gambar, misalnya:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

</svg>

Gambar akan melewati semua transformasi svg normal.

Tetapi teknik ini memiliki kelemahan, misalnya gambar tidak akan di-cache oleh browser

GarethOwen
sumber
jika data URI diperlukan oleh SVG, maka ini mungkin tidak merugikan - saya akan mengedit jawaban saya
GarethOwen
Gambar yang disematkan (data URI) akan di-cache dengan dokumen yang ada di
dalamnya
Persis - jika dokumen svg berubah, bitmap yang disematkan akan dimuat ulang, meskipun itu sama. Jika kita menautkan ke URL http, ini bisa di-cache secara terpisah ke dokumen svg.
GarethOwen
1
Poin yang bagus. Dalam komentar saya untuk jawaban Nick, Anda akan melihat rasional menanamkan gambar bitmap di gambar svg. Meskipun Anda benar, penyandiannya buruk dan tidak efisien. Seharusnya file encode biner terpisah dipindahkan bersama dengan gambar svg.
chmike
2

Anda dapat menggunakan data:URL untuk menyematkan versi gambar yang disandikan Base64. Tapi itu tidak terlalu efisien dan tidak akan merekomendasikan menanamkan gambar besar. Adakah alasan menautkan ke file lain tidak layak?

Nick
sumber
Itu tergantung pada use case. Kasus penggunaan yang saya pertimbangkan adalah di mana file svg disalin dan akses internet tidak selalu tersedia (yaitu kartu nama). TI juga memungkinkan untuk menjaga penggunaan kartu pribadi. Dengan gambar yang ditautkan, pemilik gambar dapat melacak semua tampilan kartunya yang mungkin menarik baginya tetapi tidak untuk pemegang kartu. Cukup berisi gambar svg masuk akal.
chmike
Itu benar jika Anda menggunakan URL absolut yang menunjuk ke suatu tempat di Internet. Tetapi mudah untuk menggunakan URL relatif sehingga jika file SVG adalah lokal, gambar juga akan menjadi. Jika Anda juga memiliki persyaratan bahwa itu harus satu file tunggal yang dapat didistribusikan, maka itu mengubah hal-hal lagi.
Nick
Ada kasus penggunaan di mana Anda ingin grafik SVG mandiri - yaitu, SATU file yang berisi seluruh gambar. Harus memindahkan / menyimpan banyak file untuk memastikan gambar ditampilkan bukan hal yang baik ketika menangani gambar pada sistem file - hal-hal dapat keluar dari sinkronisasi atau dijatuhkan terlalu mudah.
Minok
-1

Dimungkinkan juga untuk memasukkan bitmap. Saya pikir Anda juga dapat menggunakan transformasi itu.

perkasa
sumber
Memang. Saya baru saja menemukan tautan ini: w3.org/TR/SVG/struct.html#ImageElement . Sayangnya itu tidak menjawab kekhawatiran saya yang saya perhatikan tidak disebutkan dalam pertanyaan. Saya akan mengedit pertanyaan.
chmike