You can support this project by donating at:

Or see the list of project sponsors.

cl-svggraphics

Documentation	😀
Docstrings	🤨
Tests	🥺
Examples	🥺
RepositoryActivity	🥺
CI	🥺

This is a library for SVG generation. It has nice documentation. I will show only a simple example of how to create the SVG with a circle filled with the gradient:

POFTHEDAY> (cl-svg:with-svg-to-file (svg 'cl-svg:svg-1.1-toplevel :height 200 :width 200)
               ("docs/media/0161/test.svg" :if-exists :supersede)
             (cl-svg:draw svg
                 (:circle :cx 100 :cy 100 :r 100)
                 :fill (cl-svg:xlink-href
                        (cl-svg:make-linear-gradient svg
                            (:id :fill
                             :x1 "0%" :y1 "0%"
                             :x2 "100%" :y2 "100%")
                          (cl-svg:stop :color "red" :offset "0%")
                          (cl-svg:stop :color "blue" :offset "100%")))))

Here is the result:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" id="toplevel"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="FILL" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop stop-color="red" stop-opacity="1.00" offset="0%"/>
      <stop stop-color="blue" stop-opacity="1.00" offset="100%"/>
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="100" fill="url(#FILL)"/>
</svg>

There are more drawing primitives covered by the documentation. Read the docs and create more interesting pictures. Also, you can combine these SVGs with JS code produced by Parenscript, to create interactive graphics!