Between the Lines
Octave, 233 225 216 213 bytes
o=@ones;l=z=o(5,1);for k=input('')-47;l=[l,reshape(dec2bin([448,22558,8514,10560,3936,2376,328,15840,320,2368](k),15),5,[])-48,z];end;L=~o(size(l)+2);L(2:6,2:end-1)=l;O=o(3);O(5)=-8;M=~conv2(kron(L,o(25)),O);imshow(M)
Here the first test case (from a resized screen capture, s.t. it fits my monitor=):
o=@ones;
l=z=o(5,1); %spacer matrices
for k=input('')-47; %go throu all input digis
%decode the matrices for each digit from decimal
l=[l,reshape(dec2bin([448,22558,8514,10560,3936,2376,328,15840,320,2368](k),15),5,[])-48,z];
end
L=~o(size(l)+2); %pad the image
L(2:6,2:end-1)=l;
O=o(3);O(5)=-8; %create edge detection filter
imshow(~conv2(kron(L,o(25)),O)) %image resizing /edge detection (change 25 to any cell size you like)
The input can be arbitrary length, like e.g. '07299361548'
Convolution is the key to success.
Html+JavaScript ES6, 352
Test running the snippet below
<canvas id=C></canvas><script>s=prompt(),C.width=-~s.length*80,c=C.getContext("2d"),[...s].map(d=>[30,d*=3,++d,++d].map(w=a=>{for(a=parseInt("vhvivgtlnllv74vnltvlt11vvlvnlv0"[a],36)*2+1,p=1,y=100,i=64;i>>=1;p=b,y-=20)c.moveTo(x+20,y),b=a&i?1:0,c[b-p?'lineTo':'moveTo'](x,y),(a^q)&i&&c.lineTo(x,y-20);q=a,x+=20}),q=63,x=0),w(30),w(0),c.stroke()</script>
Less golfed
s=prompt(),C.width=-~s.length*80,c=C.getContext("2d"),
w=a=>{
a=parseInt("vhvivgtlnllv74vnltvlt11vvlvnlv0"[i],36)*2+1
for(p=1,y=100,i=32;i;p=b,y-=20,i>>=1)
c.moveTo(x+20,y),
b=a&i?1:0,
c[b-p?'lineTo':'moveTo'](x,y),
(a^q)&i&&c.lineTo(x,y-20)
q=a
x+=20
},
[...s].map(d=>[30,d*=3,++d,++d].map(w),q=63,x=0),
w(30),w(0)
c.stroke()
Javascript ES6, 506 bytes
a=>{with(document)with(body.appendChild(createElement`canvas`))with(getContext`2d`){width=height=(a.length+2)*80;scale(20,20);translate(1,1);lineWidth=0.1;beginPath();["oint",...a.map(i=>"05|7agd7|oint 067128a45|oicgmnt 01de25|oil9amnt 01de23fg45|oint 03fh5|68ec6|oint 03fg45|oij78knt 05|9agf9|oij78knt 01dh5|oint 05|78ed7|9agf9|oint 03fg45|78ed7|oint".split` `[i]),"05"].map(i=>{i.split`|`.map(i=>[...i].map((e,i,_,p=parseInt(e,36),l=~~(p/6),r=p%6)=>i?lineTo(l,r):moveTo(l,r)));translate(4,0)});stroke()}}
Ungolfed:
a=>{ // anonymous function declaration, accepts array of numbers
with(document) // bring document into scope
with(body.appendChild(createElement`canvas`)) // create canvas, drop into html body, bring into scope
with(getContext`2d`){ // bring graphics context into scope
width=height=(a.length+2)*80; // set width and height
scale(20,20); // scale everything to 20x
translate(1,1); // add padding so outline doesn't touch edge of canvas
lineWidth=0.1; // have to scale line width since we scaled 20x
beginPath(); // start drawing lines
["oint", // beginning "glyph", draws left end of negative space, see below
...a.map(i=>`05|7agd7|oint // glyphs 0-9 encoded as vertices
067128a45|oicgmnt // glyphs seperated by " "
01de25|oil9amnt // lines within each glyph seperated by "|"
01de23fg45|oint // a single vertex is stored as a base36 char
03fh5|68ec6|oint // where a number corresponds to one of the verts shown below:
03fg45|oij78knt // 0 6 12 18 24
05|9agf9|oij78knt // 1 7 13 19 25
01dh5|oint // 2 8 14 20 26
05|78ed7|9agf9|oint // 3 9 15 21 27
03fg45|78ed7|oint` // 4 10 16 22 28
.split` `[i]), // 5 11 17 23 29
"05"] // end "glyph", draws right end of negative space, see above
.map(i=>{ // for each glyph string
i.split`|` // seperate into list of line strings
.map(i=>[...i] // convert each line string into list of chars
.map((e,i,_,p=parseInt(e,36), // convert base36 char to number
l=~~(p/6),r=p%6)=> // compute x y coords of vertex
i?lineTo(l,r):moveTo(l,r))); // draw segment
translate(4,0)}); // translate origin 4 units to right
stroke()}} // draw all lines to canvas
Assumes there's a <body>
to append the canvas to, tested in Firefox 46.
Example run (assigning anonymous function to f):
f([1,0,3])
yields: