Warning: this is an htmlized version!
The original is here, and
the conversion rules are here.
#######
#
# E-scripts on svg.
#
# Note 1: use the eev command (defined in eev.el) and the
# ee alias (in my .zshrc) to execute parts of this file.
# Executing this file as a whole makes no sense.
# An introduction to eev can be found here:
#
#   (find-eev-quick-intro)
#   http://angg.twu.net/eev-intros/find-eev-quick-intro.html
#
# Note 2: be VERY careful and make sure you understand what
# you're doing.
#
# Note 3: If you use a shell other than zsh things like |&
# and the for loops may not work.
#
# Note 4: I always run as root.
#
# Note 5: some parts are too old and don't work anymore. Some
# never worked.
#
# Note 6: the definitions for the find-xxxfile commands are on my
# .emacs.
#
# Note 7: if you see a strange command check my .zshrc -- it may
# be defined there as a function or an alias.
#
# Note 8: the sections without dates are always older than the
# sections with dates.
#
# This file is at <http://angg.twu.net/e/svg.e>
#           or at <http://angg.twu.net/e/svg.e.html>.
#        See also <http://angg.twu.net/emacs.html>,
#                 <http://angg.twu.net/.emacs[.html]>,
#                 <http://angg.twu.net/.zshrc[.html]>,
#                 <http://angg.twu.net/escripts.html>,
#             and <http://angg.twu.net/>.
#
#######



# «.demo-1»		(to "demo-1")
# «.demo-2»		(to "demo-2")
# «.hlavaty-1»		(to "hlavaty-1")
# «.css-doodle»		(to "css-doodle")
# «.nanosvg»		(to "nanosvg")



# https://github.com/rougier/svg-lib
# https://gitlab.com/atamariya/emacs/-/blob/dev/lisp/svg.el
# https://mail.google.com/mail/ca/u/0/#search/svg/FMfcgzGljlmJXVhgbpfLKHkQFvWfCPMP
# https://lifeofpenguin.blogspot.com/2021/08/scribble-notes-in-gnu-emacs.html
# https://www.december.com/html/spec/colorsvg.html
# https://github.com/rougier/svg-tag-mode

# (find-es "emacs" "svg")
# (find-es "emacs" "sketch-mode")
# (find-elnode "SVG Images")
# (find-TH "2022eev-svg")




#####
#
# demo-1
# 2022apr02
#
#####

# «demo-1»  (to ".demo-1")
# (find-angg ".emacs" "find-svgbuffer")
# https://lists.gnu.org/archive/html/help-gnu-emacs/2022-04/msg00002.html
# (require 'svg)

* (defun s   () (interactive) (find-svgbuffer "*svg*" svg))
* (defun ks  () (interactive) (ee-kill-buffer "*svg*"))
* (defun pps () (interactive) (find-epp svg))
* (defun pps () (interactive) (find-eppp (cddr svg)))
* (defun s3  () (interactive) (find-3a nil '(pps) '(s)))
*
* (ks)
* (setq svg (svg-create 200 200 :stroke "orange" :stroke-width 5))
* (s3)
*
* (svg-rectangle svg 10 20 30 40 :fill-color "yellow" :stroke "blue")
* (svg-rectangle svg 50 20 30 40 :fill-color "red" :stroke "brown")
* (svg-rectangle svg 90 20 30 40 :fill-color "red")
* (svg-rectangle svg 90 20 30 40 :fill-color "red")
* (svg-rectangle svg 90 20 30 40 :fill-color "orchid2")
* (svg-rectangle svg 90 20 30 40 :fill-color "purple")
* (s3)
* (svg-gradient svg "gradient1" 'linear '((0 . "red")    (100 . "yellow")))
* (svg-gradient svg "gradient2" 'linear '((0 . "yellow") (100 . "blue")))
* (svg-gradient svg "gradient3" 'linear '((0 . "blue")   (100 . "violet")))
* (svg-rectangle svg  30 50 20 20 :gradient "gradient1")
* (svg-rectangle svg  70 50 20 40 :gradient "gradient2")
* (svg-rectangle svg 110 50 20 60 :gradient "gradient3")
*
* (svg-polyline svg '((10 . 100) (30 . 100) (20 . 70)) :stroke-color "green")
* (svg-polyline svg '((10 . 100) (30 . 100) (20 . 70)) :stroke-color "green" :fill-color "black")
*
* (svg-circle   svg 160 40 15 :id "circle1")
* (s3)

(setq svg (svg-create 520 520 :stroke "orange" :stroke-width 5))
(setq svg (svg-create 200 200 :stroke "orange" :stroke-width 5))
(find-svgbuffers "*svg*" svg "stroke")
(svg-rectangle svg 100 100 500 500 :gradient "gradient" :id "rec1")
(svg-circle    svg 60 50 40 :id "circle1")
(svg-ellipse   svg 100 100 50 90 :stroke "red" :id "ellipse1")


(require 'svg)
(setq svg (svg-create 201 101))
(find-svgbuffers "*svg*" svg)
(svg-gradient svg "gradient1" 'linear '((0 . "red") (25 . "green") (100 . "blue")))
(svg-circle svg 50 50 50 :gradient "gradient1")
(svg-gradient svg "gradient2" 'linear '((0 . "red") (100 . "blue")))
(svg-circle svg 100 50 50 :gradient "gradient2")




#####
#
# demo-2
# 2022apr03
#
#####

# «demo-2»  (to ".demo-2")
# (find-fline "~/LOGS/2022apr02.emacs-2")
# (require 'svg)

;; Test: (ramp 100 100)
;;
(defun ramp (x0 y0)
  `((,(+ x0  0) . ,(+ y0   0))
    (,(+ x0 20) . ,(+ y0   0))
    (,(+ x0 30) . ,(+ y0 -10))))


* (defun s   () (interactive) (find-svgbuffer "*svg*" svg))
* (defun ks  () (interactive) (ee-kill-buffer "*svg*"))
* (defun pps () (interactive) (find-eppp (cddr svg)))
* (defun pps () (interactive) (find-epp svg))
* (defun s3  () (interactive) (find-3a nil '(pps) '(s)))
*
* (ks)
* (setq svg (svg-create 200 200))
* (s3)
*
* (svg-rectangle svg 0 0 200 200 :fill-color "#eeeeee")
* (svg-polyline svg (ramp 20 20) :stroke-color "black")
* (svg-polyline svg (ramp 30 30) :stroke-color "black" :fill-color "blue")
* (svg-polyline svg (ramp 40 40) :stroke-color "black" :fill-color "blue" :stroke-width 3)
* (svg-polyline svg (ramp 50 50) :stroke-color "black" :fill-color "none" :stroke-width 3)
* (svg-polyline svg (ramp 60 60) :stroke-color "black" :fill-color nil    :stroke-width 3)
* (s3)
























* (svg-rectangle svg 50 20 30 40 :fill-color "red" :stroke "brown")
* (svg-rectangle svg 90 20 30 40 :fill-color "red")
* (svg-rectangle svg 90 20 30 40 :fill-color "red")
* (svg-rectangle svg 90 20 30 40 :fill-color "orchid2")
* (svg-rectangle svg 90 20 30 40 :fill-color "purple")
* (s3)
* (svg-gradient svg "gradient1" 'linear '((0 . "red")    (100 . "yellow")))
* (svg-gradient svg "gradient2" 'linear '((0 . "yellow") (100 . "blue")))
* (svg-gradient svg "gradient3" 'linear '((0 . "blue")   (100 . "violet")))
* (svg-rectangle svg  30 50 20 20 :gradient "gradient1")
* (svg-rectangle svg  70 50 20 40 :gradient "gradient2")
* (svg-rectangle svg 110 50 20 60 :gradient "gradient3")
*
* (svg-polyline svg '((10 . 100) (30 . 100) (20 . 70)) :stroke-color "green")
* (svg-polyline svg '((10 . 100) (30 . 100) (20 . 70)) :stroke-color "green" :fill-color "black")
*
* (svg-circle   svg 160 40 15 :id "circle1")
* (s3)





#####
#
# hlavaty-1
# 2022apr02
#
#####

# «hlavaty-1»  (to ".hlavaty-1")
# https://lists.gnu.org/archive/html/help-gnu-emacs/2022-04/msg00007.html
# (find-angg ".emacs" "find-svgbuffer")
# (find-hfunction 'svg-rectangle)
# The prefix "hsvg-" means "(based on) Tomas Hlavaty's SVG functions".

;; Tests:            (hsvg 1 2 3 4 :BO "DY")
;;                                 (hsvg-circle 5 6 7)
;;                   (hsvg 1 2 3 4 (hsvg-circle 5 6 7))
;; (ee-xml-to-string (hsvg 1 2 3 4 (hsvg-circle 5 6 7)))

' (ee-xml-to-string
   '((svg
      ((xmlns . "http://www.w3.org/2000/svg")
       (viewBox . "0 0 100 100"))
      (circle ((cx . "50")
	       (cy . "50")
	       (r . "20")))
      ))
   )

(defun hsvg-n (n) (format "%s" n))
(setq  hsvg-viewbox "0 0 100 100")

(defun hsvg (&rest body)
  `(svg
    ((xmlns . "http://www.w3.org/2000/svg")
     (viewBox . ,hsvg-viewbox))
    ,@body))

(defun hsvg-circle (cx cy r &rest rest)
  `(circle
    ((cx . ,(hsvg-n cx))
     (cy . ,(hsvg-n cy))
     (r  . ,(hsvg-n r))
     ,@rest
     )))

;;                         (hsvg (hsvg-circle 25 25 10))
;; (find-svgbuffer "*svg*" (hsvg (hsvg-circle 25 25 10)))
;; (find-svgbuffer "*svg*" (hsvg (hsvg-circle 25 25 10 '(fill . "red"))))


(fill . "red") (stroke-width . 5)

`(,@(prog1 nil (setq a 22))
  ,a
  ,@(prog1 nil (setq a 33))
  ,a
 )











(require 'xml)
(with-temp-buffer
  (xml-print
   '((svg
      ((xmlns . "http://www.w3.org/2000/svg";)
       (viewBox . "0 0 100 100"))
      (circle
       ((cx . "50") (cy . "50") (r . "20"))))))
  (write-file "/tmp/a.svg"))

which you can refactor anyway you like, e.g.

(defun hsvg (x y w h &rest body)
  `((svg
     ((xmlns . "http://www.w3.org/2000/svg";)
      (viewBox . ,(format "%s %s %s %s" x y w h)))
     ,@body)))

(defun hsvg-circle (cx cy r)
  `(circle
    ((cx . ,(format "%s" cx)
     (cy . ,(format "%s" cy))
     (r . ,(format "%s" r))))))

(with-temp-buffer
  (xml-print
   (svg 0 0 100 100 (svg-circle 50 50 20)))
  (write-file "/tmp/a.svg"))


 -- Function: svg-polygon svg points &rest args
     Add a polygon to SVG where POINTS is a list of X/Y pairs that
     describe the outer circumference of the polygon.

          (svg-polygon svg '((100 . 100) (200 . 150) (150 . 90))
                       :stroke-color "blue" :fill-color "red")





#####
#
# css-doodle
# 2022sep26
#
#####

# «css-doodle»  (to ".css-doodle")
# https://news.ycombinator.com/item?id=32990177 Experimenting a New Syntax to Write SVG (yuanchuan.dev)
# https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg
# https://css-doodle.com/
# https://github.com/css-doodle/css-doodle
# https://webdesign.tutsplus.com/tutorials/how-to-draw-patterns-with-css-using-css-doodle--cms-33110
# https://www.youtube.com/watch?v=KKg6Uo1pVLU




#####
#
# nanosvg
# 2023jan27
#
#####

# «nanosvg»  (to ".nanosvg")
# https://github.com/memononen/nanosvg
# (find-git-links "https://github.com/memononen/nanosvg" "nanosvg")
# (code-c-d "nanosvg" "~/usrc/nanosvg/")
# (find-nanosvgfile "")
# (find-nanosvgfile "README.md")

https://lists.gnu.org/archive/html/emacs-devel/2023-01/msg00513.html Jean / IceWM



http://git.savannah.nongnu.org/cgit/dungeon.git/tree/src/dm-map.el

<corwin> edrx: these are really, really messy but...
         http://git.savannah.nongnu.org/cgit/dungeon.git/tree/src/dm-map.el
<corwin> And then a rewrite of the 'tiling engine' is in dm-draw,
         with the actual user facing stuff here:
         http://git.savannah.nongnu.org/cgit/dungeon.git/tree/src/dm-sketch.el

<corwin> edrx: although this is basically impossible to read, this
         one function might help. it draws the 'graph paper'
         background.
         http://git.savannah.nongnu.org/cgit/dungeon.git/tree/src/dm-draw.el#n602
*** igemnace QUIT Quit: WeeChat 3.5
*** reedrichards QUIT Remote host closed the connection
*** HaSt QUIT Ping timeout: 260 seconds
<corwin> edrx: anyway... yea, I have been working with svg.el a
         bit; I'd be happy to chat or exchange emails but I'd just
         as soon not have my views on this topic kibitzed on devel.


https://news.ycombinator.com/item?id=33584941 Forking Chrome to turn HTML into SVG (fathy.fr)

https://github.com/misohena/el-easydraw
https://misohena.jp/blog/2021-09-21-emacs-easy-draw.html
https://sachachua.com/blog/2023/09/emacsconf-backstage-scheduling-with-svgs/
https://svg-tutorial.com/ Learn SVG with 25 examples – How to code images in HTML
https://prideout.net/blog/svg_knots/
https://news.ycombinator.com/item?id=39079943 SVG images can contain JavaScript (github.com/berthubert)

https://rhodesmill.org/brandon/2019/animating-the-equant/ ***
https://news.ycombinator.com/item?id=40454475 Animating Ptolemy's Equant with Python, SVG, and CSS (rhodesmill.org)
https://fietkau.software/qr
https://news.ycombinator.com/item?id=41410442 Client-side QR code generator with SVG output (fietkau.software)
https://cyberb.space/notes/2024/how-i-added-maps-to-my-travel-posts/
https://news.ycombinator.com/item?id=41532958 I Added SVG Maps to My Travel Posts (cyberb.space)






#  Local Variables:
#  coding:               utf-8-unix
#  End: