Does SVG support embedding of bitmap images?_问答_开发者

Is an SVG image purely vectorial or can we combine bitmap images into an SVG image ? How about transforms applied on the bitmap images (perspective, mappings, etc.) ?

Edit: Images may be included in an SVG by link reference. See http://www.w3.org/TR/SVG/struct.html#ImageElement. My question was in fact if bitmap images may be included inside the svg so that the svg image would be self contained. O开发者_Go百科therwise, whenever the svg image is displayed the link must be followed and the image downloaded. Apparently .svg files are simply xml files.

Yes, you can reference any image from the image element. And you can use data URIs to make the SVG self-contained. An example:

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

The svg element attribute xmlns:xlink declares xlink as a namespace prefix and says where the definition is. That then allows the SVG reader to know what xlink:href means.

The IMAGE_DATA is where you'd add the image data as base64-encoded text. Vector graphics editors that support SVG usually have an option for saving with images embedded. Otherwise there are plenty of tools around for encoding a byte stream to and from base64.

Here's a full example from the SVG testsuite.

I posted a fiddle here, showing data, remote and local images embedded in SVG, inside an HTML page:

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>

You could use a Data URI to supply the image data, for example:

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

The image will go through all normal svg transformations.

But this technique has disadvantages, for example the image will not be cached by the browser

You can use a data: URL to embed a Base64 encoded version of an image. But it's not very efficient and wouldn't recommend embedding large images. Any reason linking to another file is not feasible?

If you want to use that image multiple times inside SVG (Ref.):

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

<use href="#img" />
<use href="#img" />

It is also possible to include bitmaps. I think you also can use transformations on that.

I've come up with multiple solutions for drawing a space invader in SVG:

The first method makes use of a path with stroke-width="1". By repeatedly stopping and starting the line we can construct a bitmap image by traversing the scanlines. This has the drawback that the y-coordinate of each "dot" is shifted up by 0.5 pixels because the "y" coordinate is treated as the middle of stroke-width="1".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
    stroke="black"
    fill="none"
    d="M 4 4 l 1 0
M 10 4 l 1 0
M 5 5 l 1 0
M 9 5 l 1 0
M 4 6 l 7 0
M 3 7 l 2 0
M 6 7 l 3 0
M 10 7 l 2 0
M 2 8 l 11 0
M 2 9 l 1 0
M 4 9 l 7 0
M 12 9 l 1 0
M 2 10 l 1 0
M 4 10 l 1 0
M 10 10 l 1 0
M 12 10 l 1 0
M 5 11 l 2 0
M 8 11 l 2 0"
/>
</svg>

The second is through the use of <marker> with marker-start, marker-mid, and marker-end attributes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <defs>
    <marker
      id="dot"
      viewBox="0 0 1 1"
      refX="0.5"
      refY="0.5"
      markerWidth="1"
      markerHeight="1">
      <rect width="1" height="1" />
    </marker>
  </defs>
  <polyline
    points="4 4 10 4
5 5 9 5
4 6 5 6 6 6 7 6 8 6 9 6 10 6
3 7 4 7 6 7 7 7 8 7 10 7 11 7
2 8 3 8 4 8 5 8 6 8 7 8 8 8 9 8 10 8 11 8 12 8
2 9 4 9 5 9 6 9 7 9 8 9 9 9 10 9 12 9
2 10 4 10 10 10 12 10
5 11 6 11 8 11 9 11"
    fill="none"
    stroke="none"
    marker-start="url(#dot)"
    marker-mid="url(#dot)"
    marker-end="url(#dot)" />
</svg>

The third method is by defining a <rect> and then refer to it repeatedly with <use>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g fill="none"><rect id="dot" width="1" height="1"/></g>
<g fill="black">
<use href="#dot" x="4" y="4"/>
<use href="#dot" x="10" y="4"/>
<use href="#dot" x="5" y="5"/>
<use href="#dot" x="9" y="5"/>
<use href="#dot" x="4" y="6"/>
<use href="#dot" x="5" y="6"/>
<use href="#dot" x="6" y="6"/>
<use href="#dot" x="7" y="6"/>
<use href="#dot" x="8" y="6"/>
<use href="#dot" x="9" y="6"/>
<use href="#dot" x="10" y="6"/>
<use href="#dot" x="3" y="7"/>
<use href="#dot" x="4" y="7"/>
<use href="#dot" x="6" y="7"/>
<use href="#dot" x="7" y="7"/>
<use href="#dot" x="8" y="7"/>
<use href="#dot" x="10" y="7"/>
<use href="#dot" x="11" y="7"/>
<use href="#dot" x="2" y="8"/>
<use href="#dot" x="3" y="8"/>
<use href="#dot" x="4" y="8"/>
<use href="#dot" x="5" y="8"/>
<use href="#dot" x="6" y="8"/>
<use href="#dot" x="7" y="8"/>
<use href="#dot" x="8" y="8"/>
<use href="#dot" x="9" y="8"/>
<use href="#dot" x="10" y="8"/>
<use href="#dot" x="11" y="8"/>
<use href="#dot" x="12" y="8"/>
<use href="#dot" x="2" y="9"/>
<use href="#dot" x="4" y="9"/>
<use href="#dot" x="5" y="9"/>
<use href="#dot" x="6" y="9"/>
<use href="#dot" x="7" y="9"/>
<use href="#dot" x="8" y="9"/>
<use href="#dot" x="9" y="9"/>
<use href="#dot" x="10" y="9"/>
<use href="#dot" x="12" y="9"/>
<use href="#dot" x="2" y="10"/>
<use href="#dot" x="4" y="10"/>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="12" y="10"/>
<use href="#dot" x="5" y="11"/>
<use href="#dot" x="6" y="11"/>
<use href="#dot" x="8" y="11"/>
<use href="#dot" x="9" y="11"/>
</g>
</svg>

A refinement of the <rect> <use> solution above is to define binary permutations that can be reused later. This style kinda harks back to the days of 8-bit programming with sprites:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g fill="none">
<g id="s0001"><rect x="3" width="1" height="1"/></g>
<g id="s0010"><rect x="2" width="1" height="1"/></g>
<g id="s0011"><rect x="2" width="2" height="1"/></g>
<g id="s0100"><rect x="1" width="1" height="1"/></g>
<g id="s0110"><rect x="1" width="2" height="1"/></g>
<g id="s1000"><rect width="1" height="1"/></g>
<g id="s1011"><rect width="1" height="1"/><rect x="2" width="2" height="1"/></g>
<g id="s1100"><rect width="2" height="1"/></g>
<g id="s1101"><rect width="2" height="1"/><rect x="2" width="1" height="1"/></g>
<g id="s1110"><rect width="3" height="1"/></g>
<g id="s1111"><rect width="4" height="1"/></g>
</g>
<g fill="black">
<use href="#s1000" x="4" y="4"/>
<use href="#s0010" x="8" y="4"/>
<use href="#s0100" x="4" y="5"/>
<use href="#s0100" x="8" y="5"/>
<use href="#s1111" x="4" y="6"/>
<use href="#s1110" x="8" y="6"/>
<use href="#s0001" x="0" y="7"/>
<use href="#s1011" x="4" y="7"/>
<use href="#s1011" x="8" y="7"/>
<use href="#s0011" x="0" y="8"/>
<use href="#s1111" x="4" y="8"/>
<use href="#s1111" x="8" y="8"/>
<use href="#s1000" x="12" y="8"/>
<use href="#s0010" x="0" y="9"/>
<use href="#s1111" x="4" y="9"/>
<use href="#s1101" x="8" y="9"/>
<use href="#s1000" x="12" y="9"/>
<use href="#s0010" x="0" y="10"/>
<use href="#s1000" x="4" y="10"/>
<use href="#s0010" x="8" y="10"/>
<use href="#s1000" x="12" y="10"/>
<use href="#s0110" x="4" y="11"/>
<use href="#s1100" x="8" y="11"/>
</g>
</svg>