it-swarm.com.de

Unterstützt SVG das Einbetten von Bitmap-Bildern?

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 per Link-Referenz in eine SVG 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, so dass das SVG-Bild in sich geschlossen wäre. Andernfalls muss bei jeder Anzeige des SVG-Bildes der Link befolgt und das Bild heruntergeladen werden. Offensichtlich sind .svg-Dateien einfach XML-Dateien.

136
chmike

Ja, Sie können auf jedes Bild aus dem Element <image> Verweisen. Und Sie können data uri's verwenden, um das SVG vollständig eigenständig zu machen. Ein Beispiel:

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

Die Punkte sind der Ort, an dem Sie die codierten base64-Daten hinzufügen würden. Bei Vektorgrafiken, die svg unterstützen, gibt es normalerweise eine Option zum Speichern mit eingebetteten Bildern. Ansonsten gibt es viele Tools, mit denen Sie von und nach base64 codieren können.

Hier ist ein vollständiges Beispiel von der Svg-Testsuite.

187
Erik Dahlström

Ich habe hier eine Fiedel gepostet, in der Daten, entfernte und lokale Bilder, die in SVG eingebettet sind, in einer HTML-Seite angezeigt werden:

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

Sie können einen Daten-URI verwenden, um die Bilddaten bereitzustellen. 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, beispielsweise wird das Bild nicht vom Browser zwischengespeichert

17
GarethOwen

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

2
Nick