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

100%

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

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on May 6, 2012

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.

AI-generated description

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

78% match

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

76% match

Loading thumbnail…

Is this true

This example presents a single HTML page with an embedded SVG graphic labeled “Fork Hello HTML.” The visualization displays a basic circle element with a fixed radius of 100 pixels, rendered directly through the inline SVG markup. The page uses no external JavaScript libraries or data files; it relies solely on static SVG syntax within the body of the HTML document. A linked YouTube video accompanies the page, though its connection to the graphic is not demonstrated by the code. The rendering approach is purely declarative, with no dynamic interaction or animation.

TTheOutstandingDinosaur

68% match

Loading thumbnail…

Fork of HTML Starter

This example displays a decorative SVG illustration composed of an abstract background, scattered circular points, and text elements rendered in the Roboto font. The visualization uses static SVG shapes with CSS styling for gradients, stroke effects, and typography. The code defines a hidden iframe positioned behind the graphic and applies font loading via Google Fonts API. The SVG includes a linear gradient with multiple color stops, various styled shapes, and text elements, all hardcoded within the HTML structure using inline SVG markup.

Ssirenajbpearl@gmail.com

67% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example presents a minimal HTML page that embeds an SVG element containing a circle. The code demonstrates the basic structure of an HTML document with a `<svg>` tag, although it includes a misspelled `<cirle>` element. The page serves as a starting point for learning about inline SVG rendering within HTML, showing how vector graphics can be directly integrated into web content without external libraries. The rendering relies on the browser's native SVG support, with the circle currently having no specified coordinates or visible styling.

Bbgarci23@nd.edu

66% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes rendered directly in an HTML page, including a circle, rectangle, line, and text element. The shapes use explicit SVG attributes for positioning, dimensions, fill colors, and stroke properties, such as `fill`, `stroke`, and `stroke-width`. Rendered as inline SVG within a 900x500 viewport, the visualization serves as a minimal starter template showing how SVG primitives can be combined without any JavaScript libraries or data processing. The code includes an empty script tag and a CSS keyframe animation, but no dynamic behavior is triggered.

Aahavagowtham

66% match

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page demonstrates a bare-bones SVG circle rendered directly within an embedded `<svg>` element. The code uses only native HTML and SVG APIs—no JavaScript libraries—to display a single circle with a default radius of 100 units. The page loads from an `index.html` file with a simple document structure and no external styling or scripts. The iframe references an unrelated YouTube video, but the core visualization is the static SVG shape, rendered as vector graphics through the browser's markup parsing.

Nniyhyhiy

65% match

Loading thumbnail…

Fork of Hello HTML

This fork of the minimal "Hello HTML" example renders a single SVG circle with no visible fill or stroke. The page loads an iframe embedding a YouTube video above the graphic. The HTML file contains no JavaScript, CSS, or external data sources, relying solely on the browser's default SVG rendering for the circle and a static embed for the video.

Zziyameng

65% match