Bits & Bytes

Suppose that you have an image element inside of an HTML file, like this one:

<img width="30px" height="40px" src= "MyImage.svg"  />

and your SVG file, “MyImage.svg”, looks like this:

<svg width="30" height="40" xmlns="http://www.w3.org/2000/svg">
  <image href="Christ.png" x="10" y="20" width="20" height="20"></image>
</svg>

In this case, the image inside the svg, “Christ.png”, will not display because the image element will not allow the reference to the external file “Christ.png”.

However, this can be fixed in a few different ways:

1. Change the image element to an embed element:

   <embed width=”20px” height=”20px” src= “MyImage.svg” />

2. Eliminate the image element and include the svg element in the HTML directly.
3. Convert the image into a 64 bit data URI

If you have never seen a 64 bit data URI, they look something like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAB3RJT
UUH5AQCFiQbfa5q9wAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAHgSURB
VHjaY2DABhwMRVuClcvsGBJMGcJtJHXleRiIByH2MunOkuXJbl059rneUlbqfCRo9tYRaQyUaS8
JaC/0LgpXtdMTwVDCCCKUBVgdVEW8TWQyPOWT3eQKgpTzQ1SLI3Uakg0qY9XKo1TrknXzwtQTgb
Je8h5m8vbGqhEOig4afHK8nCD9oSYSaT7aMwpMJqWrNsaqT8jS6cky6Mq17M4178k3a8iwzI82S
vBRi3BRDLOVrQpXL43QdtcTYGBggljPICrCqafAn2wv3ZKkoSXNYyAp4GMuE2Al52ok6WslHe4g
E+8qmxuouaDSNM9PztdYRFmAC8X9EDC3TK8tXRvIyPWVK/STKfCSLvSS0ZHnY2PgWFZjXJOoBZR
iZWDmYWHGGliMAcZiIVYSTYmaJf4K2W6yGe4qCU7iC8r1OjI0iQptbXHuPB/FCSmqk9JUp2arzi
vTSvSWwXAlDsAEUsIOdGBZgOyBKbYuFsJAPhszQX0wUBWmFmApo8MgHO+gBDKJhYRkwtCdrjQ5R
9lRVSreQ4kUfWBgJsfZnaQ2IU8nO1iOZM1SvBw1UVpZPvJANjPxvoUANQHWSAtxG01hkq0FAm5m
Fl4GblYGdkbCkYMBWBgZhdjZWJiYyLF5cAMAegthBPCMZ8AAAAAASUVORK5CYII=

Warning: 64 bit data URI encoded images can be quite long, even for a moderately-sized image. The text above was generate for the small 20 pixel by 20 pixel image shown here:

So, instead of our original svg element, we could use this one with a 64 bit encoded data URI:

<svg width="30" height="40" xmlns="http://www.w3.org/2000/svg">
  <image x="10" y="20" width="20" height="20" href="data:image/png;base64
  ,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAB3RJTUUH5AQCFiQbfa5q9w
  AAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAHgSURBVHjaY2DABhwMR
  VuClcvsGBJMGcJtJHXleRiIByH2MunOkuXJbl059rneUlbqfCRo9tYRaQyUaS8JaC/0LgpX
  tdMTwVDCCCKUBVgdVEW8TWQyPOWT3eQKgpTzQ1SLI3Uakg0qY9XKo1TrknXzwtQTgbJe8h5
  m8vbGqhEOig4afHK8nCD9oSYSaT7aMwpMJqWrNsaqT8jS6cky6Mq17M4178k3a8iwzI82Sv
  BRi3BRDLOVrQpXL43QdtcTYGBggljPICrCqafAn2wv3ZKkoSXNYyAp4GMuE2Al52ok6WslH
  e4gE+8qmxuouaDSNM9PztdYRFmAC8X9EDC3TK8tXRvIyPWVK/STKfCSLvSS0ZHnY2PgWFZj
  XJOoBZRiZWDmYWHGGliMAcZiIVYSTYmaJf4K2W6yGe4qCU7iC8r1OjI0iQptbXHuPB/FCSm
  qk9JUp2arzivTSvSWwXAlDsAEUsIOdGBZgOyBKbYuFsJAPhszQX0wUBWmFmApo8MgHO+gBD
  KJhYRkwtCdrjQ5R9lRVSreQ4kUfWBgJsfZnaQ2IU8nO1iOZM1SvBw1UVpZPvJANjPxvoUAN
  QHWSAtxG01hkq0FAm5mFl4GblYGdkbCkYMBWBgZhdjZWJiYyLF5cAMAegthBPCMZ8AAAAAA
  SUVORK5CYII="/>
</svg>