How Many Icons?

HTML, SVG, JavaScript, and Geometry


icons across, icons down. Icon size is pixels.

Objective: Given a screen size, icon size, and spacing between icons, how to determine how many icons we can fit on the screen, and where?

Problems: How can we make a realistic looking iPad screen? What is the equation for the calcuations?

Solutions: Create a fixed-size SVG image of the right proportions. Create a bezel with HTML padding.

n × icon size + (n+1) × spacing = total size or, solving for number of icons: total size - spacing n = ------------------------ size + spacing or, solving for icon size: total size - (n+1) × spacing icon size = ------------------------------- n

Compute vertical and horizontal independently, then use the smaller size.