SVG, bitmap görüntülerinin gömülmesini destekliyor mu?

152

Bir SVG görüntüsü tamamen vektörel midir yoksa bitmap görüntülerini bir SVG görüntüsünde birleştirebilir miyiz? Bitmap görüntülerine (perspektif, eşlemeler vb.) Uygulanan dönüştürmelere ne dersiniz?

Düzenleme : Görüntüler, bağlantı referansına göre bir SVG'ye eklenebilir. Http://www.w3.org/TR/SVG/struct.html#ImageElement adresine bakın . Sorum, svg görüntüsünün kendi içinde olması için bitmap görüntülerinin svg içine dahil edilip edilmeyeceğiydi. Aksi takdirde, svg resmi her görüntülendiğinde bağlantı izlenmeli ve resim indirilmelidir. Görünüşe göre .svg dosyaları sadece xml dosyalarıdır.

image  svg  bitmapimage 
— Chmike
kaynak

Yanıtlar:

212

Evet, imageöğeden herhangi bir görüntüye başvurabilirsiniz . Ve SVG'yi bağımsız yapmak için veri URI'larını kullanabilirsiniz . Bir örnek:

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

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

svgEleman niteliği xmlns:xlinkbeyan xlinkbir şekilde ad önek ve tanımı olduğu söylüyor. Bu, SVG okuyucusunun ne xlink:hrefanlama geldiğini bilmesini sağlar .

IMAGE_DATAEğer base64 kodlanmış metin olarak görüntü verilerini eklersiniz burasıdır. SVG'yi destekleyen vektör grafik düzenleyicileri genellikle gömülü görüntülerle kaydetme seçeneğine sahiptir. Aksi takdirde, base64'e ve base64'ten bir bayt akışını kodlamak için birçok araç vardır.

İşte SVG test takımından tam bir örnek .

— Erik Dahlström
kaynak
2
@Aleksandar bu ayrı bir sorudur ve eminim bu sitede buna bir cevap bulabilirsiniz (bir şeyi base64'e kodlamak svg'ye özgü değildir).
— Erik Dahlström
1
@Erik - Aynı svg dosyasında aynı görüntünün bin kez tekrarlandığını varsayalım. Base64 verilerini tek bir yere yerleştirip görüntünün bu verilere oradan başvurmasına izin verebilir miyim?
— Rohit Vats
3
@Erik - Boşver cevabımı buradan aldım - stackoverflow.com/questions/16685014/… . Cevap, orada gruplama hakkında konuşuyor. :)
— Rohit Vats
3
xlinkxmlns:xlink="http://www.w3.org/1999/xlink"
— Ad
2
Bilginize: deneyimlerime göre Chrome tarayıcı belirttiğiniz dahi bu resim görüntüler widthve heightsvg görüntü etiketinde. Ancak bu öznitelikleri atlarsanız Firefox ve IE resmi görüntülemez. Bu yüzden bunları belirttiğinizden emin olun!
— Stonecrusher
25

Burada, verileri, SVG'ye gömülü uzak ve yerel görüntüleri bir HTML sayfası içinde gösteren bir keman yayınladım:

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

Görüntü verilerini sağlamak için bir Veri URI'si kullanabilirsiniz , örneğin:

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

Görüntü tüm normal svg dönüşümlerinden geçecektir.

Ancak bu tekniğin dezavantajları vardır, örneğin görüntü tarayıcı tarafından önbelleğe alınmayacaktır.

— GarethOwen
kaynak
SVG için veri URI'sı gerekliyse, bu muhtemelen bir dezavantaj değildir - cevabımı düzenleyeceğim
— GarethOwen
1
Gömülü görüntüler (veri URI'leri) içinde bulundukları belgeyle birlikte önbelleğe alınacaktır, örneğin bkz. Stackoverflow.com/questions/4791807/data-uris-and-caching
— Erik Dahlström
Kesinlikle - svg belgesi değişirse, gömülü bitmap aynı olsa bile yeniden yüklenecektir. Bir http URL'sine bağlanırsak, bu svg belgesine ayrı olarak önbelleğe alınabilir.
— GarethOwen
1
İyi bir nokta. Nick'in cevabına yaptığım yorumda, bitmap görüntüsünü svg görüntüsüne yerleştirmenin mantığını göreceksiniz. Haklı olmanıza rağmen, kodlama kötü ve verimsiz. Bu, svg görüntüsü ile birlikte taşınan ayrı bir ikili kodlanmış dosya olmalıdır.
— chmike
3

Bir görüntünün Base64 kodlu sürümünü gömmek için bir data:URL kullanabilirsiniz . Ancak çok verimli değildir ve büyük resimlerin yerleştirilmesini tavsiye etmez. Başka bir dosyaya bağlanmanın herhangi bir nedeni mümkün değil mi?

— Nick
kaynak
Kullanım durumuna bağlıdır. Düşündüğüm kullanım durumu, bir svg dosyasının kopyalandığı ve internet erişiminin her zaman mevcut olmadığı (yani kartvizit). BT ayrıca kartın kullanımının gizli tutulmasına da izin verir. Bağlantılı bir görüntü ile, görüntünün sahibi, kendisi için ilginç olabilecek, ancak kart sahibi için ilgi çekici olmayan tüm kart görüntülerini takip edebilir. Kendi kendine yeten svg görüntüsü mantıklı.
— chmike
İnternette bir yere işaret eden mutlak bir URL kullanıyorsanız bu doğrudur. Ancak, göreli bir URL kullanmak kolaydır, böylece SVG dosyası yerelse, görüntü de olacaktır. Ayrıca, tek bir yeniden dağıtılabilir dosya olması gerekliliğine sahipseniz, bu her şeyi yeniden değiştirir.
— Nick
Bir SVG grafiğinin kendi içinde olmasını istediğiniz, yani tüm görüntüyü içeren TEK dosya için kullanım örnekleri vardır. Bir görüntünün işlendiğinden emin olmak için birden fazla dosyayı taşımak / depolamak zorunda olmak, dosya sistemlerindeki görüntüleri işlerken iyi bir şey değildir - işler senkronizasyondan çıkabilir veya çok kolay düşebilir.
— Minok
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.