Scripting SVG View Box

Purpose here is to simply show on-screen SVG construction directly from conventional (x,y) coordinate measurements, like from a digitizing drawing-board used in design office with paper drawings.
In diagram, in frame of reference (black), to construct SVG triangle:
(X1,Y1) = (60,30)
(X2,Y2) = (120,50)
(X3,Y3) = (90,90)
And, in frame of reference (red) of View Box (bounding rectangle):
(x1,y1) = (0,60)
(x2,y2) = (60,40)
(x3,y3) = (30,0)
Then, in frame of reference (black), View Box size:
Xmin = 60; Xmax = 120
Ymin = 30; Ymax = 90


This JavaScript has scrcoords set false. The script has two tasks:
• Adjust all SVG 'y' coordinates to screen coordinates according to y = Ymax - y (y increases top to bottom)
• Calculate min-x, min-y, width and height of viewBox according to the SVG (x,y) coordinates.
The SVG viewBox with min-x and min-y (commonly) set to zero means that the origin of SVG screen coordinates is at origin (top left corner) of viewBox. With min-x and/or min-y given values, viewBox adjusts by subtracting from SVG (x,y) screen coordinates to give SVG graphic and viewBox common origin. In this case the script sets min-x to Xmin but sets min-y to zero because of the adjustment of SVG 'y' coordinates (figure it).

Scripting SVG Editor Source

This JavaScript has scrcoords set true - for the screen coordinates of SVG Editor. Drawing is constructed and SVG statements, generated by the SVG Editor, are listed as shown.

Purpose of scripting viewBox

Engineering drawing - SVG source;
drg.svg - Download zip file.

This is to show construction of SVG viewBox for SVG drawing to be scaled and centered in view port of chosen width and height. Simply the drawing bounding rectangle (using SVG <rect>, shown in red) is put in place, then the x, y, width and height attributes of the rectangle are used for the viewBox and the rectangle removed. In Source Editor the inner SVG viewBox (with attributes taken from the bounding rectangle) does contain the SVG written by the graphics editor (Inkscape). The SVG is written as continuous path statements yet the viewBox does the job of scaling and centering the drawing within the width and height of the outer SVG.
If proportions of SVG drawing are to respond to user inputs then JavaScript would be written to work with the drawing constructed (in SVG editor) using SVG Shapes. Scripting of all shapes comprising the drawing (using document.getElementsByTagName) would determine max/min (x, y) coordinates so as to set min-x, min-y, width and height of the viewBox.