How Archify Injects SVG Components into HTML Templates

Archify embeds SVG graphics directly into HTML using two strategies: data-URI favicons defined in the base template and build-time placeholder replacement for inline diagram markup, eliminating external HTTP requests.

The tt-a1i/archify repository employs a zero-dependency approach to inject SVG components into the HTML template, ensuring instant rendering of icons and diagrams without network latency. By encoding graphics directly into the markup—either as UTF-8 data URIs or raw inline elements—the build pipeline produces self-contained pages where CSS variables control styling consistently across all vector assets.

The Dual-Method SVG Injection Strategy

Archify implements SVG injection through two distinct mechanisms that operate at different stages of the page lifecycle. Both methods prioritize performance by removing separate asset requests.

Data-URI Favicon Injection

The base HTML template contains the site's favicon as an inline data URI, embedding the complete SVG definition within the href attribute. This technique encodes the vector graphic as a data:image/svg+xml;utf8 string, allowing the browser to parse the icon immediately upon document load.

In scripts/start-template.html, the favicon link appears as follows:

<link rel="icon"
      type="image/svg+xml"
      href="data:image/svg+xml;utf8,
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'>
              <polygon points='14,2 26,8 26,20 14,26 2,20 2,8'
                       fill='%23083344'
                       stroke='%2322d3ee'
                       stroke-width='1.5'/>
              <circle cx='14' cy='15' r='2.5' fill='%2322d3ee'/>
            </svg>">

Source: scripts/start-template.html lines 14-15【/cache/repos/github.com/tt-a1i/archify/main/scripts/start-template.html†L14-L15】

Build-Time Inline SVG Replacement

For diagram components and brand marks, Archify uses a placeholder replacement system during the build process. The scripts/build-start.mjs script reads the template HTML, locates marker comments (such as <!--{{SVG_MARK}}-->), and substitutes them with raw SVG file contents or dynamically generated SVG strings from the diagram engine.

The resulting HTML contains fully expanded <svg> elements. For example, generated/maka-regenerated.workflow.html contains the injected brand mark:

<svg class="brand-mark" viewBox="0 0 28 28" fill="none" aria-hidden="true">
  <polygon points="14,2 26,8 26,20 14,26 2,20 2,8"
           fill="rgba(8,51,68,.8)" stroke="#22d3ee"
           stroke-width="1.5"/>
  <polygon points="14,7 21,11 21,19 14,23 7,19 7,11"
           stroke="rgba(34,211,238,.45)"/>
  <circle cx="14" cy="15" r="2.5" fill="#22d3ee"/>
</svg>

Location: generated/maka-regenerated.workflow.html lines 415-424【/cache/repos/github.com/tt-a1i/archify/main/generated/maka-regenerated.workflow.html†L415-L424】

Build Pipeline Implementation

The injection process occurs during the build step, where scripts/build-start.mjs orchestrates the transformation from template to final HTML. The script performs a string replacement operation that inserts SVG markup where placeholder comments exist.

The build logic follows this pattern:

// scripts/build-start.mjs (simplified workflow)
import { readFileSync, writeFileSync } from 'fs';

const template = readFileSync('scripts/start-template.html', 'utf8');
const svgMark  = readFileSync('assets/brand-mark.svg', 'utf8');

const finalHtml = template.replace('<!--{{SVG_MARK}}-->', svgMark);
writeFileSync('dist/index.html', finalHtml);

This approach ensures that the final HTML delivered to the browser requires no additional network round-trips to render vector graphics. The inline SVG inherits CSS custom properties defined elsewhere in the page, enabling dynamic theming through color variables like %2322d3ee (cyan) and %23083344 (dark blue).

Summary

• Data-URI method: Encodes favicon SVGs directly into <link> tags within scripts/start-template.html using UTF-8 data URIs.
• Build-time method: Uses scripts/build-start.mjs to replace placeholder comments with raw SVG strings from source files or generated diagrams.
• Zero external requests: Both strategies eliminate separate HTTP fetches for vector assets, reducing latency and eliminating render-blocking resource loads.
• CSS integration: Inline SVGs reference CSS variables for stroke and fill properties, ensuring consistent theming across the application.
• Key files: scripts/start-template.html (source template), scripts/build-start.mjs (injection logic), and generated/maka-regenerated.workflow.html (output example).

Frequently Asked Questions

How does Archify inject the favicon SVG without an external file?

Archify defines the favicon directly in scripts/start-template.html using a data:image/svg+xml;utf8 URI scheme. The SVG markup is URL-encoded and placed inside the href attribute of the <link rel="icon"> tag, allowing the browser to decode and render the icon without requesting a separate .svg file.

What build script handles SVG component injection in Archify?

The scripts/build-start.mjs script manages SVG injection. It reads the base template, identifies placeholder markers (such as <!--{{SVG_MARK}}-->), and substitutes them with the contents of SVG files from the assets/ directory or SVG strings generated by the diagram engine. The script then writes the final HTML to the distribution folder.

Why does Archify use inline SVG instead of <img> tags?

Inline SVG eliminates HTTP request overhead and avoids render-blocking resource fetches. By embedding graphics directly into the HTML, Archify ensures immediate availability of vector assets and enables CSS styling control through variables. This approach guarantees that diagram components and brand marks render instantly with the correct colors defined in the page's stylesheet.

Where can I see an example of injected SVG in the final output?

The file generated/maka-regenerated.workflow.html demonstrates the result of the build process. Lines 415-424 contain the fully expanded <svg class="brand-mark"> element that was injected during the build step, replacing the original placeholder comment from the template.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}