Unterstützt SVG das Einbetten von Bitmap-Bildern?

147

Ist ein SVG-Bild rein vektoriell oder können wir Bitmap-Bilder zu einem SVG-Bild kombinieren? Wie wäre es mit Transformationen, die auf die Bitmap-Bilder angewendet werden (Perspektive, Zuordnungen usw.)?

Bearbeiten : Bilder können durch Linkreferenz in eine SVG-Datei aufgenommen werden. Siehe http://www.w3.org/TR/SVG/struct.html#ImageElement . Meine Frage war in der Tat, ob Bitmap-Bilder in das SVG aufgenommen werden können, damit das SVG-Bild in sich geschlossen ist. Andernfalls muss bei jeder Anzeige des SVG-Bildes der Link befolgt und das Bild heruntergeladen werden. Anscheinend sind SVG-Dateien einfach XML-Dateien.

image svg bitmapimage chmike
quelle

Antworten:

206

Ja, Sie können auf jedes Bild aus dem <image>Element verweisen . Und Sie können Daten-URLs verwenden , um das SVG vollständig in sich geschlossen zu machen. Ein Beispiel:

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

An den Punkten würden Sie die codierten base64-Daten hinzufügen. Vektorgrafik-Editoren, die svg unterstützen, können normalerweise mit eingebetteten Bildern gespeichert werden. Ansonsten gibt es viele Tools zum Codieren von und zu base64.

Hier ist ein vollständiges Beispiel aus der SVG-Testsuite.

Erik Dahlström
quelle
2
@Aleksandar, das ist eine separate Frage, und ich bin sicher, dass Sie auf dieser Site eine Antwort darauf finden können (die Codierung von etwas in base64 ist nicht svg-spezifisch).
Erik Dahlström
1
@Erik - Angenommen, ich habe dasselbe Bild tausendmal in derselben SVG-Datei wiederholt. Kann ich base64-Daten an einer Stelle platzieren und das Bild von dort auf diese Daten verweisen lassen?
Rohit Vats
3
@Erik - Egal, ich habe meine Antwort von hier bekommen - stackoverflow.com/questions/16685014/… . Antwort spricht über Gruppierung dort. :)
Rohit Vats
3
Vergessen Sie nicht, den Namespace xlinkso zu deklarieren, wie er ist: xmlns:xlink="http://www.w3.org/1999/xlink"Einige Browser / Viewer sehen Ihr Bild möglicherweise nicht ohne ihn
Marc_Alx
1
Zu Ihrer Information: Nach meiner Erfahrung zeigt der Chrome-Browser dieses Bild an, auch wenn Sie es nicht angeben widthund heightim SVG-Bild-Tag. Firefox und IE zeigen das Bild jedoch nicht an, wenn Sie diese Attribute weglassen. Stellen Sie also sicher, dass Sie sie angeben!
Stonecrusher
23

Ich habe hier eine Geige gepostet, die Daten, entfernte und lokale Bilder, die in SVG eingebettet sind, in einer HTML-Seite zeigt:

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

Sie können einen Daten-URI verwenden , um die Bilddaten bereitzustellen, zum Beispiel:

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

Das Bild durchläuft alle normalen SVG-Transformationen.

Diese Technik hat jedoch Nachteile, zum Beispiel wird das Bild nicht vom Browser zwischengespeichert

GarethOwen
quelle
Wenn Daten-URI von SVG benötigt wird, ist dies vermutlich kein Nachteil - ich werde meine Antwort bearbeiten
GarethOwen
Eingebettete Bilder (Daten-URIs) werden mit dem Dokument zwischengespeichert, in dem sie sich befinden, siehe z. B. stackoverflow.com/questions/4791807/data-uris-and-caching
Erik Dahlström
Genau - wenn sich das SVG-Dokument ändert, wird die eingebettete Bitmap neu geladen, auch wenn sie identisch ist. Wenn wir auf eine http-URL verlinken, kann diese separat zum SVG-Dokument zwischengespeichert werden.
GarethOwen
1
Guter Punkt. In meinem Kommentar zu Nicks Antwort sehen Sie, wie rational es ist, das Bitmap-Bild in das SVG-Bild einzubetten. Obwohl Sie Recht haben, ist die Codierung schlecht und ineffizient. Es sollte sich um eine separate binär codierte Datei handeln, die zusammen mit dem SVG-Bild verschoben wird.
Chmike
2

Sie können eine data:URL verwenden , um eine Base64-codierte Version eines Bildes einzubetten. Aber es ist nicht sehr effizient und würde nicht empfehlen, große Bilder einzubetten. Ist ein Link zu einer anderen Datei nicht möglich?

Nick
quelle
Dies hängt vom Anwendungsfall ab. Der Anwendungsfall, den ich in Betracht ziehe, ist der, bei dem eine SVG-Datei kopiert wird und der Internetzugang nicht immer verfügbar ist (dh eine Visitenkarte). Die IT ermöglicht es auch, die Verwendung der Karte privat zu halten. Mit einem verknüpften Bild könnte der Besitzer des Bildes alle Anzeigen seiner Karten verfolgen, die für ihn interessant sein könnten, aber nicht für den Karteninhaber. In sich geschlossenes SVG-Bild macht Sinn.
Chmike
Das stimmt, wenn Sie eine absolute URL verwenden, die auf irgendwo im Internet verweist. Es ist jedoch einfach, eine relative URL zu verwenden, sodass das Bild auch vorhanden ist, wenn die SVG-Datei lokal ist. Wenn Sie auch die Anforderung haben, dass es sich um eine einzelne weiterverteilbare Datei handeln muss, ändert sich dies erneut.
Nick
Es gibt Anwendungsfälle, in denen eine SVG-Grafik in sich geschlossen sein soll, dh EINE Datei, die das gesamte Bild enthält. Das Transportieren / Speichern mehrerer Dateien, um sicherzustellen, dass ein Bild gerendert wird, ist keine gute Sache, wenn Bilder auf Dateisystemen verarbeitet werden - Dinge können nicht mehr synchron sein oder zu leicht gelöscht werden.
Minok
-1

Es ist auch möglich, Bitmaps einzuschließen. Ich denke, Sie können auch Transformationen verwenden.

mächtiger Pflug
quelle
Tatsächlich. Ich habe gerade diesen Link gefunden: w3.org/TR/SVG/struct.html#ImageElement . Leider beantwortet es meine Bedenken nicht, was mir aufgefallen ist und in der Frage nicht angegeben ist. Ich werde die Frage bearbeiten.
Chmike