Adobe Illustrator: Scale Dimensions

◄Page 9►

Scale Dimensions

See the difference between scaled PNG versus SVG images. Tap to increase and decrease the width of both an SVG image and a PNG image. Notice at full size the PNG image appears blurry compared to the SVG image.

See JavaScript function toggleSize(). Function toggleSize() increases and decreases the width of two HTML elements.

Tap to Toggle Dimensions: SVG Image

Tap to Toggle Dimensions: PNG Image

JavaScript function toggleSize()

The following JavaScript simply scales the width of two HTML elements up or down. Code scales up to one hundred percent width and down to fifty percent width.

function toggleSize(id1, id2){

let im1 = document.getElementById(id1);
let im2 = document.getElementById(id2);

if(im1.style.width == "100%" || im1.style.width==""){

im1.style.width = "50%";
im2.style.width = "50%";

}

else{

im1.style.width = "100%";
im2.style.width = "100%";
	
}

}

Summary

See the difference between scaled PNG versus SVG images. Tap to increase and decrease the width of both an SVG image and a PNG image. Notice at full size the PNG image appears blurry compared to the SVG image.

See the function toggleSize() in JavaScript code above, or the JavaScript file lib-svg.js. Function toggleSize() increases and decreases the width of two HTML elements.

SVG Illustration

Create a range of Scaleable Vector Graphics (SVG) with Adobe Illustrator, HTML or plain text files. The SVG format proves ideal for lightweight, clean, crisp images that never lose their luster.

SVG images export as text files allowing designers and artists to modify properties, within the file, such as fill, background color, gradients and scaling.

Apply JavaScript and CSS3 to modify properties interactively or automatically. Animate, or respond to user interaction, to change a range of properties including color, opacity, location, scale, gradation and more.

Tags