Leo He

Resize image

Compress an image by using the Canvas. in my case the original image is dataurl, you also can use other type image source, like image object or blob object.

// compress given data url and return a new compressed dataUrl 
function compress(dataUrl, scale, callback) {
	var s = parseFloat(scale);
	// check scale, make sure it is in 0-1;
	if (isNaN(s) || s < 0 || s >= 1) {
		callback(dataUrl)
	}
	
	// using canvas compress image
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');

	img.onload = function () {
		// calculate target width and height
		var targetWidth = img.width * s;
		var targetHeight = img.height * s;
		// set canvas width and height
		canvas.width = targetWidth;
		canvas.height = targetHeight;
		// clear canvas
		context.clearRect(0, 0, targetWidth, targetHeight);
		// draw image
		context.drawImage(img, 0, 0, targetWidth, targetHeight);
		// convert canvas to dataurl
		callback(canvas.toDataURL());
	}

	img.src = dataUrl;
}

Resize SVG

it is very easy to resize the svg, just change the size of viewport.
original svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="441pt" height="358pt" viewBox="0 0 441 358" version="1.1">
<g id="surface6">
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.875117 1.494473 L -0.00832031 2.004199 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.875 1.686973 L 0.15832 2.100449 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.730313 3.009434 L 1.730313 1.998887 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.563633 2.913418 L 1.563633 2.09502 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.0000000000745058 1.989746 L 0.0000000000745058 3.014004 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.738633 2.00373 L 0.858438 1.494473 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M -0.00839844 2.999551 L 0.877305 3.504082 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.158242 2.902676 L 0.876563 3.311855 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.860703 3.50416 L 1.738594 2.99502 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 1.721953 2.00373 L 2.604883 1.494512 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.596172 0.488965 L 2.596563 1.499316 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.762891 0.585215 L 2.763203 1.402988 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.335781 0.504668 L 3.451953 -0.00478516 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.169375 0.601113 L 3.451992 0.187598 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.588242 1.494512 L 3.475586 2.006035 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.468594 -0.00478516 L 2.587852 0.503418 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.458828 2.006074 L 4.33832 1.490723 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 3.458164 1.81334 L 4.171406 1.395371 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
<path style="fill:none;stroke-width:0.0333333;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 4.330078 1.505137 L 4.327422 0.490293 " transform="matrix(100,0,0,100,3.996094,4.033203)"/>
</g>
</svg>

You can see, the image is very big, now we change the size of viewport to 100 and 100

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100pt" height="100pt" viewBox="0 0 441 358" version="1.1">
...
</svg>

Later I will use javascript code to modify the size of viewport.

javascript

Compress image using HTML5 canvas in JavaScript and resize SVG image

Resize image

Resize SVG