<!DOCTYPE HTML>
<HTML xmlns="http://www.w3.org/1999/xhtml" >
<HEAD>
<TITLE>Show Svg</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<STYLE>
#viewbox {
border: 2px solid black;
}
</STYLE>
</HEAD>
<BODY>
<SVG id="viewbox" height="400px" width="400px" viewBox="-20 -20 40 40"
xmlns="http://www.w3.org/2000/svg"
>
<g id="pic">
<line x="20px" y="0px" x2="-20px" y2="0px"
style="stroke-width:1;stroke:rgb(0,0,0);"
/>
<line x="0" y="40" x2="0" y2="-20"
style="stroke-width:1;stroke:rgb(0,0,0);"
/>
<rect x="-10" y="-10" width="20" height="20"
style="stroke-width:1;stroke:rgb(255,0,0)"
/>
</g>
</SVG>
</BODY>
</HTML>
The debugger shows the lines terminating at x = 0 and the pic viewbox as 30px x 30px which truncates the lines to edges of the red box.
So what is happening here?
Lines go from x1, y1 to x2, y2 not from x, y to x2, y2. If you correct the attributes it should work.
Note that if you're really writing xhtml (as your namespace suggests) then that is a case sensitive language and all those uppercase tags need to be lowercase.