clojure-svg-graphics.md

SVG Graphics

Clojure can be used to generate and manipulate Scalable Vector Graphics (SVG).

SVG images are drawn from a collection of points and paths and images do not lose any quality when making them larger or smaller. Using SVG images for the web and responsive design is highly recommended.

An SVG image (using reagent)

This example of an SVG image is made from:

• a white background
• a green circle and a smaller blue circle
• a white curvy path

(defn concentric-circles []
  [:svg {:style {:border "1px solid"
                 :background "white"
                 :width "150px"
                 :height "150px"}}
   [:circle {:r 50, :cx 75, :cy 75, :fill "green"}]
   [:circle {:r 25, :cx 75, :cy 75, :fill "blue"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 30,40 C 100,40 50,110 120,110"}]])

Note::

Add another path to the code to make a curvy lambda symbol

---

Add the following path to the above code to make a curvy lambda symbol

   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 75,75 C 50,90 50,110 35,110"}]

Or simply replace the code with this example

(defn concentric-circles []
  [:svg {:style {:border "1px solid"
                 :background "white"
                 :width "150px"
                 :height "150px"}}
   [:circle {:r 50, :cx 75, :cy 75, :fill "green"}]
   [:circle {:r 25, :cx 75, :cy 75, :fill "blue"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 30,40 C 100,40 50,110 120,110"}]
   [:path {:stroke-width 12
           :stroke "white"
           :fill "none"
           :d "M 75,75 C 50,90 50,110 35,110"}]])