9-slice scaling

From HandWiki
Short description: 2D image resizing technique
Top: Traditional scaling, corners are distorted. Bottom: 9-slice scaling, corners aren't distorted.

9-slice scaling (also known as Scale 9 grid, 9-slicing or 9-patch) is a 2D image resizing technique to proportionally scale an image by splitting it in a grid of nine parts.[1]

The key idea is to prevent image scaling distortion by protecting the pixels defined in 4 parts (corners) of the image and scaling or repeating the pixels in the other 5 parts.

A variation of the concept, the 3-slice scaling, consists in a grid of 3 parts in which only the pixels in 2 parts (the edges) are protected and the pixels on the middle part are repeated.

History and use

The concept was first introduced in a consumer application by Macromedia in Flash 8 (2005).[2] and it was available as feature to scale symbols. Later on, in 2007 Adobe introduced it as a feature in Adobe Fireworks CS3,[3] Adobe Illustrator, and Adobe Flash.[4] Today it is also present as a feature of game development software like Unreal engine, Urho3D, and Unity 3D.[5]

The technique can be used to manipulate both bitmap/raster graphics and vector graphics. A current implementation of the 9-slice technique is present on the CSS 3 Backgrounds and Borders spec[6] by using the border-image property.