Image file day1-static.svg
static image
Unless otherwise noted, all images shown in these pages are created dynamically by your browser at the time the page is loaded, using the code discussed in these pages. Images for which this is not the case will be explicitly noted as a "static image."
The important JavaScript and HTML code used to generate these images and interactive features is listed in the Resources used in this page section at the bottom of each page.
This series begins with a fundamental approach to graphics programming: simulating raster (pixel-based) images using SVG (Scalable Vector Graphics). While we'll eventually move to more sophisticated rendering techniques, starting with SVG provides a clear foundation for understanding how individual pixels can be manipulated to create images. (If you want to dive straight into ray tracing concepts and coding, you can jump ahead to Day 12. However, I believe you'll find it worthwhile to digest the concepts in these introductory pages first.)
Our first step demonstrates the simplest approach: including a pre-created SVG file as an external resource using the HTML <img> element.
This approach treats the SVG file like any other image file (PNG, JPG, etc.), but with the advantage that the SVG content can be examined
and understood as structured markup rather than binary data.
The image below shows a 20×20 pixel grid where each "pixel" is actually a small SVG rectangle. This creates the illusion of a raster image while maintaining the benefits of vector graphics: scalability, inspectability, and programmatic manipulation potential.
The HTML code below shows how we reference the external SVG file using a standard <img> element. This is the simplest way to include
an SVG file in a web page, treating it just like any other image format. The browser loads the SVG file and renders it as part of the page content.
Code extract failed
Here we can see the actual SVG markup that creates our simulated raster image. Each <rect> element represents a single "pixel" in our
20×20 grid. The SVG uses a coordinate system where each rectangle is positioned using x and y attributes, with colors specified by the fill attribute.
This structured approach makes it easy to understand how the image is constructed.
Code extract failed
This is the JavaScript function that originally generated the static SVG file shown above. The function returns a complete SVG document as a string, which can then be saved to a file or used directly. When you click the "Generate SVG File Content" button below, this same code will execute and display the resulting SVG string in the textarea.
Key aspects of this SVG generation approach:
<svg> tag is required for proper rendering<rect> (rectangle) element with specific x, y, width, and height attributesCode extract failed