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: