SVG


HTML canvasses are bitmaps. They are arrays of bytes. If bitmaps are scaled up you will see jaggies. Scalable Vector Graphics is a software layer between design and output. A svg graphic that looks good on a cell phone will look good on a large display.
SVG can be added to the HTML and the browser will render it on the screen. There are two big advantages to using JavaScript to create svg. They are JavaScript's looping structures and Math functions. The looping structures allow the programmer to generate many lines of svg with a few lines of code. The Math functions allow the programmer among other things to use TRIGONOMETRY!
The svg graphics area is set in a way that is quite similar to the HTML needed to create an html canvas.
<svg width="300" height="300">SVG code here</svg>
To use svg with JavaScript you need a line like..
innerVar="<svg width="300" height="300">"+svgJsVar+"</svg>"; All of the svg on this page is contained in one JavaScript variable, innerVar. JavaScript then sets the inner HTML of a div tag to that variable.
To learn the basics of HTML, JavaScript, and SVG, I suggest going to w3schools.com.

SVG is a very verbose markup language.
Pressing (or clicking) where labled 'click here' triggers a JavaScript message box that contains the svg. It can be copied and pasted into your editor saved as .html or .svg and viewed in your browser. The second link is for a text file similar​ to the code used to create the above graphic. You can download it and save it as a .html file. Load it into an editor, play around with the variables and see the results in your browser. The last link is the home page.

click here to view svg markup




html/js text file  home unit circle