Create SVG vector graphics in F#


A .NET Standard library for F# to generate vector graphics in SVG format.

Pull requests and suggestions are greatly appreciated.

Source code on GitHub

NuGet Info

.NET Core

Build history

Why SharpVG?

  • Allows you to emit SVG using simple F# commands so that you can create graphics and animations that are easy to distribute
  • All basic SVG elements are supported: line, circle, ellipse, rect, text, polygon, polyline, path, image, and groups
  • No understanding of SVG is required and its as easy as using seq, list, or array
  • No external dependencies other than SharpVG are required
  • Cross platform support on Windows, Linux, and OSX
  • Limited support for SVG animations
  • Reusable styles

SharpVG Goals

  • To enable easy cross platform graphics in F#
  • To create simple and clear DSL
  • To reduce invalid state and runtime problems


let position = Point.ofInts (10, 10)
let area = Area.ofInts (50, 50)
let style = Style.create (Color.ofName Colors.Cyan) (Color.ofName Colors.Blue) (Length.ofInt 3) 1.0 1.0

Rect.create position area
  |> Element.createWithStyle style
  |> printf "%O"
<rect stroke="blue" stroke-width="3" fill="cyan" opacity="1" x="10" y="10" height="50" width="50"/>
let center = Point.ofInts (60, 60)
let radius = Length.ofInt 50
let style = Style.create (Color.ofName Colors.Violet) (Color.ofName Colors.Indigo) (Length.ofInt 3) 1.0 1.0

Circle.create center radius
  |> Element.createWithStyle style
  |> Svg.ofElement
  |> Svg.toHtml "Example"
  |> printf "%s"
<!DOCTYPE html>
<svg><circle stroke="indigo" stroke-width="3" fill="violet" opacity="1" r="50" cx="60" cy="60"/></svg>

Building SharpVG

Clone the repository:

git clone
cd SharpVG

Start the build:

dotnet build

Run the tests:

dotnet test Tests

Run the examples:

dotnet run -p Examples/Triangle/Triangle.fsproj
dotnet run -p Examples/Life/Life.fsproj

Explore interactively:

fsharpi -r:SharpVG/bin/Debug/netcoreapp2.0/SharpVG.dll
open SharpVG;;
Circle.create Point.origin (Length.ofInt 10) |> printf "%O";;
Circle.create Point.origin (Length.ofInt 10) |> Element.create |> Svg.ofElement |> Svg.toHtml "Example";;

Explore interactively with a Notebook:

Install Visual Studio Code plugin for Interactive Notebooks

Code Examples/Notebooks/SharpVG.dib


Read the documentation here.


Please submit bugs and feature requests here.

Library License

The library is available under the MIT license. For more information see the license file.