Why another plotting program?

SVG is a vector graphics format. I confess here that when I first heard of the term "vector graphics", I thought it was referring to plots with lots of little arrows. Nope, that is not what it means! Here are some definitions of "vector graphics".

simpleSVG is intended to replace vplot, which produced postscript graphics. Like vplot, simpleSVG is intended to simplify the use of graphics primitives, to make nonstandard plots that are not available in traditional plotting programs.

Some links about SVG

• A Mathematical Gallery of SVG
• Scalable Vector Graphics (SVG) 1.1 Specification
• Harvard Mathematics Department Computing: Svg
• svgbasics.com

Key features of simpleSVG

1. SVG attributes such as stroke-width are written as stroke_width when used as a keyword in a argument list. simpleSVG will replace the _ with a - when writing the file.

2. The SVG editor/viewer inkscape (excellent cross-platform free software, highly recommended as a companion to simpleSVG), seems to concatenate style attributes. Instead of stroke="blue", stroke-width="3" we see style="stroke:blue;stroke-width=3". v0.1 of simpleSVG uses the latter form, concatenated style strings. That may not have been a good idea...

3. simpleSVG ultimately writes the files in standard SVG coordinates in "pt", with the origin in the top left, the first coordinate increasing to the right and the second coordinate increasing down. These will be called SVG coordinates. Coordinates passed as integers are assumed to be in units of "pt".

4. Coordinates passed as floats are assumed to be in user coordinates: the conventional x and y with an origin at the user-specified lower-left intersection of the left and bottom margins. Often, the user will specify axes to be drawn at the margins, so the user coordinates are simple the conventional Cartesian coordinates of a plot. You may see SVG "user coordinates" defined differently in SVG documentation, here the term refers to the simpleSVG implementation.) When simpleSVG writes to a file, user coordinates are converted to SVG coordinates, according to the linear transformation defined by the user.

5. Rarely, users need to specify position in SVG coordinates at higher resolution than a "pt". For example, simpleSVG.hires(300.23) is interpreted as an SVG coordinate, while 300.23 is a user coordinate. (In versions of simpleSVG.py less than 0.20, long integers were used for the hi-res coordinates, but a long integer is not a valid type in Python 3.0).

Installing simpleSVG

• simpleSVG.py
• ... also in this github repo, but I confess that I am not adept at that git repo stuff.

Using simpleSVG

• Invoke ipython (or idle). The >>> of the Python interpreter will appear. At those prompts, enter:

  import simpleSVG 
  a=simpleSVG.svg_class()  
  a.scale()
  a.circle(.5,.5,100,fill='red',stroke='none') 
  a.rect2(0., .15, 1., .85) 
  a.close() 
  ^D
  

  You will produce a file temp.svg, which can be viewed with inkscape.

  Another test is to simply execute the module simpleSVG.py, which by default runs an enclosed test program at end of the module. One of the best ways to learn how to uses simpleSVG.py is to study the test program at the end of simpleSVG.py. The following SVG graphics, testSVG.svg, is produced:

  ---

  ---

  If you do not see an image above, your browser may not be able to display SVG. Here is the SVG converted to a PNG:

  

  ---

  You may wonder what is the benefit of displaying SVG directly to a browser. Maybe not much. Currently, the rare use of SVG in web pages is to demonstrate the use of SVG in web pages, which doesn't seem to be very useful! This page emphasizes using SVG as a vehicle to make scientific publication-quality graphics, ultimately in PNG or PDF format. Except for the one example above, the graphics will be served as PNG.

  But here is something to try: zoom into this web page a bunch of times by repeatedly hitting Ctrl++ (firefox). Compare the above images. You will see the advantage of a vector graphic. To restore normal zoom, type Ctrl+0.

  ---

  simpleSVG examples

  Attributes Diagram	Lorenz Equation	Wind rose	Wind rose 2	Wind rose 3
  Gradient wind plot

  ---