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

Travis CI Build Status Join the chat at Badge

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
  • Ability to render dynamically using Fable to create interactive web pages
  • 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
  • .NET Standard cross platform support on Windows, Linux, and OSX
  • Limited support for SVG animations
  • Limited support for cartesian plotting
  • Reusable styles


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/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
dotnet run -p Examples\Graph\Graph.fsproj

Run the Fable example (prerequisites):

cd Examples\Bounce\src
dotnet restore
dotnet fable yarn-run start

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";;


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.