Does SVG support embedding of bitmap images?

by

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.

More Related Contents:

  1. What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG? [closed]
  2. SVG. Reverse image using css. Keep image at the same place
  3. How to render a scaled SVG to a QImage?
  4. SVG data image not working as a background-image in a pseudo element
  5. Convert an image to grayscale in HTML/CSS
  6. HTML5 Pre-resize images before uploading
  7. Drawing an image from a data URL to a canvas
  8. How to store(bitmap image) and retrieve image from sqlite database in android? [closed]
  9. Detection of coins (and fit ellipses) on an image
  10. How to upload, display and save images using node.js and express [closed]
  11. How to set size for local image using knitr for markdown?
  12. Horizontal Line detection with OpenCV
  13. How to find all connected components in a binary image in Matlab?
  14. Algorithm to detect presence of text on image
  15. How to do this image transformation?
  16. matplotlib imshow(): how to animate?
  17. Find local maxima in grayscale image using OpenCV
  18. List of all the App Engine images service get_serving_url() URI options
  19. Export pictures from excel file into jpg using VBA
  20. How to use p:graphicImage with StreamedContent within p:dataTable? [duplicate]
  21. Node Express sending image files as API response
  22. Qt jpg image display
  23. Google AJAX API – How do I get more than 4 Results?
  24. Overlapping sliding window over an image using blockproc or im2col?
  25. Connected-component labeling with ImageMagick
  26. How can I set a website image that will show as preview on Facebook?
  27. Loading image src using a variable containing base64 data in AngularJS
  28. Non-linear axes for imshow in matplotlib
  29. How to make a Gaussian filter in Matlab
  30. Mapping image into cylinder or sphere shape?

Leave a Comment