Contents

coenttb/swift-svg

A Swift package for type-safe SVG generation.

Overview

swift-svg provides a type-safe, SwiftUI-like DSL for generating SVG graphics in Swift. It combines strongly-typed SVG elements with compile-time validation for vector graphics generation.

import SVG

let logo = svg(width: 200, height: 200) {
    defs {
        linearGradient(id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%") {
            stop(offset: "0%", stopColor: "#FF6B6B")
            stop(offset: "100%", stopColor: "#4ECDC4")
        }
    }

    circle(cx: 100, cy: 100, r: 80) {
        fill("url(#gradient)")
        stroke("#333")
        strokeWidth(2)
    }

    text("Swift", x: 100, y: 105) {
        fontSize(24)
        fontFamily("system-ui, sans-serif")
        textAnchor("middle")
        fill("white")
    }
}

let svgString = logo.render()

Features

  • Type-safe SVG element definitions
  • Compile-time validation of SVG structures
  • SwiftUI-like DSL syntax
  • Complete SVG element support (shapes, text, gradients, patterns, transforms)
  • HTML integration via swift-html
  • Lightweight with minimal dependencies

Installation

Add swift-svg to your Swift package:

dependencies: [
    .package(url: "https://github.com/coenttb/swift-svg", from: "0.1.0")
]

Quick Start

import SVG

let icon = svg(viewBox: "0 0 24 24") {
    path(d: "M12 2L2 7l10 5 10-5-10-5z") {
        fill("currentColor")
    }
    path(d: "M2 17l10 5 10-5-10-5z") {
        fill("currentColor")
        opacity(0.7)
    }
}

let svgString = icon.render()

Usage Examples

Basic Shapes

import SVG

let basicShapes = svg(width: 200, height: 200) {
    circle(cx: 50, cy: 50, r: 40) {
        fill("red")
        stroke("black", width: 2)
    }

    rect(x: 100, y: 10, width: 80, height: 60, rx: 5) {
        fill("blue")
        opacity(0.5)
    }
}

let output = basicShapes.render()

Gradients

import SVG

let gradientExample = svg(width: 200, height: 200) {
    defs {
        linearGradient(id: "myGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%") {
            stop(offset: "0%", stopColor: "red")
            stop(offset: "100%", stopColor: "blue")
        }
    }

    circle(cx: 100, cy: 100, r: 80) {
        fill("url(#myGradient)")
    }
}

Text Elements

import SVG

let textExample = svg(width: 200, height: 100) {
    text("Hello SVG", x: 100, y: 50) {
        fontSize(24)
        fontFamily("system-ui, sans-serif")
        textAnchor("middle")
        fill("black")
    }
}

Testing

swift-svg includes snapshot testing support via SVGTestSupport:

import Testing
import SVG
import SVG_TestSupport

@Test
func testLogo() {
    let logo = svg(width: 100, height: 100) {
        circle(cx: 50, cy: 50, r: 45) {
            fill("blue")
        }
    }

    assertInlineSnapshot(of: logo, as: .svg) {
        """
        <svg width="100" height="100">
          <circle cx="50" cy="50" r="45" fill="blue"/>
        </svg>
        """
    }
}

Contributing

Contributions are welcome. Please open an issue or submit a pull request.

License

Apache License 2.0. See LICENSE for details.

Package Metadata

Repository: coenttb/swift-svg

Homepage: https://coenttb.com

Stars: 4

Forks: 0

Open issues: 2

Default branch: main

Primary language: swift

License: Apache-2.0

Topics: domain-specific-language, dsl, graphics, result-builders, svg, swift, type-safe, vector-graphics

README: README.md