Main /

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

- Classical Mechanics Bibliography
- Classical Mechanics Study Sources
- Physics About Physics
- Physics Classical Mechanics
- Physics Index
- Physics Quantum Notions
- Physics Template
- Quantum Physics
- Quantum Physics Bibliography
- Quantum Physics Study Sources
- Quantum Physics Syllabus
- Quarks
- Table of Physical Formulas & Constants
- The Blackbody Problem
- Units and Dimentional Analysis
- Vector Math for Quantum Mechanics

Math Pages

- Derivative of 1/x from Definition.
- (cos θ - 1) / θ = 1
- Algebra Example of Factoring
- Algebra Refresher Exercises
- Binomial Coefficients
- Binomial Theorem
- Coordinates Example
- Derivative of a Function at a Point
- Derivative of Logarithm
- Differential Sum Rule Demonstrated
- Differentiation
- Geometric Interpretation of Derivative
- Geometry
- Geometry of Trig Functions
- Graphing in Two Dimensions
- Hyperbolic Functions
- Implicit Differentiation
- Lim θ → 0 sin(θ) / θ = 1
- Linear Algebra
- Math About Math
- Math Analytic Geometry
- Math Formulas
- Math Function & Expression Index
- Math Index
- Math Markup
- Math Work Template
- Matrix Introduction
- Overview of The Calculus
- Remedial Trigonometry
- Table of Derivatives
- Table of Derivatives, Integrals, & Constants
- Table of Integrals
- Techniques of Integration
- The Calculus of Single Variables
- The Derivative of Arc Cotangent
- The Derivative of Arc Coversed Cosine
- The Derivative of Arc Coversed Sine
- The Derivative of Arc Versed Cosine
- The Derivative of Arc Versed Sine
- The Derivative of Arccosine
- The Derivative of Cosecant
- The Derivative of Cosine
- The Derivative of Cotangent
- The Derivative of Coversed Cosine
- The Derivative of Coversed Sine
- The Derivative of Haversed Sine
- The Derivative of Secant
- The Derivative of Sine
- The Derivative of Versed Cosine
- The Derivative of Versed Sine
- The Fundamental Theorem of Calculus
- The Witch of Agnesi
- Trigonometric Substitution Suggestions
- Vectors

Math Exercises

- Algebra Refresher Exercises Worked
- Calculus Polynomial Graph Exercises
- Calculus Polynomial Graph Exercises Answers
- Calculus Polynomial Graph Exercises Worked
- Calculus Rule Exercises
- Calculus Rule Exercises Answers
- Calculus Rule Exercises Worked
- Composite Exercises Answers
- Composite Function Exercises Worked
- Composition Function Exercises
- Implicit Differentiation Exercises
- Implicit Differentiation Exercises Answers
- Implicit Differentiation Exercises Worked
- Integration by Substitution Exercises
- Integration by Substitution Exercises Answers
- Integration by Substitution Exercises Worked
- Integration Exercises
- Integration Exercises Answers
- Integration Exercises Worked
- Limit Exercises
- Limit Exercises Answers
- Limit Exercises Worked
- Log and Exponential Differentiation Exercises
- Log and Exponential Differentiation Exercises Answers
- Log and Exponential Differentiation Exercises Worked

Math Tools

Sections