jiro4989/svgo

This is svgo, a small utility to create SVG objects.

svgo

This is svgo, a small utility to create SVG objects. This was inspired by jpmens/jo.

Table of contents

• Usage
  • Basic usage
  • Animation GIF
• Installation
• Special variables
  • Field variables ($1, $2, ... $NF)
  • Current record number (NR)
• LICENSE
• See also

Usage

Basic usage

-W is a width of svg tag elements. -H is a height of svg tag elements. Default values are 200.

$ svgo -W 400 -H 400 [ circle cx=200 cy=200 r=200 stroke=teal fill='#DDD' ]

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" height="400"><circle cy="200" cx="200" fill="#DDD" stroke="teal" r="200" /></svg>

Save file. (-o)

$ svgo -o out.svg [ circle cx=200 cy=200 r=200 stroke=teal fill='#DDD' ]

Nested elements.

$ svgo [ g [ circle cx=100 cy=100 r=80 stroke=teal fill="#DDD" ] [ circle cx=100 cy=100 r=80 stroke=teal fill="#DDD" ] ]

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" height="200"><g>
    <circle cy="100" cx="100" fill="#DDD" stroke="teal" r="80" />
    <circle cy="100" cx="100" fill="#DDD" stroke="teal" r="80" />
  </g></svg>

Use stdin fields. (-i)

$ seq 0 25 100 | svgo [ circle cx=100 cy=100 r='$1' ] -i

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" height="200"><circle cy="100" cx="100" r="0" /></svg>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" height="200"><circle cy="100" cx="100" r="25" /></svg>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" height="200"><circle cy="100" cx="100" r="50" /></svg>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" height="200"><circle cy="100" cx="100" r="75" /></svg>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" height="200"><circle cy="100" cx="100" r="100" /></svg>

Animation GIF

You can generate animation GIF with ImageMagick (convert).

$ (seq 1 10 100; seq 100 -10 0) | svgo [ circle cx=100 cy=100 r='$1' ] -in -w 3 -o 'out_$NR.svg'
$ convert -density 1200 -resize 200x200 out_*.svg anim1.gif

$ (seq 5 | awk '{print $1 * 40, 200}' | tee >(awk '{print $2, $1}')) | svgo [ rect x=0 y=0 width='$1' height='$2' ] -ino 'out_$NR.svg'
$ convert -resize 200x200 out*.svg anim2.gif

$ yes 'echo $((RANDOM % 200)) $((RANDOM % 200))' | head | bash | svgo [ circle cx='$1' cy='$2' r='50' ] -ino 'out_$NR.svg'
$ convert -resize 200x200 out*.svg anim3.gif

$ seq -f 'obase=16; ibase=10; %g' 0 15 | bc | awk '{print $1, "0", "0"}' | svgo [ circle cx=100 cy=100 fill='#$1$2$3' r=100 ] -ino 'out_$NR.svg'
$ convert -resize 200x200 out*.svg anim4.gif

$ seq 0 16 360 | svgo [ g rotate='$1' [ rect x=0 y=0 width=100 height=100 ] ] -ino 'out_$NR.svg'
$ convert -resize 200x200 out*.svg anim5.gif

$ seq 10 2 30 | svgo -i [ text x=0 y='$1' font-size='$1' TEXT=HelloWorld ] -no 'out_$NR.svg'
$ convert -resize 200x200 out*.svg anim6.gif

$ r=100
  j=0
  for i in f47 d47 b47 947 747 547 347 147 047 027; do
    j=$((j+1))
    svgo [ circle cx=100 cy=100 r=$r fill="#$i" ] > out_$(printf %02d $j).svg
    r=$((r-10))
  done
$ convert out*.svg anim7.gif

Installation

$ nimble install -Y svgo

or install binaries from Releases.

Special variables

Field variables ($1, $2, ... $NF)

Records are read in stdin at a time, and stored in the field variables. The record is split into fields which are stored in $1, $2, ..., $NF like awk when activate -i (--use-stdin) flag.

$ seq 3 | svgo -i [ circle cx=100 cy=200 r='$1' ]

# equals

$ svgo [ circle cx=100 cy=200 r='1' ]
$ svgo [ circle cx=100 cy=200 r='2' ]
$ svgo [ circle cx=100 cy=200 r='3' ]

$ seq 3 | awk '{print $1, $1*10}' | svgo -i [ circle cx='$1' cy='$2' r='$1' ]

# equals

$ svgo [ circle cx='1' cy='10' r='1' ]
$ svgo [ circle cx='2' cy='20' r='2' ]
$ svgo [ circle cx='3' cy='30' r='3' ]

Current record number (NR)

TODO

LICENSE

MIT

See also

• SVG 1.1 - W3C