Javascript-форум - Масштабирование SVG

Написал код для изменения размера элемента. При нажатии на значок системы, снизу появляется треугольничек, за который если потянуть, то можно изменять размер изображения. Есть две большие проблемы.
1) В качестве изображения сейчас стоит png с огромным объемом. Хочу сделать svg. Но если его масштабировать таким образом, то он масштабируется пропорционально. Зато сами края изображения увеличиваются в любую сторону. Треугольник у меня привязан к правому нижнему краю изображения, следовательно он уплывает, когда трансформация идет непропорциональная.
2) Если после первого трансформирования тыкнуть в любое место окна, то изображение растянется до этого места. Никак не могу исправить проблему.

<html>
<head>
<style>
body {
margin: 0;
}
#draw {
position: absolute;
	background-color: transparent;
	z-index: 0;
}
table {
position: absolute;
right: 15%;
}
#grid {
position: absolute;
	background-color: transparent;
	z-index: 1;
}
</style>
<canvas id='draw' width='600' height='400' style='border:1px solid'></canvas>
<canvas id='grid' width='600' height='400' style='border:1px solid'></canvas>
<script type='text/javascript'>
window.onload = function(e){

	var canvas=document.getElementById("draw");
	var can=canvas.getContext("2d");
	var grid = document.getElementById("grid");
	var canGr = grid.getContext("2d");
	var icoSystem=document.createElement("img"); 
	var sizeTr=document.createElement("img");	
	var testBool = false;
	var sizeTrCreate = false;
	var sizeTrBool = false;
	

	
	var actionList = {
icoSystem: function(){
			icoSystem.setAttribute("src","icoSystem.png");
			icoSystem.style.height = 220 + 'px';
			document.body.appendChild(icoSystem);
			icoSystem.style.position = "absolute";
			icoSystem.style.zIndex = 2;		
		},
	};
	
	icoSystem.onmouseover = function(){
		icoSystem.style.cursor = "move";
		
	}
	sizeTr.onmousedown = function(event){
		sizeTrBool = true;
		width = icoSystem.offsetWidth;
		height = icoSystem.offsetHeight;
		xDown = event.pageX;
		yDown = event.pageY;
		offsetXSizeTr = xDown - sizeTr.x;
		offsetYSizeTr = yDown - sizeTr.y;
	}
	icoSystem.onmousedown = function(){
		if(sizeTrCreate == false){
			sizeTr.setAttribute("src","sizeTr.svg");
			sizeTr.style.position = "absolute";
			sizeTr.style.zIndex = parseInt(icoSystem.style.zIndex,10)+1;				
			sizeTr.style.left = icoSystem.x + icoSystem.width - 20;
			sizeTr.style.top = icoSystem.y + icoSystem.height - 20;	
			sizeTr.style.width = 20 + 'px';
			document.body.appendChild(sizeTr);
			sizeTrCreate = true;
		}
	}
	//offsetX = event.pageX - icoSystem.x;
	//offsetY = event.pageY - icoSystem.y;

	sizeTr.onmouseover = function(){
		sizeTr.style.cursor = "NW-resize";
	}
	
	
	document.onmousemove = function(event){
		xMove = event.pageX;
		yMove = event.pageY;
		
		if(sizeTrBool == true){
			icoSystem.style.width = width + xMove - xDown;
			icoSystem.style.height = height + yMove - yDown;
			sizeTr.style.left = xMove - offsetXSizeTr + 'px';
			sizeTr.style.top = yMove - offsetYSizeTr + 'px';
		}
	}
	document.onmouseup = function(event){
		xUp = event.pageX;
		yUp = event.pageY;
		sizeTrBool = false;
		icoSystem.style.width = width + xUp - xDown;
		icoSystem.style.height = height + yUp - yDown;
		sizeTr.style.left = xUp - offsetXSizeTr + 'px';
		sizeTr.style.top = yUp - offsetYSizeTr + 'px';
	}
	
	sizeTr.ondragstart = function(){return false;}
	icoSystem.ondragstart = function(){return false;}
	
	
	document.onclick = function(event){
		if(event.target.tagName == 'BUTTON'){
			actionList[event.target.getAttribute('id')]();	
		}		
	}


	
}
</script>
<title>
</title>
</head>
<body>
<br>
<table border="0">
<tr>
<td><button id="icoSystem">Система</button></td>
</tr>
</table>
</table>
</body>
</html>