Skip to content
Create SVG vector graphics in F#
Branch: master
Clone or download
ChrisNikkel Merge pull request #27 from johanvts/master
Update examples and README.
Latest commit 7eed059 Apr 27, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode use dotnet pack to make nuget package Dec 23, 2018
Examples update examples to run with dotnet run -p Apr 10, 2019
Helpers make opening the html file cross platform Oct 6, 2018
SharpVG update versions Jan 21, 2019
Tests add test for group and fix compatibility with element Dec 24, 2018
.gitattributes Rebuilt solution in Visual Studio Jun 11, 2016
.travis.yml Update README to reflect working examples Apr 10, 2019
SharpVG.sln add simple Fable example Sep 3, 2017
_config.yml Set theme jekyll-theme-tactile Aug 19, 2017


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.


You can’t perform that action at this time.