tsvg


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 cairosvg is installed as well PNG and PDF files can be written since version 0.3.0.

Links

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 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


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