🌐 繁體中文 | English

SvgToXaml

A WPF desktop tool for browsing SVG files and converting them to XAML for use in .NET projects.

Forked from BerndK/SvgToXaml with custom enhancements for a modern dark-themed workflow.

Web Version

Try it online — no installation needed

A pure frontend web app (React + TypeScript) that runs entirely in the browser. Drag & drop SVG files, preview them, and convert to XAML instantly. Supports both Geometry and DrawingImage output modes, batch export to ResourceDictionary / UserControl / ZIP.

Features

• SVG Browser — Open a folder and instantly preview all SVG icons in a resizable grid
• Three Output Modes — Choose how SVGs are emitted to XAML:
  • Button Style (default) — Full Button template with IsMouseOver / IsPressed triggers, ready to drop in as a clickable icon button
  • Geometry Style — Pure ContentControl icon template; color controlled externally via Foreground
  • DrawingImage — Automatic fallback for complex SVGs containing gradients or clip paths
• Click to Copy — Single-click any icon to copy its XAML to the clipboard with a toast notification (default mode is configurable in Settings)
• Settings — In-app settings window (toolbar gear icon):
  • Default left-click action — Button Style vs Geometry Style, with side-by-side example XAML in the help tooltip
  • Design Tokens — define your project's color tokens once; SVG colors that match a token are emitted as {StaticResource TokenKey} instead of generating a per-icon SolidColorBrush. Manage tokens via inline DataGrid, Import from XAML (merge into existing list), or Edit XAML (open the full token set as a ResourceDictionary and edit it directly — saving replaces the whole list). Tokens are auto-sorted by key.
  • Settings persist across version updates (auto-migrated from the previous user.config on first launch of a new version).
• Detail View — Inspect preview, design size, actual size, stretch mode, raw XAML, and SVG source
• Background Toggle — Switch preview background between dark gray, light gray, and checkerboard
• Auto Refresh — FileSystemWatcher monitors the folder and refreshes automatically when files change
• i18n — Toggle between English and Traditional Chinese (zh-TW); preference is persisted
• Batch Export — Convert an entire folder of SVGs into a single XAML ResourceDictionary (Design Tokens are applied here too)
• Drag & Drop — Drop a folder to browse it, or drop a file to open the detail view
• Dark Theme — Modern dark UI powered by HandyControl, with custom-styled context menus, tooltips, and scrollbars
• Auto-Update Check — On launch, queries the latest GitHub release; a button appears in the toolbar when a newer version is available

Getting Started

Download

Go to Releases and download SvgToXaml.exe — run directly, no installation or extraction needed.

Build from Source

Prerequisites: Visual Studio 2022 with .NET Framework 4.6.2 targeting pack.

git clone https://github.com/howwmingnew/SvgToXaml.git
cd SvgToXaml
nuget restore SvgToXaml.sln
msbuild SvgToXaml.sln /p:Configuration=Release

Output: SvgToXaml\bin\Release\SvgToXaml.exe

Usage

GUI

1. Launch SvgToXaml.exe
2. Open a folder via the toolbar button, address bar, or drag & drop
3. Browse icons — resize with the slider, toggle background, switch language
4. Single-click (or double-click) any icon to copy its XAML to the clipboard — the output format follows your Default left-click action setting
5. Click the gear icon in the toolbar to open Settings — switch the default copy mode or manage Design Tokens
6. Right-click for context menu: copy XAML, view detail, open file

Design Tokens

If your WPF project already defines named brushes (e.g. Brand.Primary), you can register them in Settings → Design Tokens so SVG colors that match are emitted as references instead of inline brushes.

Given a token Brand.Primary = #FF0066CC and an SVG that uses #0066CC (alpha-less colors are treated as #FF0066CC):

<!-- Without tokens -->
<SolidColorBrush x:Key="home_Brush" Color="#FF0066CC" />
<Path Fill="{StaticResource home_Brush}" ... />

<!-- With token -->
<Path Fill="{StaticResource Brand.Primary}" ... />

Tokens are stored in %APPDATA%\SvgToXaml\design-tokens.txt and applied to both click-to-copy and folder export.

Command-line Interface (CLI)

SvgToXaml.exe doubles as a CLI for automation pipelines and AI agent integration — for example feeding Figma-exported SVGs through Claude Code, MCP workflows, or CI/CD. Two commands are available.

Convert — single file or folder, multiple output formats

Convert one SVG (or every SVG in a folder) and emit XAML to a file, a folder, or stdout.

# Single file → stdout (default format: geometry)
SvgToXaml.exe Convert /input icon.svg

# Single file → specific output file
SvgToXaml.exe Convert /input icon.svg /output icon.xaml

# Choose output format
SvgToXaml.exe Convert /input icon.svg /format button         # Button + hover/pressed triggers
SvgToXaml.exe Convert /input icon.svg /format drawingimage   # Legacy DrawingImage

# Folder batch → output folder
SvgToXaml.exe Convert /input ./icons /output ./xaml /recurse

# Folder batch → stdout (each file separated by `<!-- ===== filename ===== -->`)
SvgToXaml.exe Convert /input ./icons

# Read SVG from stdin — no temp file needed (great for piping curl/Figma asset URLs)
curl -s "https://example.com/icon.svg" | SvgToXaml.exe Convert /input - /name brush

Output formats:

• geometry (default) — Path-based ContentControl style, recolorable via Foreground
• button — Full Button style with IsMouseOver / IsPressed triggers
• drawingimage — Legacy DrawingImage (also the automatic fallback when an SVG contains gradients or clip paths)

Inputs:

• File path — single SVG (.svg / .svgz)
• Folder path — batch convert every SVG inside (/recurse to descend)
• - (dash) — read SVG content from stdin; pair with /name <baseName> so resource keys are meaningful (defaults to Icon if omitted)

Streams:

• stdout — pure XAML (when /output is omitted)
• stderr — banner, warnings, write confirmations, errors

Exit codes: 0 success · 1 IO / conversion error · 2 invalid arguments

Note: SvgToXaml is a Windows GUI app (WinExe). When invoking from PowerShell, Bash, or any non-cmd shell, wrap the call with cmd /c "..." so the parent process waits for completion and stdout redirection captures the output.

BuildDict — generate a single ResourceDictionary

SvgToXaml.exe BuildDict /inputdir:".\svg" /outputname:icons /outputdir:"."

Produces icons.xaml — a ResourceDictionary you can merge into your app:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="icons.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Then reference an icon:

<Path Data="{StaticResource cloud_iconGeometry}" Fill="{Binding Foreground}" />

Help

SvgToXaml.exe /?              # list all commands
SvgToXaml.exe Convert /?      # parameter details for Convert
SvgToXaml.exe BuildDict /?    # parameter details for BuildDict

Tech Stack

Component	Technology
Framework	WPF (.NET Framework 4.6.2)
Language	C# + XAML
SVG Engine	SharpVectors
UI Toolkit	HandyControl
Code Editor	AvalonEdit
CI/CD	GitHub Actions (auto-build on tag push)
Web Version	React 18 + TypeScript + Vite + Tailwind CSS

Project Structure

SvgToXaml/          # Main WPF application
  Infrastructure/   # LanguageManager, FolderPicker, utilities
  Localization/     # Strings.en.xaml, Strings.zh-TW.xaml
  ViewModels/       # MVVM view models
  Themes/           # CustomStyles.xaml (dark theme)
  Explorer/         # Folder tree control
SvgConverter/       # Core SVG-to-XAML conversion library
SvgConverterTest/   # Unit tests
WpfDemoApp/         # Demo application
svg-to-xaml-web/    # Web version (React + TypeScript)

License

Based on BerndK/SvgToXaml. See original repository for license details.