SVG

◄Page 6►

Dynamic Scaling Up & Down

Icons Play Music, Shop, Check Items off List, Love It

Introduction

A set of SVG icons shrink and grow along both axes. Learn to animate image dimensions.

SVG elements tend to scale along both the X and Y axis with either JavaScript or CSS3 animations. CSS3 animations cause the most awkward side effects when attempting to scale along just one axis.

CSS scaling with transform:scale(x,y), transform:scaleX(x) and transform:scaleY(y) work much better with bitmap images than vector images. Therefore this example scales SVG with JavaScript for better control.

Tap to Start:Stop

<script 
async 
src="javascript/animSVG.js">
</script>

<img
id="imgSVG"
src='assets/icons.svg'
alt='Icons'
>

<div
id = "eGraphic"
>

<img
src='assets/icons.svg'
alt='Icons'
>

</div>

JavaScript

JavaScript processes each animation frame.

When the animation starts, measure the enclosing image's width. Calculate the size of image width and margin width changes per frame. Run the animation decreasing then increasing the size of the animation.

// N_TIME is the number of
// milliseconds between 
// frames during playback.
const N_TIME	= Number(100);

// Number of frames
// from zero to nine.
const N_COUNT = Number(9);

// Switch from scale 
// down to scale up.
const N_COUNT_HALF = Number(6);

// SVG image element.
var imgSvg    = null;

// HTML element for
// debugging, display
// any kind of output:
var eDebug    = null;

// HTML element 
// enclosing image.
var eGraphic  = null;

// Boolean scaling
// either down or up:
var bDown     = true;

// Animation timer.
var timer     = null;

// Starting width,
// height and margin:
var width     = null;
var height    = null;
var margin    = null;

// Amount to scale
// image per frame:
var divisions = null;
// Amount to scale
// margin per frame:
var margins   = null;
// Frame count:
var nCount = 0;

/**
 * When the Web page 
 * loads get HTML elements
 * and start the animation.
 */
function startExample(){
getElements();
start();
}
function getElements(){
	
imgSvg   = document.getElementById(
'imgSVG'
);

eDebug   = document.getElementById(
'eDebug'
);

eGraphic = document.getElementById(
'eGraphic'
);
}

/**
 * Respond to taps
 * over the graphic
 * element.
 */
function animStopStart(){
if(eDebug == null){
getElements();
}

if (timer == null){
start();
}

else{
stop();
}

}

/**
 * Stop the timer
 * and set it to null.
 * Reset the image width.
 */
function stop(){
let w = divisions * N_COUNT;
if (timer != null)
{
clearInterval(timer);
timer = null;
}

// Reset image 
// and margin widths.
imgSVG.width = w;
imgSVG.style.width = w.toString()+"px";
imgSVG.style.marginLeft = "0px";
}

/**
 * Start the timer,
 * if it's not already running.
 * Reset frame count, margin and 
 * boolean, bDown.
 * 
 * Obtain the current image width.
 * Determine one tenth of the image width.
 * Determine one twentieth of the image
 * width for margin adjustment.
 */
function start(){
if (timer != null) return;
nCount = 0;
margin = 0;
bDown = true;
width = eGraphic.clientWidth;
divisions = width/10;
margins = divisions/2;
eDebug.innerHTML = "Image Shrinks";
timer = setInterval
(
playAnim, 
N_TIME
);	
}


/**
 * Each animation frame
 * runs playAnim().
 * Increment the frame count.
 * Determine if we're 
 * increasing or decreasing width.
 * Increase or decrease width
 * and margins.
 * Assign the new width
 * and margins.
 */
function playAnim(){
nCount++;	
if(nCount == N_COUNT){
stop();
}
else if (nCount == N_COUNT_HALF){
bDown = false;
eDebug.innerHTML = "Image Grows";
}

if(bDown){
width -= divisions;
margin += margins;	
}
else{
width += divisions;
margin -= margins;
}

imgSVG.style.width = width.toString()+"px";
if(margin >= 0){
imgSVG.style.marginLeft = margin.toString()+"px";
}
}

Summary

A set of SVG icons shrink and grow along both axes. You learned to animate image dimensions.

SVG elements tend to scale along both the X and Y axis with either JavaScript or CSS3 animations. CSS3 animations cause the most awkward side effects when attempting to scale along just one axis.

CSS scaling with transform:scale(x,y), transform:scaleX(x) and transform:scaleY(y) work much better with bitmap images than vector images. Therefore this example scales SVG with JavaScript for better control.

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