SVG (Scalable Vector Graphics) is a scheme for expressing graphics in XML (Extensible Markup Language). SVG is viewable in HTML 5 enabled browsers, which includes recent versions of most popular browsers.
Most often SVG images are created in SVG paint or draw programs, some of which are in Javascript (so they can be used in browsers) and some of which are stand-alone programs. But SVG is a form of XML, so it is text that can also be created in any text editor. SVG can include pictures in other graphic formats and, if desired, can apply various effects to them. Actually expressing photo-realistic pictures in SVG is theoretically possible, but the files would be huge. But SVG is practical for line drawings, logos, cartoons. SVG has many more capabilities than will used or mentioned here.
"Canvas" means the drawing area. ("Canvas" is also the name of a Javascript system for drawing that is not the same as SVG.)
In SGV, the origin (0,0) is in the upper left corner. The positive direction of the y-axis (vertical axis) is down. Angles are measured clockwise. Roots of this system go back to early days of computing. But this will almost certain be challenging to those familiar with the usual mathematical system.
It is relatively easy to make things somewhat easier for the user (person writing SGV markup). The origin can be moved to any convenient place by translation, and the the positive direction of y can be reversed by scaling it with -1. These changes can be set once and thereafter the user can write in the co-ordinates he likes. (Scaling can also make the units something other than pixels.) But I have not found a fix for angles.
Imperfect Solution
All three of these figures are created with the same markup (except for color name. The native axes are shown in silver. The axes translated by 40 pixels in both directions are shown in blue. The black axes are translated even farther down and left and the y-axis is scaled with -1. Unfortunately, the text 0 does not do as I would like under scaling. Red shows the text scaled again with the position adjusted. The moral of this story seems to be, learn to work with the SVG canvas as it is.
Sources:
Recommended:
Category: Math
No comments yet.
This is a student's notebook. I am not responsible if you copy it for homework, and it turns out to be wrong.
Figures are often enhanced by hand editing; the same results may not be achieved with source sites and source apps.
Backlinks
This page is MathSVG
Lars
Contact by Snail!
Lars Eighner
APT 1191
8800 N IH 35
AUSTIN TX 78753
USA
Help
The best way to look for anything in LarsWiki is to use the search bar.
Physics Pages
Math Pages
Math Exercises
Math Tools
Sections