SVG supporta l'incorporamento di immagini bitmap?

147

Un'immagine SVG è puramente vettoriale o possiamo combinare immagini bitmap in un'immagine SVG? Che ne dici di trasformazioni applicate alle immagini bitmap (prospettiva, mappature, ecc.)?

Modifica : le immagini possono essere incluse in un file SVG come riferimento di collegamento. Vedi http://www.w3.org/TR/SVG/struct.html#ImageElement . La mia domanda era in effetti se le immagini bitmap potessero essere incluse all'interno dello svg in modo tale che l'immagine svg fosse autonoma. Altrimenti, ogni volta che viene visualizzata l'immagine svg è necessario seguire il collegamento e scaricare l'immagine. Apparentemente i file .svg sono semplicemente file XML.

image svg bitmapimage

— chmike
fonte

207

Sì, puoi fare riferimento a qualsiasi immagine <image>dall'elemento. E puoi usare i dati uri per rendere lo svg completamente autonomo. Un esempio:

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

I punti sono i punti in cui aggiungere i dati base64 codificati, gli editor di grafica vettoriale che supportano svg di solito hanno un'opzione per il salvataggio con immagini incorporate. Altrimenti ci sono molti strumenti in giro per la codifica da e verso base64.

Ecco un esempio completo da svg testsuite.

— Erik Dahlström
fonte

2

@Aleksandar è una domanda separata, e sono sicuro che puoi trovare una risposta per questo su questo sito (codificare qualcosa su base64 non è specifico per svg).

— Erik Dahlström,

1

@Erik - Supponiamo di avere la stessa immagine ripetuta mille volte nello stesso file svg. Posso posizionare i dati base64 in un punto e lasciare che l'immagine faccia riferimento a tali dati da lì?

— Rohit Vats,

3

@Erik - Non importa, ho ricevuto la mia risposta da qui - stackoverflow.com/questions/16685014/… . La risposta parla del raggruppamento lì. :)

— Rohit Vats,

3

Non dimenticare di dichiarare lo spazio dei nomi così xlinkcom'è: xmlns:xlink="http://www.w3.org/1999/xlink"alcuni browser / visualizzatori potrebbero non vedere la tua immagine senza di essa

— Marc_Alx

1

Cordiali saluti: secondo la mia esperienza, il browser Chrome visualizza questa immagine anche se non specificata widthe heightnel tag immagine svg. Tuttavia, Firefox e IE non visualizzano l'immagine se si omettono questi attributi. Quindi assicurati di specificarli!

— Stonecrusher,

23

Ho pubblicato un violino qui, mostrando dati, immagini remote e locali incorporate in SVG, all'interno di una pagina 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
fonte

17

È possibile utilizzare un URI dei dati per fornire i dati dell'immagine, ad esempio:

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

L'immagine passerà attraverso tutte le normali trasformazioni svg.

Ma questa tecnica presenta degli svantaggi, ad esempio l'immagine non verrà memorizzata nella cache dal browser

— GarethOwen
fonte

se l'URI dei dati è richiesto da SVG, questo presumibilmente non è uno svantaggio

— Modificherò la

Le immagini incorporate (URI di dati) verranno memorizzate nella cache con il documento in cui si trovano, vedere ad esempio stackoverflow.com/questions/4791807/data-uris-and-caching

— Erik Dahlström

Esatto: se il documento svg cambia, la bitmap incorporata verrà ricaricata, anche quando è la stessa. Se ci colleghiamo a un URL http, questo può essere memorizzato nella cache separatamente nel documento svg.

— GarethOwen,

1

Buon punto. Nel mio commento alla risposta di Nick vedrai il razionale di incorporare l'immagine bitmap nell'immagine svg. Sebbene tu abbia ragione, la codifica è cattiva e inefficiente. Dovrebbe essere un file codificato binario separato spostato insieme all'immagine svg.

— chmike,

2

È possibile utilizzare un data:URL per incorporare una versione codificata Base64 di un'immagine. Ma non è molto efficiente e non consiglierei di incorporare immagini di grandi dimensioni. Qualche motivo per il collegamento a un altro file non è possibile?

— tacca
fonte

Dipende dal caso d'uso. Il caso d'uso che sto prendendo in considerazione è dove viene copiato un file svg e l'accesso a Internet non è sempre disponibile (ad esempio biglietto da visita). L'IT consente inoltre di mantenere privato l'uso della carta. Con un'immagine collegata, il proprietario dell'immagine potrebbe tracciare tutte le visualizzazioni delle sue carte che potrebbero essere interessanti per lui ma non per il titolare della carta. L'immagine svg autonoma ha senso.

— chmike,

Questo è vero se usi un URL assoluto che punta da qualche parte su Internet. Ma è facile usare un URL relativo in modo che se il file SVG è locale, anche l'immagine sarà. Se hai anche il requisito che deve essere un singolo file ridistribuibile, questo cambia di nuovo le cose.

— Nick,

Esistono casi d'uso in cui si desidera che un'immagine SVG sia autonoma, ovvero UN file che contiene l'intera immagine. Dover trasportare / archiviare più file per garantire il rendering di un'immagine non è una buona cosa quando si gestiscono le immagini sui file system: le cose possono non essere sincronizzate o essere rilasciate troppo facilmente.

— Minok,

-1

È anche possibile includere bitmap. Penso che anche tu puoi usare le trasformazioni su questo.

— mightyplow
fonte

Infatti. Ho appena trovato questo link: w3.org/TR/SVG/struct.html#ImageElement . Purtroppo non risponde alla mia preoccupazione che ho notato non è indicato nella domanda. Modificherò la domanda.

— chmike,