The following creates an SVG display of 5 lines at a specific place on the screen.
<svg xmlns=""
 height="200" width="300" style="border:1px solid black">
  <line x1="0"  y1="10" x2="0"   y2="110" style="stroke-width:6; stroke:#ff0000;"/>
  <line x1="20" y1="20" x2="120" y2="50" style="stroke-width:6; stroke:#00ff00;"/>
  <line x1="30" y1="30" x2="140" y2="100" style="stroke-width:6; stroke:#0000ff;"/>
  <line x1="40" y1="40" x2="150" y2="150" style="stroke-width:6; stroke:#006600;"/>
  <line x1="75" y1="25" x2="200" y2="25" style="stroke-width:6; stroke:#006600;"/>
What I would like to know is: Is it possible to make the hard coded values of x1,y1, x2,y2
to be scaled to a world range?

For example, if I define the "world" view to be 1000 wide an 800 high,
and given the actual screen if 300 pixels wide by 200 pixels high,
I could calculate the world positions on the screen as:

var World = [1000,800];
var Actual = [300,200];
var x1 = 175;  
var y2 = 125;  
var x2 = 200;
var y2 = 225;
sx1 = x1 / World[0] * Actual[0];
sy1 = y1 / World[1] * Actual[1];
sx2 = x2 / World[0] * Actual[0];
sy2 = y2 / World[1] * Actual[1];
<!-- following line does not work -->
<line x1=sx1 y1=sy1 x2=sx2 y2=sy2 style="stroke-width:6; stroke:#006600;"/>
I want to use real world numbers like feet, yards, meters, etc
and scale them to the actual size of the graphics display
but I don't know how to NOT hard code into the SVG tags.

Is there a way to do this?