SVuGy: SVG と Ruby で遊ぼう

SVuGy: Fun with SVG and Ruby

Ruby Kaigi 2008, Tsukuba, 2008/6/22

Martin J. DÜRST

Aoyama Gakuin University

http://www.sw.it.aoyama.ac.jp/SVuGy/RubyKaigi2008Presentation.html

© 2008 Martin J. Dürst, Aoyama Gakuin University

Overview

• What is SVG, what is SVuGy?
• Why SVuGy?
• Metaprogramming
• The future
• [Demo]

[see Collophon for how to view best]

What is SVuGy?

Ruby DSL for SVG

SVG + Ruby = SVuGy

Pronounced SVeeGee ( スゥィージー)

Versions

• 0.03: On Rubyforge as .zip or .tar.gz
• 0.4: To appear soon (as a gem)

What is SVG

• XML-based 2D graphics language for the Web
• W3C Recommendations:
  SVG 1.1, SVG Tiny, SVG Basic
• Fully Web-compatible:
  uses CSS, XLink, URIs,...
  supports internationalization, accessibility,...
• Everything a designer wants:
  Gradients, filters, animation, scripting
• Supported on many browsers:
  Opera, Firefox, Safari, IE (Adobe plugin)
• Examples: Open Clip Art Library

SVG Example

<rect x='100' y='200'
    width='50' height='30'/>

SVuGy Goals

Practical: Create simple diagrams for lectures

Research: Study procedural → declarative transition (see SVGopen2007 paper)

Side-effect:
Ruby metaprogramming and DSL experience

Source for student projects

Why Programming?

Graphics editors available, e.g. Inkscape, Adobe Illustrator,...

But:

• Want to know what's going on
• Variables, reuse
• Structure, allignement,...
• Data to graphics

Why SVuGy?

A rectangle in SVG:

<rect x='100' y='200' width='50' height='30'/>

Wouldn't you sometimes want to write this like:

rect 100, 200, 50, 30

With SVuGy, you can!

SVuGy Basic Shapes

rect 100, 200, 30, 50
circle 300, 300, 50
ellipse 400, 500, 20, 60
polygon 100, 100, 20, 100, 20, 20, 100, 20
text 'Hello SVuGy!', 50, 40

And so on...

More SVuGy

Grouping:

g {
  # group content
}

Anchors:

a 'IRI' {
  # link content
}

Implementation Basics

• instance_eval for blocks executed in context of grouping object (e.g. Group, Anchor,...)
• rect is a factory method, creates Rect object and adds it to parent
• Factory method automatically added for each shape subclass
• Some additional behind-the-scenes trickery

Metaprogramming:
Too Much Is Not Enough?

Looking for every way to make coding shorter and easier!

SVuGy Styling

Syntax variants:

1. Style hash: rect(0, 0, 200, 200).
style(:fill => :red)
2. Style block: rect(0, 0, 200, 200) {
style { fill :red } }
3. Property method: rect(0, 0, 200, 200).
fill(:red)
4. Property constructor: rect(0, 0, 200,
200) { fill :red }

Everything is Missing

(miss?)using method_missing

• Style properties
• Event properties
• Animation properties
• Color keywords
• Color values (#aabbcc ⇒ Haabbcc)

Example before: style(:fill => :red)
(or style(fill: :red) for 1.9)

Example after: fill red

Missing Variables

Before:

r = rect 100, 200, 30, 50
line r.tl, r.br

After:

rect :r 100, 200, 30, 50
line r.tl, r.br

Symbol is SVG id; scope is SVG document!

Argument Parsing

rect 100, 200, 30, 50
rect 30, 50
rect :id 100, 200, 30, 50
rect point, 30, 50
...

Semi-manually coded, function based on class

High-end automatic solution half complete

method_chained?

Return value and block use depending on chaining

my_style = style(fill: :red,
    stroke: :green) { }
my_group = g.style(...) { }

Ideal solution:

if method_chained?
  ...

Current hack !?

(one variant)

if block_given?
  if @chained then
    @chained = false
    instance_eval(&block)
    @chained = true
  else
    warn "Block on style, ignored"
  end
end

Beyond SVG: More Objects

• Arrows
• Labeled circles
• Rotated text
• Speach bubbles
• ...

Composite objects introduced on a by-need base

An Example: Rotated Text

• Found myself writing a lots of:
  text('sample text', 150, 250).
rotate -90, 150, 250
• Position adjustment easier with:
  text('sample text',
p1=pt(150, 250)).rotate -90, p1
• Abstracted this to:
rotated_text 'sample text',
150, 250, -90
  

(one class, one method, three lines of actual code)

New in 0.4

• Better SVG coverage
• More objectification (e.g. paths)
• Points usable across transforms
• Read (and write) documents via REXML
• More composte objects
• Some layout support

Further Work

• Layouts/arrangements
• API-like use (use by program rather than by humans)
• Constraints
• Higher-level libraries
• Output details (SVG version, browser compatibility settings, indentation,...)

Please try out SVuGy and send feedback!

Demo

[if time permits]

Further Reading

SVuGy Home Page (http://www.sw.it.aoyama.ac.jp/SVuGy)

SVuGy - Exploring the Space between Procedural and Declarative Graphics, Martin J. Dürst, Makoto Fujimori, Takeshi Maemura, Tohru Koga, Kazunari Ito, Proc. SVG Open 2007, Tokyo, Japan, Sept. 2007. [presentation]

Collophon

or how these slides were produced,
and how they are best viewed

• XHTML and CSS
• Edited with Amaya
• Best viewed with Opera presentation mode (F11)