SVuGy - Exploring the Space between Procedural and Declarative Graphics

SVG Open 2007, Tokyo

Martin J. DÜRST, Makoto FUJIMORI, Takeshi MAEMURA, Tohru KOGA, Kazunari ITO

Aoyama Gakuin University


© 2007 Martin J. Dürst et al., Aoyama Gakuin University

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 Name

SVG + Ruby = SVuGy

Pronounced SVeeGee


SVuGy Goals

Practical: Create simple diagrams for lectures

Side-effect: Ruby programming and DSL experience

Long-term: Study procedural → declarative transition

Declarative ↔ Procedural

Declarative: Straightforward and safe, fast, easy for beginners

Procedural: Powerful and flexible, difficult to use

→ Sometimes, you want both!

→ Web standards move frequent procedural idioms to descriptive syntax (CSS, SVG, XForms,...)


Domain Specific Language

External DSL: Standalone, special-purpose parser,...

Internal DSL: Part of programming language syntax, programming language features available

The Joy of Ruby

Why Ruby?

→ Ruby is short

→ Ruby is easy

→ Ruby is powerful

Ruby is fun!

Ruby History

Programming/Scripting language, developed by Yukihiro MATSUMOTO ("Matz") starting in 1993

"Better" Perl, fully object-oriented, includes elements of Smalltalk, Lisp,...

ca. 2000: 'discovered' by Dave Thomas (Pragmatic Programmers)

ca. 2004: David Heinemeier Hansson publishes Ruby on Rails high-productivity Web application framework

Productive version is 1.8(.6), 1.9 in the works with faster engine and maybe better internationalization

Ruby Basics

Fully object-oriented: "abc".length

Open classes: Add your own favorite methods to base classes

Flexible Typing (duck typing)

5.times { print "Hello World!" } do |file| ... end

Meta-programming: programmatic creation of methods, reflection,...

Ruby Syntax

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

Don't forget commas!

SVuGy Grouping

Using blocks:

g {
  # group contents

Both SVG elements and SVG attributes can go into block

Ruby Block Syntax Restrictions

Parentheses No Parentheses
do block
method(arg) do
method arg do
{} block method(arg) { block } method arg1 { block }

Behind the Scenes

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 }

Syntax for transforms uses variants 3 and 4

Property/Value Syntax

Tweaks due to Ruby syntax
Strings are explicit red 'red' (String) or :red (Symbol)
Colons move right fill: red fill :red
Hyphens move down stroke_width stroke-width
# becomes H #ff0000 H000000

Parameter Handling

Beyond SVG: More Objects

Composite objects introduced on a by-need base

An Example: Rotated Text

Using Programming Language Features

Referee Comments

SVuGy Availability

Further Work