← Overview

scaleSVG

Sizes an inline SVG from its viewBox × a data-scale factor.

Three copies of the same 16×16 graphic, sized purely by their data-scale factor — the width/height attributes are computed from the viewBox, no pixel value appears in the markup. The fade-in is demo CSS reacting to the is-scaled state class the module sets.

data-scale (= 1)
data-scale="2.5"
data-scale="5"

Fractional factors shrink. A large 48×48 drawing brought down to a quarter of its natural size — the factor works in both directions.

48×48 × 0.25 → 12×12
48×48 × 1 (natural)

Chained with inlineSVG. The <img> below carries data-js-behavior="inlineSVG,scaleSVG": the file is fetched and inlined first, then scaleSVG sizes the resulting <svg> from its 24×24 viewBox × 3. Its accessible name ("Close") comes from the image's alt via inlineSVG — scaleSVG itself never touches ARIA.

Close
24×24 icon file × 3