parsed styles and struggling with svg

examples/bank_architecture/bank.vis

@@ -21,10 +21,10 @@ structure {
       interest_engine: "InterestEngine"
     }
   }
-  bank-->calc
-  bank_scripts--<>bank_db
-  bank_motor--<>bank_db
-  interest_engine-->calc
+  bank==>calc
+  bank_scripts==<>bank_db
+  bank_motor==<>bank_db
+  interest_engine==>calc
 }
 
 styles {
@@ -32,25 +32,7 @@ styles {
     type: textnode
     orientation: horizontal
     shape: rectangle
-    font-family: arial
-    border-width: 1px
-    border-color: gray
-  }
-  functions(group) {
-    background-color: yellow
-    font-family: arial
-    border-radius: 20px
-    border-width: 1px
-    border-color: gray
-  }
-  systems(group) {
-    background-color: lightblue
-  }
-  tag1: "⚭" { // how will this work?
-    right:0px
-    top:0px
-  }
-  tag2: {
-    itchy: scratchy
   }
+  functions(group) {}
+  systems(group) {}
 }

src/lib.rs

@@ -16,14 +16,28 @@ pub enum Element {
     Edge(String, String, TokenType, Option<String>),
 }
 
-#[derive(Debug)]
+impl Element {
+    pub fn new_node(id: &str, label: Option<&str>, children: Vec<Element>) -> Element {
+        Element::Node(id.into(), label.map(|s| s.into()), children)
+    }
+    pub fn new_edge(
+        id: String,
+        source: String,
+        token: TokenType,
+        label: Option<String>,
+    ) -> Element {
+        Element::Edge(id, source, token, label)
+    }
+}
+
+#[derive(Debug, Clone)]
 pub struct StyleNode {
     pub id_ref: String,
     pub containertype: ContainerType,
     pub attributes: HashMap<String, String>,
 }
 
-#[derive(Debug)]
+#[derive(Debug, Clone)]
 pub enum ContainerType {
     Node,
     Group,

src/parse/parser.rs

@@ -3,13 +3,14 @@ use crate::{
         Token,
         TokenType::{self, *},
     },
-    Element, StyleNode, Vis,
+    ContainerType, Element, StyleNode, Vis,
 };
 use anyhow::anyhow;
+use std::collections::HashMap;
 
 pub fn parse_vis(contents: &str) -> anyhow::Result<Vis> {
     let tokens = crate::parse::scanner::scan(contents)?;
-    // println!("{:?}", tokens);
+    println!("{:?}", tokens);
     let mut parser = Parser::new(tokens);
 
     Ok(Vis {
@@ -103,7 +104,71 @@ impl Parser {
     }
 
     fn styles(&mut self) -> anyhow::Result<Vec<StyleNode>> {
-        Ok(vec![])
+        println!("styles");
+        if self.match_token(Styles) {
+            self.consume(LeftBrace, "Expected '{'")?;
+            let mut styles = vec![];
+            while !self.check(&RightBrace) {
+                styles.push(self.style()?);
+            }
+            self.consume(RightBrace, "Expected '}'")?;
+            Ok(styles)
+        } else {
+            Ok(vec![])
+        }
+    }
+
+    fn style(&mut self) -> anyhow::Result<StyleNode> {
+        println!("style");
+        if self.check(&Identifier) {
+            let idref = self.peek().lexeme.to_owned();
+            println!("id {}", idref);
+            self.advance();
+            let containertype = self.containertype()?;
+            self.consume(RightParen, "Expected ')'")?;
+            println!("containertype {:?}", containertype);
+            self.consume(LeftBrace, "Expected '{'")?;
+            let attributes = self.style_elements()?;
+            self.consume(RightBrace, "Expected '}'")?;
+
+            Ok(StyleNode {
+                id_ref: idref,
+                containertype,
+                attributes,
+            })
+        } else {
+            Err(anyhow!("Expected identifier"))?
+        }
+    }
+
+    fn style_elements(&mut self) -> anyhow::Result<HashMap<String, String>> {
+        println!("style_elements");
+        let mut elements = HashMap::new();
+        let mut key = self.peek().clone();
+        println!("key {:?}", key);
+        while key.tokentype != RightBrace {
+            self.advance();
+            self.consume(Colon, "Expected ':'")?;
+            let value = self.advance().clone();
+            println!("value {:?}", value);
+            elements.insert(key.lexeme.to_owned(), value.lexeme);
+            key = self.peek().clone();
+        }
+        Ok(elements)
+    }
+
+    fn containertype(&mut self) -> anyhow::Result<ContainerType> {
+        println!("containertype");
+        Ok(if self.check(&LeftParen) {
+            self.advance();
+            if self.match_token(Group) {
+                ContainerType::Group
+            } else {
+                ContainerType::Node
+            }
+        } else {
+            ContainerType::Node
+        })
     }
 
     fn consume(&mut self, tokentype: TokenType, expect: &str) -> anyhow::Result<&Token> {
@@ -111,7 +176,12 @@ impl Parser {
         if self.check(&tokentype) {
             Ok(self.advance())
         } else {
-            Err(anyhow!("Error: {} on line {}", expect, current.line))
+            Err(anyhow!(
+                "Error: {} but was '{}' on line {}",
+                expect,
+                self.peek().lexeme,
+                current.line
+            ))
         }
     }
 

src/parse/scanner.rs

@@ -48,8 +48,8 @@ impl<'a> Scanner<'a> {
             "," => self.add_token(Comma),
             "." => self.add_token(Dot),
 
-            "-" => {
-                if self.match_token("-") {
+            "=" => {
+                if self.match_token("=") {
                     if self.match_token(">") {
                         self.add_token(ArrowRight);
                     } else if self.match_token("<") {
@@ -122,7 +122,7 @@ impl<'a> Scanner<'a> {
     }
 
     fn identifier(&mut self) {
-        while is_alpha(self.peek()) || is_digit(self.peek()) {
+        while is_alpha(self.peek()) || is_digit(self.peek()) || self.peek() == "-" {
             self.advance();
         }
         let text = self.chars[self.start_pos..self.current_pos].concat();

src/render/mod.rs

@@ -0,0 +1,12 @@
+use crate::Vis;
+
+pub mod html;
+mod rendering_svg_elements;
+mod svg_renderer;
+pub mod svglib;
+mod svgrender2;
+
+/// trait for turning the object model into a byte representation
+pub trait Renderer {
+    fn render(&self, vis: Vis) -> anyhow::Result<Vec<u8>>;
+}

src/render/rendering_svg_elements.rs

@@ -0,0 +1,162 @@
+use crate::render::svglib::rect::rect;
+use crate::render::svglib::svg::{svg, Svg};
+use crate::render::svglib::text::text;
+use crate::{Element, StyleNode, Vis};
+
+pub fn render_vis_with_grid_layout(
+    vis: &Vis,
+    grid_cell_size: f32,
+    spacing: f32,
+    padding: f32,
+) -> String {
+    let style = include_str!("svg_node.css");
+    let mut svg = svg();
+    svg.style(style);
+    svg.viewbox("0 0 100 100"); // Default size; can adjust dynamically
+
+    // Start recursive layout
+    let (parent_width, parent_height) = layout_box(
+        &mut svg,
+        &vis.structure,
+        grid_cell_size,
+        spacing,
+        padding,
+        0.0,
+        0.0,
+    );
+
+    svg.width(parent_width as usize);
+    svg.height(parent_height as usize);
+    svg.to_string()
+}
+
+fn layout_box(
+    svg: &mut Svg,
+    elements: &[Element],
+    grid_cell_size: f32,
+    spacing: f32,
+    padding: f32,
+    start_x: f32,
+    start_y: f32,
+) -> (f32, f32) {
+    let current_x = start_x + padding;
+    let current_y = start_y + padding;
+    let mut max_width: f32 = 0.0;
+    let mut max_height: f32 = 0.0;
+
+    let grid_cols = (elements.len() as f32).sqrt().ceil() as usize;
+
+    for (i, element) in elements.iter().enumerate() {
+        let col = i % grid_cols;
+        let row = i / grid_cols;
+
+        let child_x = current_x + col as f32 * (grid_cell_size + spacing);
+        let child_y = current_y + row as f32 * (grid_cell_size + spacing);
+
+        match element {
+            Element::Node(id, label, children) => {
+                let (_, _) = layout_box(
+                    svg,
+                    children,
+                    grid_cell_size,
+                    spacing,
+                    padding,
+                    child_x,
+                    child_y,
+                );
+                let width = label.as_ref().map(|l| l.len() * 10).unwrap_or(100);
+                let height = label
+                    .as_ref()
+                    .map(|l| l.lines().collect::<String>().len() * 10)
+                    .unwrap_or(100);
+                svg.add(
+                    rect()
+                        .x(child_x)
+                        .y(child_y)
+                        .width(width)
+                        .height(height)
+                        .fill("none")
+                        .stroke("green"),
+                );
+
+                if let Some(label) = label {
+                    svg.add(
+                        text()
+                            .x(child_x + (width as f32 / 2.0))
+                            .y(child_y + (height as f32 / 2.0))
+                            .text(label)
+                            .attr("text-anchor", "middle"),
+                    );
+                }
+
+                // Update the bounding box dimensions
+                max_width = max_width.max(child_x + width as f32 - start_x);
+                max_height = max_height.max(child_y + height as f32 - start_y);
+            }
+            Element::Edge(_, _, _, _) => {
+                // Edges are processed after all nodes are laid out to connect them
+                // For now, assume no visual rendering of edges in this example
+            }
+        }
+    }
+    let total_width = max_width + padding * 2.0;
+    let total_height = max_height + padding * 2.0;
+    if elements.len() > 0 {
+        let parent_box = rect()
+            .x(start_x)
+            .y(start_y)
+            .width(total_width)
+            .height(total_height)
+            .fill("none")
+            .stroke("red")
+            .attr("stroke-width", "2");
+        svg.add(parent_box);
+    }
+
+    (total_width, total_height)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::{ContainerType, Element, StyleNode, Vis};
+    use std::fs::File;
+    use std::io::Write;
+
+    #[test]
+    fn test_render_vis_with_grid_layout() {
+        // Create a mock StyleNode
+        let style_node = StyleNode {
+            id_ref: "node_1".to_string(),
+            containertype: ContainerType::Node,
+            attributes: [("fill".to_string(), "white".to_string())]
+                .iter()
+                .cloned()
+                .collect(),
+        };
+
+        // Create mock Elements
+        let element = Element::Node(
+            "node_1".to_string(),
+            Some("Node 1".to_string()),
+            vec![], // No child elements
+        );
+        let element2 = Element::Node(
+            "node_1".to_string(),
+            Some("Node 1".to_string()),
+            vec![], // No child elements
+        );
+
+        // Create Vis structure
+        let vis = Vis {
+            styles: vec![style_node],
+            structure: vec![element, element2],
+        };
+
+        let svg_output = render_vis_with_grid_layout(&vis, 50.0, 10.0, 5.0);
+
+        let mut file = File::create("output_multiple_nodes.svg").expect("Unable to create file");
+        file.write_all(&svg_output.as_bytes().to_vec())
+            .expect("Unable to write data");
+    }
+}

src/render/svg_node.css

@@ -0,0 +1,14 @@
+svg {
+    background-color: white;
+}
+
+.node {
+    border: 1px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 1em;
+    font-size: 10px;
+    font-family: sans-serif;
+}

src/render/svg_renderer.rs

@@ -0,0 +1,117 @@
+// use crate::render::svglib::rect::{rect, Rect};
+// use crate::render::svglib::svg::svg;
+// use crate::render::svglib::text::text;
+// use crate::render::svglib::Value;
+// use crate::render::Renderer;
+// use crate::{Element, Vis};
+// use std::fs::File;
+// use std::io::Write;
+//
+// struct SvgRenderer {}
+// impl Renderer for SvgRenderer {
+//     fn render(&self, vis: Vis) -> anyhow::Result<Vec<u8>> {
+//         let style = include_str!("svg_node.css");
+//         let mut svg = svg();
+//         svg.viewbox("0, 0, 300, 300");
+//         svg.style(style);
+//
+//         let current_x = start_x + padding;
+//         let current_y = start_y + padding;
+//         let mut max_width: f32 = 0.0;
+//         let mut max_height: f32 = 0.0;
+//
+//         let grid_cols = (elements.len() as f32).sqrt().ceil() as usize;
+//
+//         for e in vis.structure {
+//             let col = i % grid_cols;
+//             let row = i / grid_cols;
+//
+//             let child_x = current_x + col as f32 * (grid_cell_size + spacing);
+//             let child_y = current_y + row as f32 * (grid_cell_size + spacing);
+//
+//             if let Element::Node(_, label, children) = e {
+//                 if let Some(label) = label {
+//                     let mut longest_len = 0;
+//                     for line in label.lines() {
+//                         longest_len = longest_len.max(line.len());
+//                     }
+//                     let width = longest_len / 2;
+//                     let linecount = label.lines().count();
+//                     let height = linecount + 1;
+//                     let x = 1;
+//                     let y = ((height - linecount) / 2 + 2) as f64
+//                         - if linecount == 1 { 0.25 } else { 0.0 };
+//
+//                     let width = label.len() * 10;
+//                     let height = label.lines().collect::<String>().len() * 10;
+//                     svg.add(
+//                         rect()
+//                             .x(child_x)
+//                             .y(child_y)
+//                             .width(width)
+//                             .height(height)
+//                             .fill("none")
+//                             .stroke("green"),
+//                     );
+//
+//                     if let Some(label) = label {
+//                         svg.add(
+//                             text()
+//                                 .x(child_x + (width as f32 / 2.0))
+//                                 .y(child_y + (height as f32 / 2.0))
+//                                 .text(label)
+//                                 .attr("text-anchor", "middle"),
+//                         );
+//                     }
+//
+//                     svg.add(text);
+//                 } else {
+//                     svg.add(rectangle(0, 0, 70, 30));
+//                 }
+//             }
+//         }
+//
+//         let svg = svg.to_string();
+//
+//         let mut file = File::create("output.svg")?;
+//         file.write_all(svg.as_bytes())?;
+//         Ok(svg.as_bytes().to_vec())
+//     }
+// }
+//
+// fn rectangle<V>(x: usize, y: usize, width: V, height: V) -> Rect
+// where
+//     V: Into<Value>,
+// {
+//     Rect::new()
+//         .x(x)
+//         .y(y)
+//         .width(width)
+//         .height(height)
+//         .class("rect")
+//         .fill("none")
+// }
+//
+// #[cfg(test)]
+// mod tests {
+//     use super::*;
+//     use crate::Element;
+//     use std::fs::File;
+//     use std::io::Write;
+//
+//     #[test]
+//     fn test_render() {
+//         let vis = Vis {
+//             structure: vec![Element::new_node(
+//                 "id",
+//                 Some("blokkendoos\nkoepeon\nknallen\nhond"),
+//                 vec![],
+//             )],
+//             styles: vec![],
+//         };
+//         let renderer = SvgRenderer {};
+//         let buf = renderer.render(vis).unwrap();
+//         let mut file = File::create("output.svg").expect("Unable to create file");
+//         file.write_all(&buf).expect("Unable to write data");
+//     }
+// }

src/render/svglib/circle.rs

@@ -0,0 +1,78 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Shape, Value};
+
+pub fn circle() -> Circle {
+    Circle::new()
+}
+
+pub struct Circle(Vec<Att>);
+
+impl Circle {
+    fn new() -> Self {
+        Self(vec![])
+    }
+
+    fn id<V: Into<Value>>(mut self, id: V) -> Self {
+        self.0.push(att("id", id));
+        self
+    }
+    fn cx<V: Into<Value>>(mut self, cx: V) -> Self {
+        self.0.push(att("cx", cx));
+        self
+    }
+    fn cy<V: Into<Value>>(mut self, cy: V) -> Self {
+        self.0.push(att("cy", cy));
+        self
+    }
+    fn r<V: Into<Value>>(mut self, r: V) -> Self {
+        self.0.push(att("r", r));
+        self
+    }
+}
+
+impl Shape for Circle {
+    fn fill<V: Into<Value>>(mut self, value: V) -> Self {
+        self.0.push(att("fill", value));
+        self
+    }
+
+    fn stroke<V: Into<Value>>(mut self, value: V) -> Self {
+        self.0.push(att("stroke", value));
+        self
+    }
+
+    fn transform<V: Into<Value>>(mut self, value: V) -> Self {
+        self.0.push(att("transform", value));
+        self
+    }
+}
+
+impl Element for Circle {
+    fn get_type(&self) -> ElementType {
+        ElementType::Circle
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.0
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#"<circle{} />"#,
+            self.0.iter().map(att_str3).collect::<String>()
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_circle() {
+        let circle = circle().cx("1em").cy(0).r("10").id("c");
+        assert_eq!(
+            r#"<circle cx="1em" cy="0" r="10" id="c" />"#,
+            circle.to_string()
+        )
+    }
+}

src/render/svglib/div.rs

@@ -0,0 +1,51 @@
+use crate::render::svglib::{att, att_str3, Att, Value};
+
+pub fn div() -> Div {
+    Div::new()
+}
+
+pub struct Div {
+    atts: Vec<Att>,
+    child: String,
+}
+
+impl Div {
+    pub fn new() -> Self {
+        Self {
+            atts: vec![],
+            child: "".to_string(),
+        }
+    }
+
+    pub fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("id", id));
+    }
+
+    pub fn class<V>(mut self, class: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("class", class));
+        self
+    }
+
+    pub fn innerHTML<V: Into<String>>(mut self, html: V) -> Self {
+        self.child = html.into();
+        self
+    }
+
+    pub fn to_string(&self) -> String {
+        format!(
+            r#"<div xmlns="http://www.w3.org/1999/xhtml"{}>{}</div>"#,
+            self.atts.iter().map(att_str3).collect::<String>(),
+            self.child
+        )
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+}

src/render/svglib/ellipse.rs

@@ -0,0 +1,85 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Shape, Value};
+
+pub fn ellipse() -> Ellipse {
+    Ellipse(vec![])
+}
+
+#[derive(Debug)]
+pub struct Ellipse(Vec<Att>);
+
+impl Ellipse {
+    fn cx<V: Into<Value>>(mut self, cx: V) -> Self {
+        self.0.push(att("cx", cx));
+        self
+    }
+    fn cy<V: Into<Value>>(mut self, cy: V) -> Self {
+        self.0.push(att("cy", cy));
+        self
+    }
+    fn rx<V: Into<Value>>(mut self, rx: V) -> Self {
+        self.0.push(att("rx", rx));
+        self
+    }
+    fn ry<V: Into<Value>>(mut self, ry: V) -> Self {
+        self.0.push(att("ry", ry));
+        self
+    }
+}
+
+impl Shape for Ellipse {
+    fn fill<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("fill", value));
+        self
+    }
+
+    fn stroke<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("stroke", value));
+        self
+    }
+
+    fn transform<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("transform", value));
+        self
+    }
+}
+
+impl Element for Ellipse {
+    fn get_type(&self) -> ElementType {
+        ElementType::Ellipse
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.0
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#"<ellipse{} />"#,
+            self.0.iter().map(att_str3).collect::<String>()
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_ellipse() {
+        let ellipse = ellipse().cx(0).cy(0).rx(10).ry(15);
+        println!("{:?}", ellipse);
+        assert_eq!(
+            r#"<ellipse cx="0" cy="0" rx="10" ry="15" />"#,
+            ellipse.to_string()
+        )
+    }
+}

src/render/svglib/foreign_object.rs

@@ -0,0 +1,75 @@
+use crate::render::svglib::div::Div;
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Value};
+
+pub fn foreign_object() -> ForeignObject {
+    ForeignObject::new()
+}
+
+pub struct ForeignObject {
+    child: Option<Div>, //for now
+    atts: Vec<Att>,
+}
+
+impl ForeignObject {
+    pub fn new() -> Self {
+        Self {
+            child: None,
+            atts: vec![],
+        }
+    }
+
+    pub fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("id", id));
+    }
+
+    pub fn x<V: Into<Value>>(mut self, x: V) -> Self {
+        self.atts.push(att("x", x));
+        self
+    }
+
+    pub fn y<V: Into<Value>>(mut self, y: V) -> Self {
+        self.atts.push(att("y", y));
+        self
+    }
+    pub fn width<V: Into<Value>>(mut self, width: V) -> Self {
+        self.atts.push(att("width", width));
+        self
+    }
+    pub fn height<V: Into<Value>>(mut self, height: V) -> Self {
+        self.atts.push(att("height", height));
+        self
+    }
+    pub fn class<V: Into<Value>>(mut self, class: V) -> Self {
+        self.atts.push(att("class", class));
+        self
+    }
+
+    pub fn add(mut self, child: Div) -> Self {
+        self.child = Some(child);
+        self
+    }
+}
+
+impl Element for ForeignObject {
+    fn get_type(&self) -> ElementType {
+        ElementType::ForeignObject
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#"<foreignObject{}>{}</foreignObject>"#,
+            self.atts.iter().map(|a| att_str3(a)).collect::<String>(),
+            self.child
+                .as_ref()
+                .map(|c| c.to_string())
+                .unwrap_or("".to_string()),
+        )
+    }
+}

src/render/svglib/group.rs

@@ -0,0 +1,70 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Value};
+
+pub fn group() -> Group {
+    Group {
+        children: Vec::new(),
+        atts: vec![],
+    }
+}
+
+pub struct Group {
+    children: Vec<Box<dyn Element>>,
+    atts: Vec<Att>,
+}
+
+impl Group {
+    pub fn add(&mut self, child: impl Element + 'static) {
+        self.children.push(Box::new(child));
+    }
+
+    pub fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("id", id));
+    }
+
+    pub fn transform<V>(&mut self, value: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("transform", value));
+    }
+}
+
+impl Element for Group {
+    fn get_type(&self) -> ElementType {
+        ElementType::Group(Vec::new())
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        let mut svg = format!("<g{}>", self.atts.iter().map(att_str3).collect::<String>());
+
+        for e in &self.children {
+            svg.push_str(e.to_string().as_str());
+        }
+        svg.push_str("</g>");
+        svg
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::render::svglib::rect::rect;
+
+    #[test]
+    fn test_group() {
+        let mut g = group();
+        g.id("testgroup");
+        g.add(rect().x(0).y(0).width(10).height(10));
+        assert_eq!(
+            r#"<g id="testgroup"><rect x="0" y="0" width="10" height="10" /></g>"#,
+            g.to_string()
+        )
+    }
+}

src/render/svglib/image.rs

@@ -0,0 +1,85 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Value};
+
+pub fn image() -> Image {
+    Image::new()
+}
+
+struct Image {
+    atts: Vec<Att>,
+}
+
+impl Image {
+    fn new() -> Self {
+        Self { atts: vec![] }
+    }
+
+    fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("id", id));
+    }
+
+    fn transform<V>(&mut self, value: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("transform", value));
+    }
+    fn x<V: Into<Value>>(mut self, x: V) -> Self {
+        self.atts.push(att("x", x));
+        self
+    }
+    fn y<V: Into<Value>>(mut self, y: V) -> Self {
+        self.atts.push(att("y", y));
+        self
+    }
+    fn width<V: Into<Value>>(mut self, width: V) -> Self {
+        self.atts.push(att("width", width));
+        self
+    }
+    fn height<V: Into<Value>>(mut self, height: V) -> Self {
+        self.atts.push(att("height", height));
+        self
+    }
+    fn href<V: Into<Value>>(mut self, href: V) -> Self {
+        self.atts.push(att("href", href));
+        self
+    }
+}
+
+impl Element for Image {
+    fn get_type(&self) -> ElementType {
+        ElementType::Image
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#"<image{} />"#,
+            self.atts.iter().map(att_str3).collect::<String>()
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_image() {
+        let rect = image()
+            .href("http://acme.com/coyote.jpg")
+            .x(0)
+            .y(0)
+            .width(10)
+            .height(10);
+        assert_eq!(
+            r#"<image href="http://acme.com/coyote.jpg" x="0" y="0" width="10" height="10" />"#,
+            rect.to_string()
+        )
+    }
+}

src/render/svglib/line.rs

@@ -0,0 +1,80 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Shape, Value};
+
+pub fn line() -> Line {
+    Line(vec![])
+}
+
+pub struct Line(Vec<Att>);
+
+impl Line {
+    fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("id", id));
+    }
+
+    pub fn x1<V: Into<Value>>(mut self, x: V) -> Self {
+        self.0.push(att("x1", x));
+        self
+    }
+    pub fn y1<V: Into<Value>>(mut self, y: V) -> Self {
+        self.0.push(att("y1", y));
+        self
+    }
+    pub fn x2<V: Into<Value>>(mut self, x2: V) -> Self {
+        self.0.push(att("x2", x2));
+        self
+    }
+    pub fn y2<V: Into<Value>>(mut self, y2: V) -> Self {
+        self.0.push(att("y2", y2));
+        self
+    }
+    pub fn attr<V: Into<Value>>(mut self, key: &str, value: V) -> Self {
+        self.0.push(att(key, value));
+        self
+    }
+}
+
+impl Element for Line {
+    fn get_type(&self) -> ElementType {
+        ElementType::Line
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.0
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#" <line{} />"#,
+            self.0.iter().map(att_str3).collect::<String>()
+        )
+    }
+}
+
+impl Shape for Line {
+    fn fill<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("fill", value));
+        self
+    }
+
+    fn stroke<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("stroke", value));
+        self
+    }
+
+    fn transform<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.0.push(att("transform", value));
+        self
+    }
+}

src/render/svglib/link.rs

@@ -0,0 +1,34 @@
+use crate::render::svglib::{att, Att, Element, ElementType, Value};
+
+pub fn link(href: &str) -> Link {
+    let mut atts = vec![];
+    atts.push(att("href", href));
+    Link { atts }
+}
+
+struct Link {
+    atts: Vec<Att>,
+}
+
+impl Link {
+    fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("id", id));
+    }
+}
+
+impl Element for Link {
+    fn get_type(&self) -> ElementType {
+        ElementType::Link
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        todo!()
+    }
+}

src/render/svglib/path.rs

@@ -0,0 +1,124 @@
+use crate::render::svglib::{att, Att, Element, ElementType, Shape, Value};
+
+pub fn path(d: &str) -> Path {
+    Path::new(d)
+}
+
+pub struct Path {
+    d: String,
+    atts: Vec<Att>,
+}
+
+impl Element for Path {
+    fn get_type(&self) -> ElementType {
+        ElementType::Path
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        todo!()
+    }
+}
+
+impl Path {
+    pub fn new(d: &str) -> Self {
+        Self {
+            d: d.to_string(),
+            atts: vec![],
+        }
+    }
+
+    fn id<V>(&mut self, id: V)
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("id", id));
+    }
+
+    pub fn m(&mut self, x: usize, y: usize) {
+        self.d.push_str(&format!(" m{} {}", x, y));
+    }
+
+    #[allow(non_snake_case)]
+    pub fn M(&mut self, x: usize, y: usize) {
+        self.d.push_str(&format!(" M{} {}", x, y));
+    }
+
+    pub fn z(&mut self) {
+        self.d.push_str(" z");
+    }
+
+    pub fn l(&mut self, x: usize, y: usize) {
+        self.d.push_str(&format!(" l{} {}", x, y));
+    }
+
+    #[allow(non_snake_case)]
+    pub fn L(&mut self, x: usize, y: usize) {
+        self.d.push_str(&format!(" L{} {}", x, y));
+    }
+
+    pub fn h(&mut self, x: usize) {
+        self.d.push_str(&format!(" h{}", x));
+    }
+
+    #[allow(non_snake_case)]
+    pub fn H(&mut self, x: usize) {
+        self.d.push_str(&format!(" H{}", x));
+    }
+
+    pub fn v(&mut self, x: usize) {
+        self.d.push_str(&format!(" v{}", x));
+    }
+
+    #[allow(non_snake_case)]
+    pub fn V(&mut self, x: usize) {
+        self.d.push_str(&format!(" V{}", x));
+    }
+
+    pub fn c(&mut self, x1: usize, y1: usize, x2: usize, y2: usize) {
+        self.d.push_str(&format!(" c{} {} {} {}", x1, y1, x2, y2));
+    }
+
+    #[allow(non_snake_case)]
+    pub fn C(&mut self, x1: usize, y1: usize, x2: usize, y2: usize) {
+        self.d.push_str(&format!(" C{} {} {} {}", x1, y1, x2, y2));
+    }
+
+    pub fn s(&mut self, x1: usize, y1: usize, x2: usize, y2: usize) {
+        self.d.push_str(&format!(" s{} {} {} {}", x1, y1, x2, y2));
+    }
+
+    #[allow(non_snake_case)]
+    pub fn S(&mut self, x1: usize, y1: usize, x2: usize, y2: usize) {
+        self.d.push_str(&format!(" S{} {} {} {}", x1, y1, x2, y2));
+    }
+}
+
+impl Shape for Path {
+    fn fill<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("fill", value));
+        self
+    }
+
+    fn stroke<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("stroke", value));
+        self
+    }
+
+    fn transform<V>(mut self, value: V) -> Self
+    where
+        V: Into<Value>,
+    {
+        self.atts.push(att("transform", value));
+        self
+    }
+}

src/render/svglib/rect.rs

@@ -0,0 +1,91 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Value};
+
+pub fn rect() -> Rect {
+    Rect::new()
+}
+
+pub struct Rect {
+    atts: Vec<Att>,
+}
+
+impl Rect {
+    pub fn new() -> Self {
+        let mut atts = vec![];
+        Self { atts }
+    }
+    pub fn rounded() -> Self {
+        Self { atts: vec![] }
+    }
+
+    pub fn x<V: Into<Value>>(mut self, x: V) -> Self {
+        self.atts.push(att("x", x));
+        self
+    }
+    pub fn y<V: Into<Value>>(mut self, y: V) -> Self {
+        self.atts.push(att("y", y));
+        self
+    }
+    pub fn width<V: Into<Value>>(mut self, width: V) -> Self {
+        self.atts.push(att("width", width));
+        self
+    }
+    pub fn height<V: Into<Value>>(mut self, height: V) -> Self {
+        self.atts.push(att("height", height));
+        self
+    }
+    pub fn class<V: Into<Value>>(mut self, class: V) -> Self {
+        self.atts.push(att("class", class));
+        self
+    }
+
+    pub fn fill<V: Into<Value>>(mut self, value: V) -> Self {
+        self.atts.push(att("fill", value));
+        self
+    }
+
+    pub fn stroke<V: Into<Value>>(mut self, value: V) -> Self {
+        self.atts.push(att("stroke", value));
+        self
+    }
+
+    pub fn transform<V: Into<Value>>(mut self, value: V) -> Self {
+        self.atts.push(att("transform", value));
+        self
+    }
+
+    pub fn attr<V: Into<Value>>(mut self, key: &str, value: V) -> Self {
+        self.atts.push(att(key, value));
+        self
+    }
+}
+
+impl Element for Rect {
+    fn get_type(&self) -> ElementType {
+        ElementType::Rect
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#"<rect{} />"#,
+            self.atts.iter().map(att_str3).collect::<String>()
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_rect() {
+        let rect = rect().x(0).y(0).width(10).height(10);
+        assert_eq!(
+            r#"<rect x="0" y="0" width="10" height="10" />"#,
+            rect.to_string()
+        )
+    }
+}

src/render/svglib/svg.rs

@@ -0,0 +1,111 @@
+use crate::render::svglib::{att_str2, Att, Element, Value};
+
+pub fn svg() -> Svg {
+    Svg::new()
+}
+
+pub struct Svg {
+    style: Option<String>,
+    elements: Vec<Box<dyn Element>>,
+    width: Option<String>,
+    height: Option<String>,
+    viewbox: Option<String>,
+    preserveaspectratio: Option<String>,
+    transform: Option<String>,
+    atts: Vec<Att>,
+}
+
+impl Svg {
+    pub fn new() -> Self {
+        Self {
+            style: None,
+            elements: Vec::new(),
+            width: None,
+            height: None,
+            viewbox: None,
+            preserveaspectratio: None,
+            transform: None,
+            atts: vec![],
+        }
+    }
+
+    pub fn style(&mut self, style: &str) {
+        self.style = Some(style.to_string());
+    }
+
+    pub fn add(&mut self, child: impl Element + 'static) {
+        self.elements.push(Box::new(child));
+    }
+
+    pub fn width<V: Into<Value>>(&mut self, width: V) {
+        self.width = Some(width.into().to_string());
+    }
+
+    pub fn height<V: Into<Value>>(&mut self, height: V) {
+        self.height = Some(height.into().to_string());
+    }
+
+    pub fn viewbox(&mut self, viewbox: &str) {
+        self.viewbox = Some(viewbox.to_string());
+    }
+
+    pub fn preserveaspectratio(&mut self, preserveaspectratio: &str) {
+        self.preserveaspectratio = Some(preserveaspectratio.to_string());
+    }
+
+    fn transform<V: Into<Value>>(&mut self, value: V) {
+        self.transform = Some(value.into().to_string());
+    }
+
+    pub fn to_string(&self) -> String {
+        let mut svg = String::new();
+        svg.push_str(
+            format!(
+                r#"<svg{}{}{}{}{} xmlns="http://www.w3.org/2000/svg">{}"#,
+                att_str2("width", &self.width),
+                att_str2("height", &self.height),
+                att_str2("viewBox", &self.viewbox),
+                att_str2("preserveAspectRatio", &self.preserveaspectratio),
+                att_str2("transform", &self.transform),
+                self.style
+                    .as_ref()
+                    .map(|s| format!("<style>{}</style>", s.to_string()))
+                    .unwrap_or("".to_string())
+            )
+            .as_str(),
+        );
+
+        for e in &self.elements {
+            svg.push_str(e.to_string().as_str());
+        }
+        svg.push_str("</svg>");
+        svg
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::render::svglib::rect::rect;
+
+    #[test]
+    fn style() {
+        let mut svg = Svg::new();
+        svg.style(".id { background-color: red; }");
+        assert_eq!(
+            r#"<svg xmlns="http://www.w3.org/2000/svg"><style>.id { background-color: red; }</style></svg>"#,
+            svg.to_string()
+        )
+    }
+
+    #[test]
+    fn add_rect() {
+        let mut svg = Svg::new();
+        svg.preserveaspectratio("none");
+        svg.add(rect().x(0).y(0).width(10).height(10));
+        assert_eq!(
+            r#"<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="10" height="10" /></svg>"#,
+            svg.to_string()
+        )
+    }
+}

src/render/svglib/text.rs

@@ -0,0 +1,105 @@
+use crate::render::svglib::{att, att_str3, Att, Element, ElementType, Value};
+
+pub fn text() -> Text {
+    Text::new()
+}
+
+pub struct Text {
+    atts: Vec<Att>,
+    text: String,
+}
+
+impl Text {
+    pub fn new() -> Self {
+        let mut atts = vec![];
+        Self {
+            atts,
+            text: "".to_string(),
+        }
+    }
+
+    pub fn text<V: Into<String>>(mut self, text: V) -> Self {
+        self.text = text.into();
+        self
+    }
+
+    pub fn rounded() -> Self {
+        Self {
+            atts: vec![],
+            text: "".to_string(),
+        }
+    }
+
+    pub fn x<V: Into<Value>>(mut self, x: V) -> Self {
+        self.atts.push(att("x", x));
+        self
+    }
+    pub fn y<V: Into<Value>>(mut self, y: V) -> Self {
+        self.atts.push(att("y", y));
+        self
+    }
+    pub fn width<V: Into<Value>>(mut self, width: V) -> Self {
+        self.atts.push(att("width", width));
+        self
+    }
+    pub fn height<V: Into<Value>>(mut self, height: V) -> Self {
+        self.atts.push(att("height", height));
+        self
+    }
+    pub fn class<V: Into<Value>>(mut self, class: V) -> Self {
+        self.atts.push(att("class", class));
+        self
+    }
+
+    pub fn fill<V: Into<Value>>(mut self, value: V) -> Self {
+        self.atts.push(att("fill", value));
+        self
+    }
+
+    pub fn stroke<V: Into<Value>>(mut self, value: V) -> Self {
+        self.atts.push(att("stroke", value));
+        self
+    }
+
+    fn transform<V: Into<Value>>(mut self, value: V) -> Self {
+        self.atts.push(att("transform", value));
+        self
+    }
+
+    pub fn attr<V: Into<Value>>(mut self, key: &str, value: V) -> Self {
+        self.atts.push(att(key, value));
+        self
+    }
+}
+
+impl Element for Text {
+    fn get_type(&self) -> ElementType {
+        ElementType::Rect
+    }
+
+    fn atts(&self) -> &[Att] {
+        &self.atts
+    }
+
+    fn to_string(&self) -> String {
+        format!(
+            r#"<text{}>{}</text>"#,
+            self.atts.iter().map(att_str3).collect::<String>(),
+            self.text,
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_rect() {
+        let rect = text().x(0).y(0).width(10).height(10);
+        assert_eq!(
+            r#"<rect x="0" y="0" width="10" height="10" />"#,
+            rect.to_string()
+        )
+    }
+}

src/render/svgrender2.rs

@@ -0,0 +1,10 @@
+use crate::render::Renderer;
+use crate::Vis;
+
+struct SvgRender;
+
+impl Renderer for SvgRender {
+    fn render(&self, vis: Vis) -> anyhow::Result<Vec<u8>> {
+        Ok(vec![])
+    }
+}