169

SVG画像は純粋にベクトルですか、それともビットマップ画像を組み合わせてSVG画像にすることができますか？ビットマップ画像に適用される変換（パースペクティブ、マッピングなど）はどうですか？

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

4

6 に答える 6

243

はい、image要素から任意の画像を参照できます。また、データURIを使用して、SVGを自己完結型にすることができます。例：

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

svgelement属性は名前空間プレフィックスとしてxmlns:xlink宣言し、定義がどこにあるかを示します。これにより、SVGリーダーは何を意味するのかを知ることができます。xlinkxlink:href

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

これがSVGテストスイートの完全な例です。

于 2011-06-06T10:02:53.010 に答える
28

ここにフィドルを投稿し、HTMLページ内にSVGに埋め込まれたデータ、リモートおよびローカル画像を表示します。

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>
于 2013-01-21T13:51:00.627 に答える
22

データ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変換を通過します。

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

于 2011-06-06T10:07:28.997 に答える
4

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

于 2011-06-06T09:57:37.083 に答える
0

ビットマップを含めることも可能です。その上で変換を使用することもできると思います。

于 2011-06-06T08:59:36.213 に答える
0

その画像をSVG内で複数回使用する場合（参照）：

<image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />

<use href="#img" />
<use href="#img" />
于 2021-10-19T13:35:19.817 に答える