SVG Icon Support

guideXOS now includes native support for rendering Scalable Vector Graphics (SVG) icons, providing resolution-independent icons that look crisp at any size without requiring multiple pre-rendered bitmap versions.

? New Feature (Latest Version)

SVG support is a significant enhancement to guideXOS's graphics capabilities, enabling modern icon rendering without the overhead of storing multiple PNG sizes.

Overview

The SVG rasterizer in Kernel\Misc\SVG.cs provides software-based rendering of SVG graphics, converting vector paths to pixel data that can be displayed on the framebuffer. Unlike traditional bitmap icons (PNG), SVG icons can be scaled to any size without loss of quality.

Why SVG?

  • Resolution Independence: Icons look sharp at 16x16, 32x32, 48x48, or any size
  • Smaller File Sizes: One SVG file replaces 5+ PNG files
  • Theme Support: Colors can be changed programmatically
  • Scalability: Perfect for high-DPI displays
  • Modern Standard: SVG is the industry standard for vector graphics

Key Features

Supported Capabilities

  • ? ViewBox parsing for automatic scaling
  • ? Multiple element types (see below)
  • ? Fill and stroke colors
  • ? Hex colors (#RRGGBB format)
  • ? Named colors (black, white, red, green, blue)
  • ? Transparency with alpha blending
  • ? Stroke width control
  • ? Automatic fallback to checker pattern on errors

Supported SVG Elements

Element Attributes Supported Description
<rect> x, y, width, height, rx, ry, fill, stroke, stroke-width Rectangles with optional rounded corners
<circle> cx, cy, r, fill, stroke, stroke-width Perfect circles
<ellipse> cx, cy, rx, ry, fill Elliptical shapes
<path> d (M, L, H, V, Z commands), stroke, fill Basic path support (lines)
<polygon> points, fill, stroke Closed polygons
<polyline> points, stroke Open polylines
?? Note: Simplified Implementation

This is a **minimal SVG parser** optimized for embedded systems. Advanced features like gradients, filters, animations, and complex path curves (C, Q, A commands) are not yet implemented.

Usage

1. Loading an SVG Icon

using guideXOS.Misc;
using guideXOS.FS;

// Load SVG and render at 32x32
byte[] svgData = File.ReadAllBytes("icons/settings.svg");
Image icon = new SVG(svgData, 32, 32);

// Use the icon
Graphics.DrawImage(icon, x, y);

2. Using IconLoader (Recommended)

The IconLoader class provides automatic format detection: 

using guideXOS.Misc;

// Automatically detects SVG vs PNG
Image icon = IconLoader.LoadIcon("icons/settings.svg", 48, 48);

// Explicit format
Image icon2 = IconLoader.LoadIcon("icons/settings.svg", IconFormat.SVG, 24);

3. Using with Icons Class

The global Icons class supports switching between PNG and SVG: 

using guideXOS.GUI;

// Switch all icons to SVG format
Icons.SetIconFormat(IconFormat.SVG);

// Now all icon requests use SVG
Image configIcon = Icons.ConfigureIcon(32);
Image folderIcon = Icons.FolderIcon(48);

Example SVG Files

Simple Icon

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="10" fill="#00d9ff" />
  <rect x="10" y="6" width="4" height="12" fill="white" />
</svg>

Settings Gear Icon

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="3" fill="white" />
  <path d="M12 2 L14 6 L12 10 L10 6 Z" fill="#00d9ff" />
  <path d="M12 14 L14 18 L12 22 L10 18 Z" fill="#00d9ff" />
</svg>

Performance Considerations

Aspect SVG PNG
File Size ? 1-5 KB typical ?? 1-5 KB per size
Loading Time ?? Parsing + rasterization ? Direct PNG decode
Memory Usage ? One file, render on demand ?? Multiple size caches
Scalability ? Any size, always crisp ?? Fixed sizes only
Best For Icons, UI elements, logos Photos, complex images
?? Recommendation

Use SVG for **UI icons and interface elements**. Use PNG for **photographs, screenshots, and complex artwork** where vector representation isn't practical.

Implementation Details

Rendering Pipeline

  1. Parse: SVG bytes ? string ? element extraction
  2. Scale: ViewBox dimensions ? target pixel dimensions
  3. Rasterize: Vector paths ? pixel buffer (Bresenham algorithm)
  4. Blend: Alpha compositing for transparency
  5. Output: Image object ready for display

Source Code

The SVG renderer is implemented in Kernel\Misc\SVG.cs with approximately 650 lines of C# code. It's designed to be lightweight and operate without external dependencies or managed heap allocations where possible.