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:
- Change the image element to an embed element:
<embed width=”20px” height=”20px” src= “MyImage.svg” />
- Eliminate the image element and include the svg element in the HTML directly.
- 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>
Tags: display, html, image, img, problem, svg
Michael HallBy: Michael Hall