Is it possible to display an .html document , or .html fragment at CSS content?

Question

At documentation for css content at MDN :

/* <uri> value */ 
content: url(http://www.example.com/test.html);

---

Question:

It is possible to display an image at the css content property of html element at url() value of content

.content {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}

<div class="content"></div>

or using content property at a pseudo element, for example ::before

.content::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}

<div class="content"></div>

---

Is it possible to render an .html document , .html element at css content ?

.content {
  content: url(data:text/html,abc);
}

<div class="content"></div>

---

See also CSS Generated Content Module Level 3

The content property dictates what is rendered inside the element or pseudo-element. It takes a comma separated list of URIs, followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail.

<uri> For URIs other than URIs in the last comma separated section of the value, if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any.

EXAMPLE 4

h1 { content: url(header/mng), url(header/png), none; }

In the example above, if header/mng wasn’t in a supported format, then header/png would have been used instead. In the example above, if header/png wasn’t available either, then the <h1> element would be empty, as the last alternative is none.

To make an element fallback on its contents, you have to explicitly give contents as a fallback:

EXAMPLE 5

content: url(1), url(2), url(3), contents;

ISSUE 3 What happens when no formats are supported, and the author does not explicitly indicate a fallback?

ISSUE 4 Why doesn’t an element fallback to contents unless an author explicitly says so?

---

Update

The furthest have been able to reach, here, to embedding and displaying html document in css generated content; using approach demonstrated by @LGSon. Included css generated content within html at svg as well.

As noted by @RokoC.Buljan, the MIME type is not "text/html".

content {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJ5ZXMiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDQwMCAzMDAiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjQwMHB4IiBoZWlnaHQ9IjMwMHB4IiAKICAgICByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPgogICAgICA8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PGhlYWQ+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5jb250ZW50e2NvbnRlbnQ6dXJsKCJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQVNjQUFBRERDQVlBQUFEQStOZGhBQUFBQkhOQ1NWUUlDQWdJZkFoa2lBQUFBcGxKUkVGVWVKenQxQ0VCQUNBQXdEQ2dmdzF5UWdFOEYxdUNxOCt6eHhrQU1ldDNBTUNMT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRkpGMlBYQkNtc0t5TUpBQUFBQUVsRlRrU3VRbUNDIil9PC9zdHlsZT48L2hlYWQ+PGJvZHkgc3R5bGU9ImJvcmRlcjp0aGljayBzb2xpZCB5ZWxsb3c7YmFja2dyb3VuZDp1cmwoZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFTY0FBQURCQ0FZQUFBQ05NSFpxQUFBQUJITkNTVlFJQ0FnSWZBaGtpQUFBQXBKSlJFRlVlSnp0MURFQndDQVF3TUNueW5FT0JycVQ0VTVCcHF6WmN3WWc1bnNkQVBESG5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VpNlBEb0RBYnlDc244QUFBQUFTVVZPUks1Q1lJST0pIj48aDE+VGV4dCBnb2VzIGhlcmU8L2gxPjxpbWcgc3JjPSJncmVlbi5wbmciPjwvaW1nPjxkaWFsb2cgc3R5bGU9InRvcDoxNTBweDsiIG9wZW49InRydWUiPmNvbnRlbnQ8L2RpYWxvZz48Y29udGVudD48L2NvbnRlbnQ+PC9ib2R5PjwvaHRtbD4KICAgIDwvZm9yZWlnbk9iamVjdD4KPC9zdmc+Cg==)
}

<content></content>

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 300">
    <foreignObject width="400px" height="300px" 
     requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">content{content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADDCAYAAADA+NdhAAAABHNCSVQICAgIfAhkiAAAAplJREFUeJzt1CEBACAAwDCgfw1yQgE8F1uCq8+zxxkAMet3AMCLOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJF2PXBCmsKyMJAAAAAElFTkSuQmCC")}</style></head><body style="border:thick solid yellow;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=)"><h1>Text goes here</h1><img src="green.png"></img><dialog style="top:150px;" open="true">content</dialog><content></content></body></html>
    </foreignObject>
</svg>

---

content , 3.4. Resource Locators: the <url> type

Answer 1

Updated to clarify, that this SVG solution is posted based on a request made by the OP.

Here are a few samples, as an alternative, since normal HTML document doesn't get rendered (yet), where a SVG is used, using both css content and pseudo element css content property.

Note, it renders as an image/svg+xml, though the 2:nd sample show it can contain HTML elements.

div {
  height: 120px;
  background: gray;
}
div:before {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E);
}
div:after {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}

span {
  height: 120px;
  background: gray;
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E);
}

<div></div>
<span></span>

Decoded SVG

<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'>
  <text x='20' y='45' font-size='13px'>Hello World from SVG</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="80" width="160">
  <circle cx="40" cy="40" r="38" stroke="black" stroke-width="1" fill="red" />
  <circle cx="120" cy="40" r="38" stroke="black" stroke-width="1" fill="blue" />
</svg>

---

Updated: Added the commented plnkr sample that also contain html/xml elements.

.content:before {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22300%22%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%20fill%3D%22blue%22%2F%3E%0A%20%20%3CforeignObject%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%20%20Here%20is%20a%20%3Cstrong%3Eparagraph%3C%2Fstrong%3E%20that%20requires%20%3Cem%3Eword%20wrap%3C%2Fem%3E%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%20%0A%20%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%20fill%3D%22red%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%22120%22%20y%3D%22120%22%20width%3D%22180%22%20height%3D%22180%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EFirst%3C%2Fstrong%3E%20item%3C%2Fli%3E%0A%20%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cem%3ESecond%3C%2Fem%3E%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3EThrid%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E%0A);
    }

.content2 {
  content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22300%22%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%20fill%3D%22blue%22%2F%3E%0A%20%20%3CforeignObject%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%20%20Here%20is%20a%20%3Cstrong%3Eparagraph%3C%2Fstrong%3E%20that%20requires%20%3Cem%3Eword%20wrap%3C%2Fem%3E%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%20%0A%20%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%20fill%3D%22red%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%22120%22%20y%3D%22120%22%20width%3D%22180%22%20height%3D%22180%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EFirst%3C%2Fstrong%3E%20item%3C%2Fli%3E%0A%20%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cem%3ESecond%3C%2Fem%3E%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3EThrid%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E%0A);
    }

<content class="content"></content>
<content class="content2"></content>

Decoded SVG

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
  <rect x="10" y="10" width="100" height="150" fill="blue"/>
  <foreignObject x="10" y="10" width="100" height="150">
      <div xmlns="http://www.w3.org/1999/xhtml">
          Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
  </foreignObject>

  <circle cx="200" cy="200" r="100" fill="red" />
  <foreignObject x="120" y="120" width="180" height="180">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <ul>
          <li><strong>First</strong> item</li>

          <li><em>Second</em> item</li>
          <li>Thrid item</li>
        </ul>
      </div>
  </foreignObject>
</svg>