100%

HTML inside SVG

✓ Published0🌍 Public

Last edited Jan 22, 2016

Created on Jan 22, 2016

This example demonstrates how to embed standard HTML elements inside an SVG canvas using the `foreignObject` API. A red-bordered SVG contains a green-bordered `div` positioned at specified x and y coordinates, while separate HTML `div` elements appear above and below the SVG. The page loads as a standalone `index.html` file with no external libraries, relying purely on native SVG and HTML markup to show that foreign objects can mix rendering contexts within a single graphic.

AI-generated description

HTML inside a SVG using foreignObject.

How to add a non-svg (html) element inside svg.

Similar vizzes

Loading thumbnail…

SVG foreignObject Example

This example demonstrates that HTML content from an external file can be embedded and displayed directly within an SVG canvas, showing a structured text layout with a heading and paragraphs. The code uses D3's `d3.select` to target the body and append an SVG element, then creates a `foreignObject` that nests a complete XHTML body using `d3.html`. The `xhtml:body` element is styled with a specific font and populated with placeholder text, highlighting how SVG can contain rich HTML formatting through the foreignObject API.

Mmbostock

83% match

Loading thumbnail…

svg -> foreign object -> iframe to load and render arbitrary html inside SVG (based on Matt Finkle article)

This example embeds a live web page inside an SVG graphic by nesting an XHTML `<foreignObject>` element within an SVG `<g>` transform. The foreign object contains an `<iframe>` whose `src` points to the external blog starkravingfinkle.org, rendering that arbitrary HTML content directly inside the SVG canvas while applying rotation and translation. The code relies on native SVG and XHTML namespace declarations, with a third-party script for display fixes. A warning notes that NoScript may flag the iframe as click-jacking.

GGerHobbelt

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the contrast between SVG rendering and HTML elements in a single page. It uses the SVG canvas to display a blank 960-pixel-wide drawing area, while a separate HTML div with a CSS class displays “Hello HTML!” at a massive 13em font size. The page is built with a minimal HTML structure, using inline CSS for styling and JavaScript. The SVG and HTML coexist, showing two different rendering approaches—vector graphics versus styled text—within the same document.

Xxiweixian

74% match

Loading thumbnail…

Implement SVG in HTML

This example demonstrates basic SVG shapes embedded directly in an HTML document without any JavaScript libraries. It shows circles, rectangles, and a line rendered as SVG elements, with some shapes using default black fills while others specify explicit fill colors like red and green. A `<g>` group element applies a shared fill color, stroke color, and stroke width to multiple shapes, and the `transform` attribute translates the group’s position. The page also includes a simple CSS rule that removes the body margin and hides overflow, while an unused `.lines` class suggests styling for potential path elements.

PPragati Porwal

74% match

Loading thumbnail…

Hello HTML

This example shows a single large black circle centered on a gray SVG canvas within a minimal HTML page. It demonstrates the fundamental structure of an HTML document combining CSS and JavaScript, though the visible rendering relies solely on inline SVG markup. The code uses no external libraries, instead directly embedding an SVG circle element with fixed coordinates and radius inside an `index.html` file. It serves as a bare-bones starting point for understanding how SVG shapes render within a web page, with no data binding or interaction present.

Wwisdomseal

74% match

Loading thumbnail…

HTML Starter

This example displays a simple HTML page with a green circle and a red rectangle rendered inside an SVG element. The page uses plain HTML and inline CSS to center the content and set a large font size. The SVG shapes are drawn directly in the markup with `circle` and `rect` elements, demonstrating basic static vector graphics without any JavaScript libraries or data sources. The code serves as a minimal starting point for HTML and SVG visualization projects.

Ggoshashi

74% match

Loading thumbnail…

SVG with HTML

This example demonstrates a static SVG scene composed of basic geometric shapes—a magenta circle, a red rectangle, a thick black line, and a triangular path—drawn directly in the HTML markup with fixed coordinates and styling. The page also includes a JavaScript module that imports D3’s `select` function to update the text of a `#message` div, while a separate CSS file sets a cyan background and hides overflow. The rendering relies entirely on SVG elements defined in the source, with no data binding or interaction.

SSushant Kunkekar

74% match

Loading thumbnail…

Learning HTML

This example shows a single static SVG composed of three circles arranged as a face-like figure, rendered directly in plain HTML. It demonstrates foundational web technologies—the SVG markup is embedded in `index.html`, with CSS setting the page margin and overflow, and no JavaScript is used. The drawing is created using primitive SVG elements, including a large magenta circle with a black stroke and two smaller stroked circles positioned as eyes, with the `fill` attribute left empty for the latter, leaving their centers transparent. The visualization is a minimal, hand-coded exercise in SVG syntax and styling.

GGRAVES1425

73% match