web-dev-qa-db-ja.com

SVGはビットマップ画像の埋め込みをサポートしていますか？

SVG画像は純粋にベクトルですか、またはビットマップ画像をSVG画像に結合できますか？ビットマップ画像に適用された変換（遠近法、マッピングなど）はどうですか？

Edit：画像はリンク参照によってSVGに含めることができます。 http://www.w3.org/TR/SVG/struct.html#ImageElement を参照してください。私の質問は、実際にはビットマップ画像がsvg内に含まれており、svg画像が自己完結する可能性があるかどうかでした。それ以外の場合、svg画像が表示されるたびにリンクをたどり、画像をダウンロードする必要があります。どうやら.svgファイルは単なるxmlファイルです。

imagesvgbitmapimage
136
chmike

はい、<image>要素から任意の画像を参照できます。そして、 data uri's を使用して、svgを完全に自己完結させることができます。例：

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

ドットは、エンコードされたbase64データを追加する場所です。svgをサポートするベクターグラフィックエディターには、通常、画像を埋め込んで保存するオプションがあります。それ以外の場合は、base64との間でエンコードするためのツールがたくさんあります。

Svgテストスイートからの完全な 例 を次に示します。

187
Erik Dahlström

ここにフィドルを投稿し、SVGに埋め込まれたデータ、リモート画像、ローカル画像を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>
21
davestewart

Data URI を使用して、画像データを提供できます。例：

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

画像はすべての通常のsvg変換を経ます。

しかし、この手法には欠点があります。たとえば、画像はブラウザによってキャッシュされません。

17
GarethOwen

data: URL を使用して、画像のBase64エンコードバージョンを埋め込むことができます。しかし、それはあまり効率的ではなく、大きな画像を埋め込むことはお勧めしません。別のファイルにリンクする理由はありませんか？

2
Nick