I can embed inner.svg within outer.svg using <image>. However, when the outer SVG is embedded within HTML, the inner content disappears. Why does this happen, and how can it be avoided?
inner.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="2" height="2" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="1" cy="1" r="1" fill="red" />
</svg>
outer.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="4" height="2" viewBox="0 0 4 2" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="1" cy="1" r="1" fill="blue" />
<image href="inner.svg" width="2" height="2" x="2" y="0"/>
</svg>
example.html
<!DOCTYPE html>
<html>
<body>
<img style="width:100%;" src="outer.svg" />
</body>
</html>
