#|| Four separate rectangles ||# (defun test-1 () (let ((svg (make-svg :width 5 :height 4 :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (add-element svg (make-rect :x 0.5 :y 0.5 :width 2 :height 1)) (add-element svg (make-rect :x 0.5 :y 2 :width 1 :height 1.5)) (add-element svg (make-rect :x 3 :y 0.5 :width 1.5 :height 2)) (add-element svg (make-rect :x 3.5 :y 3 :width 1 :height 0.5)) ;; Show outline of canvas using 'rect' element (add-element svg (make-rect :x 0.1 :y 0.1 :width 4.98 :height 3.98 :fill "none" :stroke "blue" :stroke-width 0.2)) (with-open-file (s "/Users/ed/Desktop/test-1.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s)))) #|| Two groups, each of two rectangles ||# (defun test-2 () (let ((svg (make-svg :width 5 :height 5 :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (add-element svg (make-desc "Two groups, each of two rectangles")) (let ((group-1 (make-group :id "group1" :fill "red"))) (add-element group-1 (make-rect :x 1 :y 1 :width 1 :height 1)) (add-element group-1 (make-rect :x 3 :y 1 :width 1 :height 1)) (add-element svg group-1)) (let ((group-2 (make-group :id "group1" :fill "blue"))) (add-element group-2 (make-rect :x 1 :y 3 :width 1 :height 1)) (add-element group-2 (make-rect :x 3 :y 3 :width 1 :height 1)) (add-element svg group-2)) ;; Show outline of canvas using 'rect' element (add-element svg (make-rect :x 0.1 :y 0.1 :width 4.98 :height 4.98 :fill "none" :stroke "blue" :stroke-width 0.02)) (with-open-file (s "/Users/ed/Desktop/test-2.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s)))) #|| Example Use03-GeneratedContent - 'use' with a 'transform' attribute ||# (defun test-3 () (let ((svg (make-svg :width 10 :height 3 :|viewBox| "0 0 100 30" :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (let ((group (make-group :transform "translate(20,2.5) rotate(10)"))) (add-element group (make-rect :x 0 :y 0 :width 60 :height 10)) (add-element svg group)) ;; Show outline of canvas using 'rect' element (add-element svg (make-rect :x 0.1 :y 0.1 :width 99.8 :height 29.8 :fill "none" :stroke "blue" :stroke-width 0.02)) (with-open-file (s "/Users/ed/Desktop/test-3.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s)))) #|| Example cubic01- cubic Bezier commands in path data Picture showing a simple example of path data using both a "C" and an "S" command, along with annotations showing the control points and end points M100,200 C100,100 250,100 250,200 S400,300 400,200 ||# (defun test-4 () (let ((svg (make-svg :width 5 :height 4 :|viewBox| "0 0 500 400" :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (add-element svg (make-css " .Border { fill:none; stroke:blue; stroke-width:1 } .Connect { fill:none; stroke:#888888; stroke-width:2 } .SamplePath { fill:none; stroke:red; stroke-width:5 } .EndPoint { fill:none; stroke:#888888; stroke-width:2 } .CtlPoint { fill:#888888; stroke:none } .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 } .Label { font-size:22; font-family:Verdana }")) ;; Show outline of canvas using 'rect' element (add-element svg (make-rect :class "Border" :x "1" :y "1" :width "498" :height "398")) (add-element svg (make-polyline :class "Connect" :points "100,200 100,100")) (add-element svg (make-polyline :class "Connect" :points "250,100 250,200")) (add-element svg (make-polyline :class "Connect" :points "250,200 250,300")) (add-element svg (make-polyline :class "Connect" :points "400,300 400,200")) (add-element svg (make-path :class "SamplePath" :d "M100,200 C100,100 250,100 250,200 S400,300 400,200")) (add-element svg (make-circle :class "EndPoint" :cx "100" :cy "200" :r "10")) (add-element svg (make-circle :class "EndPoint" :cx "250" :cy "200" :r "10")) (add-element svg (make-circle :class "EndPoint" :cx "400" :cy "200" :r "10")) (add-element svg (make-circle :class "CtlPoint" :cx "100" :cy "100" :r "10")) (add-element svg (make-circle :class "CtlPoint" :cx "250" :cy "100" :r "10")) (add-element svg (make-circle :class "CtlPoint" :cx "400" :cy "300" :r "10")) (add-element svg (make-circle :class "AutoCtlPoint" :cx "250" :cy "300" :r "9")) (add-element svg (make-text "M100,200 C100,100 250,100 250,200" :class "Label" :x "25" :y "70")) (add-element svg (make-text "S400,300 400,200" :class "Label" :style "text-anchor:middle" :x "325" :y "350")) (with-open-file (s "/Users/ed/Desktop/test-4.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s)))) #|| Example rect02 - rounded rectangles ||# (defun test-5 () (let ((svg (make-svg :width 12 :height 4 :|viewBox| "0 0 1200 400" :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (add-element svg (make-desc "Example rect02 - rounded rectangles")) (add-element svg (make-rect :x "1" :y "1" :width "1198" :height "398" :fill "none" :stroke "blue" :stroke-width "2")) (add-element svg (make-rect :x "100" :y "100" :width "400" :height "200" :rx "50" :fill "green")) (let ((group (make-group :transform "translate(700 210) rotate(-30)"))) (add-element group (make-rect :x "0" :y "0" :width "400" :height "200" :rx "50" :fill "none" :stroke "purple" :stroke-width "30")) (add-element svg group)) (with-open-file (s "/Users/ed/Desktop/test-5.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s)))) #|| Example tspan01 - using tspan to change visual attributes You are not a banana. ||# (defun test-6 () (let ((svg (make-svg :width 10 :height 3 :|viewBox| "0 0 1000 300" :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (let ((group (make-group :font-family "Verdana" :font-size "45"))) (let ((text (make-text "You are " :x "200" :y "150" :fill "blue"))) (add-element text (make-tspan "not" :font-weight "bold" :fill "red")) (add-element text " a banana.") (add-element group text)) (add-element svg group)) (with-open-file (s "/Users/ed/Desktop/test-6.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s)))) #|| Example tspan03 - using tspan's x and y attributes for multiline text and precise glyph positioning Cute and fuzzy ||# (defun test-7 () (let ((svg (make-svg :width 10 :height 3 :|viewBox| "0 0 1000 300" :version "1.1" :xmlns "http://www.w3.org/2000/svg"))) (let ((group (make-group :font-family "Verdana" :font-size "45"))) (let ((text (make-text () :fill "rgb(255,164,0)"))) (add-element text (make-tspan "Cute and " :x "300 350 400 450 500 550 600 650" :y "100")) (add-element text (make-tspan " fuzzy" :x "375 425 475 525 575" :y "200")) (add-element group text)) (add-element svg group)) (with-open-file (s "/Users/ed/Desktop/test-7.svg" :direction :output :if-exists :supersede :if-does-not-exist :create) (print-svg svg s))))