SVG - Various Examples

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

The program below fetches the body element first. Then a div element is created and assigned the name qMainDiv. The each the six examples of SVG graphics is shown: line, rect, circle, ellipse, polygon, and polyline.

Lines are designated by two points, as well as a stroke width. Rectangles are specified a point, specified by x and y andd a length and width; additionally, we can specify the rounding of corners via the values cx and cy, along with the fill color, and stroke width. Circles are specified by a center point and radius. Ellipses are specified by a center point and radii in the x and y directions. Polygons are specified by a series of points that are given as x and y values with the first point also being the last point. Polylines are specified as a path by a series of points that are given as x and y values.

SvgVariety.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="SvgVariety.js"></script>
</body>
</html>

SvgVariety.js

var qBody = document.getElementsByTagName("body")[0];


var qMainDiv = document.createElement("div");
qMainDiv.style.backgroundColor = "#eeeecc";
qMainDiv.style.width="640px";
qMainDiv.style.height="660px";
qMainDiv.style.position="absolute";


var qLinesText = document.createElement("div");
qLinesText.innerHTML = "Lines";
qLinesText.style.position="absolute";
qLinesText.style.top="10px";
qLinesText.style.left="125px";

var qLineDiv = document.createElement("div");
qLineDiv.style.backgroundColor="#f0f0dd";
qLineDiv.style.position="absolute";
qLineDiv.style.top="9px";
qLineDiv.style.left="9px";
qLineDiv.style.width="300px";
qLineDiv.style.height="200px";
qLineDiv.style.borderStyle="solid";
qLineDiv.style.borderWidth="1px";
qLineDiv.style.borderColor="#aaaaaa";

var qLineSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qLineSvg.style.width="300px";
qLineSvg.style.height="200px";

var qLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
qLine.setAttribute('x1', '20');
qLine.setAttribute('y1', '40');
qLine.setAttribute('x2', '260');
qLine.setAttribute('y2', '140');
qLine.setAttribute('stroke-width', '3');
qLine.setAttribute('stroke', 'rgb(255, 128, 128)');


var qRectsText = document.createElement("div");
qRectsText.innerHTML = "Rectangles";
qRectsText.style.position="absolute";
qRectsText.style.top="10px";
qRectsText.style.left="115px";

var qRectDiv = document.createElement("div");
qRectDiv.style.backgroundColor="#f0f0dd";
qRectDiv.style.position="absolute";
qRectDiv.style.top="9px";
qRectDiv.style.left="329px";
qRectDiv.style.width="300px";
qRectDiv.style.height="200px";
qRectDiv.style.borderStyle="solid";
qRectDiv.style.borderWidth="1px";
qRectDiv.style.borderColor="#aaaaaa";

var qRectSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qRectSvg.style.width="300px";
qRectSvg.style.height="200px";

var qRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
qRect.setAttribute('x', '50');
qRect.setAttribute('y', '40');
qRect.setAttribute('rx', '25');
qRect.setAttribute('ry', '25');
qRect.setAttribute('width', '200');
qRect.setAttribute('height', '120');
qRect.setAttribute('fill', '#ffdddd');
qRect.setAttribute('stroke-width', '3');
qRect.setAttribute('stroke', 'rgb(255, 128, 128)');


var qCirclesText = document.createElement("div");
qCirclesText.innerHTML = "Circles";
qCirclesText.style.position="absolute";
qCirclesText.style.top="10px";
qCirclesText.style.left="120px";

var qCircleDiv = document.createElement("div");
qCircleDiv.style.backgroundColor="#f0f0dd";
qCircleDiv.style.position="absolute";
qCircleDiv.style.top="229px";
qCircleDiv.style.left="9px";
qCircleDiv.style.width="300px";
qCircleDiv.style.height="200px";
qCircleDiv.style.borderStyle="solid";
qCircleDiv.style.borderWidth="1px";
qCircleDiv.style.borderColor="#aaaaaa";

var qCircleSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qCircleSvg.style.width="300px";
qCircleSvg.style.height="200px";

var qCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
qCircle.setAttribute('cx', '130');
qCircle.setAttribute('cy', '110');
qCircle.setAttribute('r', '70');
qCircle.setAttribute('fill', '#ffdddd');
qCircle.setAttribute('stroke-width', '3');
qCircle.setAttribute('stroke', 'rgb(255, 128, 128)');


var qEllipsesText = document.createElement("div");
qEllipsesText.innerHTML = "Ellipses";
qEllipsesText.style.position="absolute";
qEllipsesText.style.top="10px";
qEllipsesText.style.left="115px";

var qEllipseDiv = document.createElement("div");
qEllipseDiv.style.backgroundColor="#f0f0dd";
qEllipseDiv.style.position="absolute";
qEllipseDiv.style.top="229px";
qEllipseDiv.style.left="329px";
qEllipseDiv.style.width="300px";
qEllipseDiv.style.height="200px";
qEllipseDiv.style.borderStyle="solid";
qEllipseDiv.style.borderWidth="1px";
qEllipseDiv.style.borderColor="#aaaaaa";

var qEllipseSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qEllipseSvg.style.width="300px";
qEllipseSvg.style.height="200px";

var qEllipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
qEllipse.setAttribute('cx', '140');
qEllipse.setAttribute('cy', '110');
qEllipse.setAttribute('rx', '120');
qEllipse.setAttribute('ry', '70');
qEllipse.setAttribute('fill', '#ffdddd');
qEllipse.setAttribute('stroke-width', '3');
qEllipse.setAttribute('stroke', 'rgb(255, 128, 128)');


var qPolygonsText = document.createElement("div");
qPolygonsText.innerHTML = "Polygons";
qPolygonsText.style.position="absolute";
qPolygonsText.style.top="10px";
qPolygonsText.style.left="115px";

var qPolygonDiv = document.createElement("div");
qPolygonDiv.style.backgroundColor="#f0f0dd";
qPolygonDiv.style.position="absolute";
qPolygonDiv.style.top="449px";
qPolygonDiv.style.left="9px";
qPolygonDiv.style.width="300px";
qPolygonDiv.style.height="200px";
qPolygonDiv.style.borderStyle="solid";
qPolygonDiv.style.borderWidth="1px";
qPolygonDiv.style.borderColor="#aaaaaa";

var qPolygonSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qPolygonSvg.style.width="300px";
qPolygonSvg.style.height="200px";

// Polygon1 - evenodd
var cx = 90;
var cy = 100
var r = 70;
var cos18 = Math.cos(Math.PI/10); // cos(18) pi/2-2pi/5 = 5pi/10 - 4pi/10 = pi/10
var sin18 = Math.sin(Math.PI/10);
var cos612 = Math.cos(17*Math.PI/10); // cos(612) 4*2pi/5 + pi/10 = 16pi/10 + pi/10 = 17pi/10
var sin612 = Math.sin(17*Math.PI/10);
var dCoords1 = (r*cos18 + cx) + " " + (-r*sin18 + cy) + " " +
				(-r*cos18 + cx) + " " + (-r*sin18 + cy) + " " +
				(r*cos612 + cx) + " " + (-r*sin612 + cy) + " " +
				(cx) + " " + (-r + cy) + " " +
				(-r*cos612 + cx) + " " + (-r*sin612 + cy);
var qPolygon1 = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
qPolygon1.setAttribute('points', dCoords1);
qPolygon1.setAttribute('fill', '#ffdddd');
qPolygon1.setAttribute('fill-rule', 'evenodd');
qPolygon1.setAttribute('stroke-width', '3');
qPolygon1.setAttribute('stroke', 'rgb(255, 128, 128)');
// Polygon2 - nonzero
cx = 230;
cy = 100
r = 50;
var dCoords2 = (r*cos18 + cx) + " " + (-r*sin18 + cy) + " " +
				(-r*cos18 + cx) + " " + (-r*sin18 + cy) + " " +
				(r*cos612 + cx) + " " + (-r*sin612 + cy) + " " +
				(cx) + " " + (-r + cy) + " " +
				(-r*cos612 + cx) + " " + (-r*sin612 + cy);
var qPolygon2 = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
qPolygon2.setAttribute('points', dCoords2);
qPolygon2.setAttribute('fill', '#ffdddd');
qPolygon2.setAttribute('fill-rule', 'nonzero');
qPolygon2.setAttribute('stroke-width', '3');
qPolygon2.setAttribute('stroke', 'rgb(255, 128, 128)');


var qPolylinesText = document.createElement("div");
qPolylinesText.innerHTML = "Polylines";
qPolylinesText.style.position="absolute";
qPolylinesText.style.top="10px";
qPolylinesText.style.left="115px";

var qPolylineDiv = document.createElement("div");
qPolylineDiv.style.backgroundColor="#f0f0dd";
qPolylineDiv.style.position="absolute";
qPolylineDiv.style.top="449px";
qPolylineDiv.style.left="329px";
qPolylineDiv.style.width="300px";
qPolylineDiv.style.height="200px";
qPolylineDiv.style.borderStyle="solid";
qPolylineDiv.style.borderWidth="1px";
qPolylineDiv.style.borderColor="#aaaaaa";

var qPolylineSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qPolylineSvg.style.width="400px";
qPolylineSvg.style.height="300px";

var delta = 39;
var base = 170;
var h1 = 150;
var h2 = 100;
var h3 = 120;
var dCoords = (delta - 25) + " " + (base) + " " +
				(2*delta - 25) + " " + (base) + " " +
				(2*delta - 25) + " " + (base - h1) + " " +
				(3*delta - 25) + " " + (base - h1) + " " +
				(3*delta - 25) + " " + (base) + " " +
				(4*delta - 25) + " " + (base) + " " +
				(4*delta - 25) + " " + (base - h2) + " " +
				(5*delta - 25) + " " + (base - h2) + " " +
				(5*delta - 25) + " " + (base) + " " +
				(6*delta - 25) + " " + (base) + " " +
				(6*delta - 25) + " " + (base - h3) + " " +
				(7*delta - 25) + " " + (base - h3) + " " +
				(7*delta - 25) + " " + (base) + " " +
				(8*delta - 25) + " " + (base);
var qPolyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
qPolyline.setAttribute('points', dCoords);
qPolyline.setAttribute('fill', '#ffdddd');
qPolyline.setAttribute('fill-rule', 'evenodd');
qPolyline.setAttribute('stroke-width', '3');
qPolyline.setAttribute('stroke', 'rgb(255, 128, 128)');


qLineDiv.appendChild(qLinesText);
qLineSvg.appendChild(qLine);
qLineDiv.appendChild(qLineSvg);
qMainDiv.appendChild(qLineDiv);

qRectDiv.appendChild(qRectsText);
qRectSvg.appendChild(qRect);
qRectDiv.appendChild(qRectSvg);
qMainDiv.appendChild(qRectDiv);

qCircleDiv.appendChild(qCirclesText);
qCircleSvg.appendChild(qCircle);
qCircleDiv.appendChild(qCircleSvg);
qMainDiv.appendChild(qCircleDiv);

qEllipseDiv.appendChild(qEllipsesText);
qEllipseSvg.appendChild(qEllipse);
qEllipseDiv.appendChild(qEllipseSvg);
qMainDiv.appendChild(qEllipseDiv);

qPolygonDiv.appendChild(qPolygonsText);
qPolygonSvg.appendChild(qPolygon1);
qPolygonSvg.appendChild(qPolygon2);
qPolygonDiv.appendChild(qPolygonSvg);
qMainDiv.appendChild(qPolygonDiv);

qPolylineDiv.appendChild(qPolylinesText);
qPolylineSvg.appendChild(qPolyline);
qPolylineDiv.appendChild(qPolylineSvg);
qMainDiv.appendChild(qPolylineDiv);

qBody.appendChild(qMainDiv);

Core JavaScript

SVG - Various Examples

SvgVariety.html

SvgVariety.js

Output