tsvg

Difference between version 10 and 11 - Previous - Next
<<toc>>

----

**Name**

''tsvg'' - Thingy SVG writer - package to create svg image files with a syntax close to Tcl and to SVG. Using *cairosvg* writing PDF and PNG files is as well possible.

**Description**

[DDG] The package provides one command ''tsvg'' which can hold currently just a single svg code collection. All commands will be evaluated within the tsvg namespace, all unknown methods will be forwarded to the standard tsvg::tag method and produce svg code out of them. So `tsvg dummy x="20" hello` will produce: `<dummy x="20">hello</dummy>` as output. If the tool https://cairosvg.org/%|%cairosvg%|% is installed as well PNG and PDF files can be written since version 0.3.0.

**Links**

    * Homepage: https://github.com/mittelmark/tsvg
    * Download: https://github.com/mittelmark/tsvg/archive/refs/heads/main.zip
    * Manual: https://htmlpreview.github.io/?https://github.com/mittelmark/tsvg/blob/master/tsvg/tsvg.html
    * Version: 0.3.1 - 2023-07-15
    * License: BSD-3-Clause

**Example**

Below a simple example to create a "Hello World!" figure:

======
package require tsvg
tsvg circle cx 50 cy 50 r 45 stroke black stroke-width 2 fill salmon
tsvg text x 29 y 45 Hello
tsvg text x 27 y 65 World!
tsvg write hello-world.svg
======

[tsvg-image]

For more examples see the https://htmlpreview.github.io/?https://github.com/mittelmark/tsvg/blob/master/tsvg/tsvg.html%|%manual page%|%.

Here an example for a procedure based on the tsvg package which can write Guitar and Ukulele Chord diagrams :

======
package require tsvg
## input like; tchords Am 2000 uke-am-chord.svg
 
proc tchords {name cstring outfile} {
    tsvg set code ""
    tsvg set width 100
    tsvg set height 255
    set ystart 50
    # draw title and top line
    tsvg text x 50 y 30 style "font: bold 24px sans-serif;" text-anchor middle $name 
    tsvg line x1 10 y1 $ystart x2 92 y2 $ystart stroke-width 5 stroke black
    set inc [expr {80/([string length $cstring]-1)}]
    # draw vertical lines
    for { set x 0 } { $x < [string length $cstring] } { incr x } {
        tsvg line x1 [expr {11+($x*$inc)}] y1 $ystart x2 [expr {10+($x*$inc)}] y2 251 stroke-width 2 stroke black
    }
    # draw horizontal lines
    for { set x 0 } { $x < 5 } { incr x } {    
        tsvg line x1 10 y1 [expr {$ystart+40+($x*40)}] x2 90 y2 [expr {$ystart+40+($x*40)}] stroke-width 2 stroke black
        for {set y 0} { $y < [string length $cstring] } { incr y } {
            if {[string range $cstring $y $y] == $x} {
                ## there is a string press here ...
                if {$x > 0} {
                    tsvg circle cx [expr {10+1+($y*$inc)}] cy [expr {$ystart-20+($x*40)}] r 9 stroke maroon fill maroon
                }
            }
            ## muted strings?
            if {$x == 0 && [string range $cstring $y $y] == "x"} {
                tsvg text x [expr {10+1+($y*$inc)}] y 42 style "font: 20px sans-serif;" text-anchor middle x
            }
        }
    }
    tsvg write $outfile
}

## examples:
## tchords G      320003   g-chord.svg
## tchords D      xx0232   d-chord.svg
## tchords C        0003   uke-c-chord.svg
## tchords Csus4    0013   uke-c-sus4-chord.svg
======

And here how the output of these four commands at the bottom would look like:

[tsvg-tchords]
 
This code is as well used within [pantcl] to display chord diagrams in the tcrd-filter, look here at the bottom of this manual page for an example: https://htmlpreview.github.io/?https://raw.githubusercontent.com/mittelmark/pantcl/master/lib/tclfilters/filter-tcrd.html

----

**See also**

   * [Thingy: a one-liner OO system] - the toy OO behind *tsvg*
   * [tclcairo] - an other graphics library
   * [tdot] a thingy object to write [GraphViz] dot files
   * [pantcl] Tcl documentation processor   * [tschords] a more extended version of a chord diagram creation tools without using tsvg

----

**Discussion**

[DDG] - 2021-12-01 - Version 0.3.0 adds support for writing PNG and PDF files using an installation of ''cairosvg''

[DDG] - 2023-07-15 - added example to display chord diagram for string instruments like Guitar, Ukulele, etc. Updated to version 0.3.1 fixing an issue with the image width and it is now in its own repository on Github, link is given above

<<categories>> Package | Graphics | SVG | PDF | PNG | Music