Rich Internet Apps: Delphi-PHP-HTML5-CSS3-SVG-Javascript-Xajax-Learn More

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): (X2,Y2) = (120,50)

(X3,Y3) = (90,90)

(x1,y1) = (0,60)

(x2,y2) = (60,40)

(x3,y3) = (30,0)

Then, in frame of reference (black), View Box size:
(x2,y2) = (60,40)

(x3,y3) = (30,0)

X_{min} = 60; X_{max} = 120

Y_{min} = 30; Y_{max} = 90

Y

`scrcoords`

set false. The script has two tasks: • Adjust all SVG 'y' coordinates to screen coordinates according to

`y = Y`_{max} - 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 X

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.

Engineering drawing - SVG source;

drg.svg - Download zip file.

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.