HORIZON HASKELLDocslts/ghc-10.0.x8fef28d2026-11-02Search packagesCtrl K
Theme: |

GHC 10.0.0.20260917 · lts/ghc-10.0.x · 8fef28d · 2026-11-02

Modulelucid-svg-0.7.2.0Haskell2010

Lucid.Svg

DSL for creating SVG.

Contents
  1. Intro
  2. Rendering
  3. Re-exports
  4. From Lucid.Base
  5. Running
  6. Types
  7. Classes
Synopsis

Intro

SVG elements and attributes in Lucid-Svg are written with a postfix ‘_’. Some examples:

path_, circle_, color_, scale_

Note: If you're testing in the REPL you need to add a type annotation to indicate that you want SVG. In normal code your top-level declaration signatures handle that.

Plain text is written using the OverloadedStrings and ExtendedDefaultRules extensions, and is automatically escaped:

As in Lucid, elements nest by function application:

Example1 expression
g_ (text_ "Hello SVG") :: Svg ()<g><text>Hello SVG</text></g>

and elements are juxtaposed via monoidal append or monadic sequencing:

Example1 expression
text_ "Hello" <> text_ "SVG" :: Svg ()<text>Hello</text><text>SVG</text>
Example1 expression
do text_ "Hello"; text_ "SVG" :: Svg ()<text>Hello</text><text>SVG</text>

Attributes are set by providing an argument list. In contrast to HTML many SVG elements have no content, only attributes.

Example1 expression
rect_ [width_ "100%", height_ "100%", fill_ "red"] :: Svg ()<rect height="100%" width="100%" fill="red"></rect>

Attributes and elements that share the same name are not conflicting unless they appear on the list in the note below:

Example1 expression
mask_ [mask_ "attribute"] "element" :: Svg ()<mask mask="attribute">element</mask>

Note: The following element and attribute names overlap and cannot be handled polymorphically since doing so would create conflicting functional dependencies. The unqualifed name refers to the element. We qualify the attribute name as A. For example, path_ and path_.

colorProfile_, cursor_, filter_, path_, and style_

Path data can be constructed using the functions in Lucid.Svg.Path and combined monoidally:

path_ (
  [ d_ (mA 10 80 <> qA 52.5 10 95 80 <> tA 180 80 <> z)
  , stroke_ "blue"
  , fill_ "orange"
  ])

<path d="M 10,80 Q 52.5,10 95,80 T 180,80 Z" stroke="blue" fill="orange"></path>

A slightly longer example:

import Lucid.Svg

svg :: Svg () -> Svg ()
svg content = do
  doctype_
  with (svg11_ content) [version_ "1.1", width_ "300" , height_ "200"]

contents :: Svg ()
contents = do
  rect_ [width_ "100%", height_ "100%", fill_ "red"]
  circle_ [cx_ "150", cy_ "100", r_ "80", fill_ "green"]
  text_ [x_ "150", y_ "125", fontSize_ "60", textAnchor_ "middle", fill_ "white"] "SVG"


main :: IO ()
main = do
  print $ svg contents

image: http://i.imgur.com/dXu84xR.png

Rendering

Re-exports

module Lucid.Svg.Path

module Lucid.Svg.Elements

From Lucid.Base

Running

valueevalHtmlT
  1. :: Monad m
  2. => HtmlT m a

    HTML monad to evaluate.

  3. -> m a

    Ignore the HTML output and just return the value.

Source#

Evaluate the HTML to its return value. Analogous to evalState.

Use this if you want to ignore the HTML output of an action completely and just get the result.

For using with the Html type, you'll need runIdentity e.g.

Example1 expression
runIdentity (evalHtmlT (p_ "Hello!"))()

Types

datadata Attribute
Source#

A simple attribute. Don't use the constructor, use makeAttribute. Attributes are case sensitive, so if you want attributes to be merged properly, use a single case representation.

Constructors

Instances7Eq, Show, Hashable, Term, TermRaw, …

Classes

classclass Term arg result | result -> arg where
Source#

Used to construct HTML terms.

Simplest use: p_ = term "p" yields p_.

Very overloaded for three cases:

  • The first case is the basic arg of [(Text,Text)] which will return a function that wants children.

  • The second is an arg which is HtmlT m (), in which case the term accepts no attributes and just the children are used for the element.

  • Finally, this is also used for overloaded attributes, like style_ or title_. If a return type of (Text,Text) is inferred then an attribute will be made.

The instances look intimidating but actually the constraints make it very general so that type inference works well even in the presence of things like OverloadedLists and such.

Methods

  • term :: Text -> arg -> result

    Used for constructing elements e.g. term "p" yields p_.

  • termWith :: Text -> [Attribute] -> arg -> result

    Use this if you want to make an element which inserts some pre-prepared attributes into the element.

Instances3Term
  • Term Text AttributeDefined in lucid-2.11.20260427 · Lucid.Base

    Some terms (like style_, title_) can be used for attributes as well as elements.

  • (Applicative m, f ~ HtmlT m a) => Term [Attribute] (f -> HtmlT m a)Defined in lucid-2.11.20260427 · Lucid.Base

    Given attributes, expect more child input.

  • Applicative m => Term (HtmlT m a) (HtmlT m a)Defined in lucid-2.11.20260427 · Lucid.Base

    Given children immediately, just use that and expect no attributes.

classclass ToHtml a where
Source#

Can be converted to HTML.

Methods

Instances6ToHtml
  • ToHtml ByteStringDefined in lucid-2.11.20260427 · Lucid.Base

    This instance requires the ByteString to contain UTF-8 encoded text, for the toHtml method. The toHtmlRaw method doesn't care, but the overall HTML rendering methods in this module assume UTF-8.

  • ToHtml ByteStringDefined in lucid-2.11.20260427 · Lucid.Base

    This instance requires the ByteString to contain UTF-8 encoded text, for the toHtml method. The toHtmlRaw method doesn't care, but the overall HTML rendering methods in this module assume UTF-8.

  • ToHtml StringDefined in lucid-2.11.20260427 · Lucid.Base
  • ToHtml TextDefined in lucid-2.11.20260427 · Lucid.Base
  • ToHtml TextDefined in lucid-2.11.20260427 · Lucid.Base
  • (a ~ (), m ~ Identity) => ToHtml (HtmlT m a)Defined in lucid-2.11.20260427 · Lucid.Base
classclass With a where
Source#

With an element use these attributes. An overloaded way of adding attributes either to an element accepting attributes-and-children or one that just accepts attributes. See the two instances.

Methods

  • with :: a -> [Attribute] -> a

    With the given element(s), use the given attributes.

Instances2With
  • Functor m => With (HtmlT m a)Defined in lucid-2.11.20260427 · Lucid.Base

    For the contentless elements: br_

  • Functor m => With (HtmlT m a -> HtmlT m a)Defined in lucid-2.11.20260427 · Lucid.Base

    For the contentful elements: div_