Does SVG support embedding of bitmap images

Question

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  Otherwise  whenever the svg image is displayed the link must be followed and the image downloaded  Apparently  svg files are simply xml files

User · Answer

I posted a fiddle here  showing data  remote and local images embedded in SVG  inside an HTML page   http   jsfiddle net MxHPq    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt SVG embedded bitmaps in HTML lt  title gt       lt style gt           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                  lt  style gt   lt  head gt    lt body gt       lt h1 gt SVG embedded bitmaps in HTML lt  h1 gt       lt p gt The trick appears to be ensuring the image has the correct width and height atttributes lt  p gt        lt h2 gt Example 1  Embedded data lt  h2 gt       lt svg id  example1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt           lt image x  0  y  0  width  5  height  5  xlink href  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg     gt       lt  svg gt        lt h2 gt Example 2  Remote image lt  h2 gt       lt svg id  example2  version  1 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt           lt image x  0  y  0  width  275  height  95  xlink href  http   www google co uk images srpr logo3w png    gt       lt  svg gt        lt h2 gt Example 3  Local image lt  h2 gt       lt svg id  example3  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt           lt image x  0  y  0  width  136  height  23  xlink href   img logo png    gt       lt  svg gt     lt  body gt   lt  html gt

User · Answer

Yes  you can reference any image from the image element  And you can use data URIs to make the SVG self-contained  An example   lt svg xmlns  quot http   www w3 org 2000 svg quot       xmlns xlink  quot http   www w3 org 1999 xlink quot  gt                lt image         width  quot 100 quot  height  quot 100 quot          xlink href  quot data image png base64 IMAGE DATA quot            gt           lt  svg gt   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

User · Answer

You could use a Data URI to supply the image data  for example    lt svg xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt    lt image width  20  height  20  xlink href  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg     gt    lt  svg gt    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

User · Answer

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

User · Answer

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

[image] Does SVG support embedding of bitmap images?

Examples related to image

Examples related to svg

Examples related to bitmapimage