SVG foreignObject Example

100%

SVG foreignObject Example

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 2, 2011

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

HTML inside SVG

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.

JJverma

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

76% match

Loading thumbnail…

External SVG

This example demonstrates how to load an external SVG file and insert it directly into a web page using D3 v4’s `d3.xml` method. It fetches `rect01.svg`, which contains two rectangles: a thin blue outline of the canvas and a larger yellow rectangle with a thick navy border. The code specifies the MIME type as `image/svg+xml` and appends the parsed SVG document element to the page body. No data transformation or interactive behavior occurs—only static SVG retrieval and embedding.

Mmbostock

73% match

Loading thumbnail…

SVG fundamental

This example demonstrates how to render a minimal SVG-based visualization using D3 version 7. It shows the basic structure of an HTML document with SVG capabilities, though the initial body content is replaced by JavaScript. The code uses the `d3.select` API to target the `body` element and its `.text` method to display the string "Hello D3 version 7". The rendering approach highlights the simplicity of setting up an SVG context in a web page with a single JavaScript file.

Nnahedben

72% match

Loading thumbnail…

SVG FILE TESTER

This example demonstrates how an SVG file can be loaded and embedded into an HTML page. It uses D3’s `xml()` function to fetch an external SVG file, retrieves the document element, and adjusts its `viewBox` and dimensions to fit a specified height while preserving the aspect ratio. The modified SVG is then appended to the page body. The visualization also includes a static red cross-hatch pattern from the source file, rendered using standard SVG elements.

Aadventuresenglish.info@gmail.com

72% 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

71% match

Loading thumbnail…

SVG Fundamentals

This example introduces the fundamentals of D3 version 7 by rendering a simple text message directly into the body of an HTML page. It demonstrates the basic setup of an SVG-less D3 project, where the code imports the `select` function from the D3 library and uses it to target the `<body>` element. The example then sets the text content of that element to display the phrase "Hello D3 - This is just the beginning", showcasing data binding and DOM manipulation with a minimal, plain-text approach rather than a visual chart.

Eegregory31415

70% match

Loading thumbnail…

d3

This example displays the text “Hello HTML!” in large type, with an SVG element present on the page. It uses plain HTML, CSS, and JavaScript without any visualization libraries, rendering via the SVG namespace. The code demonstrates a minimal setup for mixing DOM content and scalable vector graphics in a single document.

DDaniil Nikolaev

70% match