Home
Softono
SharpVG

SharpVG

Open source MIT F#
Website GitHub
80
Stars
10
Forks
13
Issues
4
Watchers
2 months
Last Commit
Vector Graphics

About SharpVG

SharpVG is a .NET Standard library for F designed to generate Scalable Vector Graphics (SVG) files using a simple, functional domain-specific language. It enables developers to create static vector graphics and complex animations without requiring deep knowledge of SVG syntax. The library supports all fundamental SVG elements including lines, circles, ellipses, rectangles, text, polygons, polylines, paths, images, and groups. It provides extensive features for motion paths, attribute and transform animations, and timing control, along with reusable style definitions. SharpVG is a pure F solution with no external dependencies other than itself, ensuring reliable execution intent and reducing invalid state issues. It offers full cross-platform support for Windows, Linux, and macOS, and works natively in web browsers via Fable compilation. Ideal for data visualization, interactive animations, and programmatic graphic generation, SharpVG allows users to emit standard SVG or complete HTML documents through concise

Platforms

Web Self-hosted

Languages

F#

Links

Website Source Code
c
Published by
chrisnikkel
Visit View Profile

README.md

View on GitHub

SharpVG

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

Pull requests and suggestions are greatly appreciated.

Source code on GitHub

.NET Core

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
  • Full support for SVG animations: attribute animation, transform animation, motion paths, and timing control
  • Reusable styles
  • Works in the browser via Fable — SharpVG is pure F# with no platform-specific APIs

SharpVG Goals

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

Examples

let position = Point.ofInts (10, 10)
let area = Area.ofInts (50, 50)
let strokeColor = Color.ofName Colors.Blue
let fillColor = Color.ofName Colors.Cyan
let penWidth = Length.ofInt 3
let strokePen = Pen.createWithOpacityAndWidth strokeColor 1.0 penWidth
let fillPen = Pen.create fillColor
let style = Style.createWithPen strokePen |> Style.withFillPen fillPen

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 strokeColor = Color.ofName Colors.Indigo
let fillColor = Color.ofName Colors.Violet
let penWidth = Length.ofInt 3
let strokePen = Pen.createWithOpacityAndWidth strokeColor 1.0 penWidth
let fillPen = Pen.create fillColor
let style = Style.createWithPen strokePen |> Style.withFillPen fillPen

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

Building SharpVG

Clone the repository:

git clone https://github.com/ChrisNikkel/SharpVG.git
cd SharpVG

Start the build:

dotnet build

Run the tests:

dotnet test Tests

Run tests with code coverage (output in TestResults/):

dotnet test Tests --collect:"XPlat Code Coverage" --results-directory ./TestResults

Coverage is also collected in CI; download the coverage-results artifact from the workflow run to inspect it.

Run the examples:

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

Run the Fable (browser) example — a live SVG clock:

cd Examples/FableClock && npm install && npm start

See Documentation/FableTutorial.md for a full walkthrough.

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

Explore interactively with a Notebook:

Install Visual Studio Code plugin for Interactive Notebooks

Code Examples/Notebooks/SharpVG.dib

Documentation

Read the documentation here.

Support

Please submit bugs and feature requests here.

Library License

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

Maintainer(s)