diff --git a/layout/src/backends/svg.rs b/layout/src/backends/svg.rs
index c3e3ebb..745a92d 100644
--- a/layout/src/backends/svg.rs
+++ b/layout/src/backends/svg.rs
@@ -148,6 +148,7 @@ impl RenderBackend for SVGWriter {
         xy: Point,
         size: Point,
         look: &StyleAttr,
+        properties: Option<String>,
         clip: Option<ClipHandle>,
     ) {
         self.grow_window(xy, size);
@@ -156,14 +157,16 @@ impl RenderBackend for SVGWriter {
         if let Option::Some(clip_id) = clip {
             clip_option = format!("clip-path=\"url(#C{})\"", clip_id);
         }
-
+        let props = properties.unwrap_or_default();
         let fill_color = look.fill_color.unwrap_or_else(Color::transparent);
         let stroke_width = look.line_width;
         let stroke_color = look.line_color;
         let rounded_px = look.rounded;
         let line1 = format!(
-            "<rect x=\"{}\" y=\"{}\" width=\"{}\" height=\"{}\" fill=\"{}\" 
-            stroke-width=\"{}\" stroke=\"{}\" rx=\"{}\" {} />\n",
+            "<g {props}>\n
+            <rect x=\"{}\" y=\"{}\" width=\"{}\" height=\"{}\" fill=\"{}\" 
+            stroke-width=\"{}\" stroke=\"{}\" rx=\"{}\" {} />\n
+            </g>\n",
             xy.x,
             xy.y,
             size.x,
@@ -177,15 +180,23 @@ impl RenderBackend for SVGWriter {
         self.content.push_str(&line1);
     }
 
-    fn draw_circle(&mut self, xy: Point, size: Point, look: &StyleAttr) {
+    fn draw_circle(
+        &mut self,
+        xy: Point,
+        size: Point,
+        look: &StyleAttr,
+        properties: Option<String>,
+    ) {
         self.grow_window(xy, size);
         let fill_color = look.fill_color.unwrap_or_else(Color::transparent);
         let stroke_width = look.line_width;
         let stroke_color = look.line_color;
-
+        let props = properties.unwrap_or_default();
         let line1 = format!(
-            "<ellipse cx=\"{}\" cy=\"{}\" rx=\"{}\" ry=\"{}\" fill=\"{}\" 
-            stroke-width=\"{}\" stroke=\"{}\"/>\n",
+            "<g {props}>\n
+            <ellipse cx=\"{}\" cy=\"{}\" rx=\"{}\" ry=\"{}\" fill=\"{}\" 
+            stroke-width=\"{}\" stroke=\"{}\"/>\n
+            </g>\n",
             xy.x,
             xy.y,
             size.x / 2.,
@@ -233,6 +244,7 @@ impl RenderBackend for SVGWriter {
         dashed: bool,
         head: (bool, bool),
         look: &StyleAttr,
+        properties: Option<String>,
         text: &str,
     ) {
         // Control points as defined in here:
@@ -284,11 +296,13 @@ impl RenderBackend for SVGWriter {
 
         let stroke_width = look.line_width;
         let stroke_color = look.line_color;
-
+        let props = properties.unwrap_or_default();
         let line = format!(
-            "<path id=\"arrow{}\" d=\"{}\" \
+            "<g {props}>\n
+            <path id=\"arrow{}\" d=\"{}\" \
             stroke=\"{}\" stroke-width=\"{}\" {} {} {} 
-            fill=\"transparent\" />\n",
+            fill=\"transparent\" />\n
+            </g>\n",
             self.counter,
             path_builder.as_str(),
             stroke_color.to_web_color(),
@@ -311,12 +325,21 @@ impl RenderBackend for SVGWriter {
         self.counter += 1;
     }
 
-    fn draw_line(&mut self, start: Point, stop: Point, look: &StyleAttr) {
+    fn draw_line(
+        &mut self,
+        start: Point,
+        stop: Point,
+        look: &StyleAttr,
+        properties: Option<String>,
+    ) {
         let stroke_width = look.line_width;
         let stroke_color = look.line_color;
+        let props = properties.unwrap_or_default();
         let line1 = format!(
-            "<line x1=\"{}\" y1=\"{}\" x2=\"{}\" y2=\"{}\" stroke-width=\"{}\"
-             stroke=\"{}\" />\n",
+            "<g {props}>\n
+             <line x1=\"{}\" y1=\"{}\" x2=\"{}\" y2=\"{}\" stroke-width=\"{}\"
+             stroke=\"{}\" />\n
+             </g>\n",
             start.x,
             start.y,
             stop.x,
diff --git a/layout/src/core/format.rs b/layout/src/core/format.rs
index ba081ff..08c3a69 100644
--- a/layout/src/core/format.rs
+++ b/layout/src/core/format.rs
@@ -66,14 +66,27 @@ pub trait RenderBackend {
         xy: Point,
         size: Point,
         look: &StyleAttr,
+        properties: Option<String>,
         clip: Option<ClipHandle>,
     );
 
     /// Draw a line between \p start and \p stop.
-    fn draw_line(&mut self, start: Point, stop: Point, look: &StyleAttr);
+    fn draw_line(
+        &mut self,
+        start: Point,
+        stop: Point,
+        look: &StyleAttr,
+        properties: Option<String>,
+    );
 
     /// Draw an ellipse with the center \p xy, and size \p size.
-    fn draw_circle(&mut self, xy: Point, size: Point, look: &StyleAttr);
+    fn draw_circle(
+        &mut self,
+        xy: Point,
+        size: Point,
+        look: &StyleAttr,
+        properties: Option<String>,
+    );
 
     /// Draw a labe.
     fn draw_text(&mut self, xy: Point, text: &str, look: &StyleAttr);
@@ -85,6 +98,7 @@ pub trait RenderBackend {
         dashed: bool,
         head: (bool, bool),
         look: &StyleAttr,
+        properties: Option<String>,
         text: &str,
     );
 
diff --git a/layout/src/std_shapes/render.rs b/layout/src/std_shapes/render.rs
index a618cf4..e574813 100644
--- a/layout/src/std_shapes/render.rs
+++ b/layout/src/std_shapes/render.rs
@@ -152,6 +152,7 @@ fn render_record(
                 Point::new(loc.x - size.x / 2., loc.y - size.y / 2.),
                 Point::new(size.x, size.y),
                 &self.look,
+                Option::None,
                 self.clip_handle,
             );
         }
@@ -182,6 +183,7 @@ fn render_record(
         Point::new(size.x, size.y),
         &look,
         Option::None,
+        Option::None,
     );
 }
 
@@ -280,6 +282,7 @@ impl Renderable for Element {
                 bb.0,
                 self.pos.size(true),
                 &debug_look,
+                self.properties.clone(),
                 Option::None,
             );
         }
@@ -301,6 +304,7 @@ impl Renderable for Element {
                     self.pos.bbox(false).0,
                     self.pos.size(false),
                     &self.look,
+                    self.properties.clone(),
                     Option::None,
                 );
                 canvas.draw_text(self.pos.center(), text.as_str(), &self.look);
@@ -310,6 +314,7 @@ impl Renderable for Element {
                     self.pos.center(),
                     self.pos.size(false),
                     &self.look,
+                    self.properties.clone(),
                 );
                 canvas.draw_text(self.pos.center(), text.as_str(), &self.look);
             }
@@ -318,11 +323,13 @@ impl Renderable for Element {
                     self.pos.center(),
                     self.pos.size(false),
                     &self.look,
+                    self.properties.clone(),
                 );
                 canvas.draw_circle(
                     self.pos.center(),
                     self.pos.size(false).sub(Point::splat(15.)),
                     &self.look,
+                    Option::None,
                 );
                 canvas.draw_text(self.pos.center(), text.as_str(), &self.look);
             }
@@ -333,6 +340,7 @@ impl Renderable for Element {
                         self.pos.size(true),
                         &StyleAttr::debug0(),
                         Option::None,
+                        Option::None,
                     );
 
                     canvas.draw_rect(
@@ -340,6 +348,7 @@ impl Renderable for Element {
                         self.pos.size(false),
                         &StyleAttr::debug1(),
                         Option::None,
+                        Option::None,
                     );
                 }
                 if let Option::Some(label) = label {
@@ -352,6 +361,7 @@ impl Renderable for Element {
                 self.pos.center(),
                 Point::new(6., 6.),
                 &StyleAttr::debug2(),
+                Option::None,
             );
         }
     }
@@ -470,9 +480,19 @@ pub fn render_arrow(
 
     if debug {
         for seg in &path {
-            canvas.draw_line(seg.0, seg.1, &StyleAttr::debug2());
-            canvas.draw_circle(seg.0, Point::new(6., 6.), &StyleAttr::debug1());
-            canvas.draw_circle(seg.1, Point::new(6., 6.), &StyleAttr::debug1());
+            canvas.draw_line(seg.0, seg.1, &StyleAttr::debug2(), Option::None);
+            canvas.draw_circle(
+                seg.0,
+                Point::new(6., 6.),
+                &StyleAttr::debug1(),
+                Option::None,
+            );
+            canvas.draw_circle(
+                seg.1,
+                Point::new(6., 6.),
+                &StyleAttr::debug1(),
+                Option::None,
+            );
         }
     }
 
@@ -488,5 +508,12 @@ pub fn render_arrow(
     let start = matches!(arrow.start, LineEndKind::Arrow);
     let end = matches!(arrow.end, LineEndKind::Arrow);
 
-    canvas.draw_arrow(&path, dash, (start, end), &arrow.look, &arrow.text);
+    canvas.draw_arrow(
+        &path,
+        dash,
+        (start, end),
+        &arrow.look,
+        arrow.properties.clone(),
+        &arrow.text,
+    );
 }
diff --git a/layout/src/std_shapes/shapes.rs b/layout/src/std_shapes/shapes.rs
index 231a10c..bb64832 100644
--- a/layout/src/std_shapes/shapes.rs
+++ b/layout/src/std_shapes/shapes.rs
@@ -72,6 +72,7 @@ pub struct Element {
     pub pos: Position,
     pub look: StyleAttr,
     pub orientation: Orientation,
+    pub properties: Option<String>,
 }
 
 impl Element {
@@ -91,8 +92,21 @@ impl Element {
                 Point::zero(),
                 Point::splat(PADDING),
             ),
+            properties: Option::None,
         }
     }
+
+    pub fn create_with_properties(
+        shape: ShapeKind,
+        look: StyleAttr,
+        orientation: Orientation,
+        size: Point,
+        properties: impl Into<String>,
+    ) -> Element {
+        let mut elem = Element::create(shape, look, orientation, size);
+        elem.properties = Option::Some(properties.into());
+        elem
+    }
     pub fn create_connector(
         label: &str,
         look: &StyleAttr,
@@ -108,6 +122,7 @@ impl Element {
                 Point::zero(),
                 Point::splat(CONN_PADDING),
             ),
+            properties: Option::None,
         }
     }
 
@@ -128,6 +143,7 @@ pub struct Arrow {
     pub line_style: LineStyleKind,
     pub text: String,
     pub look: StyleAttr,
+    pub properties: Option<String>,
     pub src_port: Option<String>,
     pub dst_port: Option<String>,
 }
@@ -140,6 +156,7 @@ impl Default for Arrow {
             line_style: LineStyleKind::Normal,
             text: String::new(),
             look: StyleAttr::simple(),
+            properties: Option::None,
             src_port: Option::None,
             dst_port: Option::None,
         }
@@ -154,6 +171,7 @@ impl Arrow {
             line_style: self.line_style,
             text: self.text.clone(),
             look: self.look.clone(),
+            properties: self.properties.clone(),
             src_port: self.dst_port.clone(),
             dst_port: self.src_port.clone(),
         }
@@ -174,6 +192,29 @@ impl Arrow {
             line_style,
             text: String::from(text),
             look: look.clone(),
+            properties: Option::None,
+            src_port: src_port.clone(),
+            dst_port: dst_port.clone(),
+        }
+    }
+
+    pub fn with_properties(
+        start: LineEndKind,
+        end: LineEndKind,
+        line_style: LineStyleKind,
+        text: &str,
+        look: &StyleAttr,
+        properties: impl Into<String>,
+        src_port: &Option<String>,
+        dst_port: &Option<String>,
+    ) -> Arrow {
+        Arrow {
+            start,
+            end,
+            line_style,
+            text: String::from(text),
+            look: look.clone(),
+            properties: Option::Some(properties.into()),
             src_port: src_port.clone(),
             dst_port: dst_port.clone(),
         }
@@ -191,6 +232,15 @@ impl Arrow {
         )
     }
 
+    pub fn simple_with_properties(
+        text: &str,
+        properties: impl Into<String>,
+    ) -> Arrow {
+        let mut arrow = Arrow::simple(text);
+        arrow.properties = Some(properties.into());
+        arrow
+    }
+
     pub fn invisible() -> Arrow {
         Arrow::new(
             LineEndKind::None,
diff --git a/src/bin/layout.rs b/src/bin/layout.rs
index 7018d69..cef4c06 100644
--- a/src/bin/layout.rs
+++ b/src/bin/layout.rs
@@ -297,9 +297,9 @@ fn test7(offset_x: f64, offset_y: f64, svg: &mut SVGWriter) {
         let to = to.add(center).sub(Point::splat(200.));
 
         if segment_rect_intersection((from, to), es0.position().bbox(false)) {
-            svg.draw_line(from, to, &red);
+            svg.draw_line(from, to, &red, Option::None);
         } else {
-            svg.draw_line(from, to, &StyleAttr::simple());
+            svg.draw_line(from, to, &StyleAttr::simple(), Option::None);
         }
     }
 }