Skip to content

Svg

Jump to bottom
Christopher Nikkel edited this page Dec 22, 2018 · 6 revisions

Svg

Definition

type Viewbox = {
    Minimum: Point
    Size: Area
}

type Svg = {
    Body: Body
    Size: Area option
    Viewbox: Viewbox option
}

Description

Svg is used to create a SVG snippet or HTML with embedded SVG.

Functions

Function Signature Description
Svg.ofSeq seq<Element> -> Svg create a Svg from a sequence of elements
Svg.ofList list<Element> -> Svg create a Svg from a list of elements
Svg.ofArray array<Element> -> Svg create a Svg from an array of elements
Svg.ofElement Element -> Svg create a Svg from an Element
Svg.ofGroup Group -> Svg create a Svg from a Group
Svg.ofPlot Plot -> Svg create a Svg from a Plot
Svg.withSize Area -> Svg -> Svg add a size to a Svg
Svg.withViewbox Point -> Area -> Svg -> Svg add an offset and size to a Svg
Svg.toString Svg -> string convert a Svg to a string
Svg.toHtml Svg -> string -> string convert a Svg to a html document

Usage

Example

let center = Point.ofInts (60, 60)
let radius = Length.ofInt 50
let style = Style.create (Name Colors.Violet) (Name Colors.Indigo) (Length.ofInt 3) 1.0 1.0

Circle.create center radius
  |> Element.createWithStyle style
  |> Svg.ofElement
  |> Svg.toHtml "Example"
  |> printf "%s"

Output

<!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>

Table of Contents

Getting Started

Fundamentals

Basic SVG Elements

Advanced Elements

Experimental

Clone this wiki locally