External SVG

100%

✓ Published0🌍 Public

Last edited Jul 8, 2016

Created on Jun 8, 2011

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

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

73% match

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

SSagar Malviya

73% match

Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2

72% match

Loading thumbnail…

Parse SVG picture

This example parses an external SVG file and injects its contents into a D3.js visualization. The code uses `d3.xml` to load the `drawing.svg`, then appends the document element directly into the SVG container, which is sized to the browser viewport via `document.body.clientWidth` and `clientHeight`. Styling defined in CSS applies to the imported paths, lines, and text. The result displays the original vector picture, with tree layout functions imported from D3 but not used in the final rendering.

VVicfreak10

72% match

Loading thumbnail…

Drawing SVG rect with D3

This example demonstrates two ways to render a blue SVG rectangle: one statically defined directly in HTML markup, and another generated dynamically using D3’s selection and data-join methods. The code uses `d3.select` to append an `svg` element to the body, then chains an `append('rect')` call to set its width and height attributes via `.attr()` and its fill color via `.style()`. A hand-written `<rect>` element appears above as a visual comparison, while the D3-generated rectangle is rendered below, with both sharing the same dimensions and color.

AAlina Sul

72% match

Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe

72% match

Loading thumbnail…

d3js Exercice 3 - svg

This example demonstrates a minimal SVG composition built with D3.js v4, combining geometric shapes without data binding. It shows a blue rectangle and a yellow circle positioned inside an SVG canvas of fixed dimensions, highlighting how basic shapes render and layer in a web document. The code explicitly uses D3’s selection and styling methods, though the main styling is applied directly via SVG attributes such as `width`, `height`, `fill`, and `cx`/`cy` for positioning. The visualization serves as an introductory exercise, with commented-out instructions suggesting color manipulation and transforms like `translate` and `rotate`. No dynamic data is involved; the focus is purely on static SVG rendering and potential interactive styling adjustments.

AAlainRo

71% match