module
Celestine::Docs::A_GETTING_STARTED::USAGE_GUIDE
Overview
Quickstart & Usage Guide
Celestine provides two intuitive ways to author SVG graphics: a fluent block-based DSL that streams element definitions directly to memory, and an explicit object model where any drawable can be instantiated, mutated, and appended to containers.
Executive Summary & Key Topics
| Topic | Method / Anchor | Description |
|---|---|---|
| Drawing Basics & Output Targets | .topic_01_drawing_basics |
How to invoke Celestine.draw to generate SVG strings or stream directly to IO. |
| Block DSL vs Explicit Object Model | .topic_02_dsl_vs_object_model |
Comparing context builder blocks with explicit object instantiation. |
| Reusing Elements with Definitions & Use | .topic_03_element_reuse_and_defs |
Defining reusable assets in <defs> and instantiating them via <use>. |
Related Guides & Source References
- src/celestine.cr
- src/drawables/drawable.cr
- src/drawables/svg.cr
- src/drawables/use.cr
Defined in:
docs/a_getting_started/usage_guide.crClass Method Summary
-
.topic_01_drawing_basics : Nil
Drawing Basics & Output Targets: How to invoke Celestine.draw to generate SVG strings or stream directly to IO.
-
.topic_02_dsl_vs_object_model : Nil
Block DSL vs Explicit Object Model: Comparing context builder blocks with explicit object instantiation.
-
.topic_03_element_reuse_and_defs : Nil
Reusing Elements with Definitions & Use: Defining reusable assets in
and instantiating them via
Class Method Detail
Drawing Basics & Output Targets: How to invoke Celestine.draw to generate SVG strings or stream directly to IO.
All vector drawing starts with Celestine.draw. By default, it returns a finalized SVG XML String.
For high-performance web servers (e.g. Kemal, Lucky, Amber) or file output, pass an IO directly
to avoid unnecessary intermediate string allocations.
Working Examples
require "celestine"
# 1. Generate an SVG String
svg_string = Celestine.draw do |ctx|
ctx.view_box = {x: 0, y: 0, w: 100, h: 100}
ctx.circle do |c|
c.x = 50
c.y = 50
c.radius = 40
c.fill = "#ff007f"
end
end
# 2. Stream directly to an IO (e.g. File or HTTP response)
File.open("output.svg", "w") do |file|
Celestine.draw(file) do |ctx|
ctx.rectangle do |r|
r.width = 100
r.height = 100
r.fill = "blue"
end
end
end
Block DSL vs Explicit Object Model: Comparing context builder blocks with explicit object instantiation.
Celestine supports two interchangeable workflows:
- Fluent Block DSL: Inside
Celestine.draw do |ctx|, invoke helper methods such asctx.circle,ctx.rectangle,ctx.path, orctx.group. Each method yields a fresh instance of the element. - Explicit Object Model: Create any drawable using standard
.newconstructors (e.g.Celestine::Circle.new), configure its properties, and append it to any container using<<.
Working Examples
Celestine.draw do |ctx|
# Approach A: Context helper block
ctx.rectangle do |r|
r.x = 10
r.y = 10
r.width = 80
r.height = 40
r.fill = "#3799FB"
end
# Approach B: Explicit object creation
c = Celestine::Circle.new
c.x = 50
c.y = 50
c.radius = 25
c.fill = "#0353A4"
ctx << c
end
Reusing Elements with Definitions & Use: Defining reusable assets in
To prevent duplicating complex geometry or styles, define elements in the document's <defs>
collection by passing define: true to DSL methods, or by calling ctx.define(element).
Elements can then be referenced anywhere in the document using ctx.use.
Working Examples
Celestine.draw do |ctx|
# Define a reusable star symbol in <defs>
ctx.path(define: true) do |p|
p.id = "star-shape"
p.a_move(10, 1)
p.a_line(4, 19)
p.a_line(19, 7)
p.a_line(1, 7)
p.a_line(16, 19)
p.close
p.fill = "gold"
end
# Clone the defined star at multiple coordinates
ctx.use("star-shape") do |u|
u.x = 10
u.y = 10
end
ctx.use("star-shape") do |u|
u.x = 50
u.y = 10
u.opacity = 0.5
end
end
Common Pitfalls & Safety Caveats
- Warning: Reused drawables MUST have an ID assigned before calling ctx.use.
- Warning: Properties set on