Web Icon Performance & Rendering Glossary
A reference dictionary of 30+ technical terms covering browser rasterization, SVG rendering engines, Core Web Vitals, and vector optimization.
A CSS keyword that refers to the computed value of the element's color property. In SVGs, setting fill="currentColor" or stroke="currentColor" allows vector icons to seamlessly inherit typography colors and hover states without JavaScript re-rendering.
An SVG attribute defining the internal user coordinate system (min-x, min-y, width, height) of the vector viewport. Enables infinite, loss-free mathematical scaling regardless of the outer container's physical pixel width or height.
A CSS and SVG attribute value that locks the stroke width of vector paths to a fixed physical pixel thickness, preventing lines from becoming excessively thick when the icon is scaled up or invisible when scaled down.
A Google user-experience metric measuring visual stability. Inline SVGs or icon fonts that lack explicit width, height, or aspect-ratio dimensions cause layout shifts during render, penalizing search engine performance scores.
The process by modern bundlers (Vite, Webpack, Rollup) of eliminating unused module exports. High-quality icon libraries structure exports as ES Modules (ESM) to ensure only imported icons are included in the final production JavaScript bundle.
SVG container elements used to create reusable vector spritemaps. <symbol> defines an icon with its own viewBox without rendering it, while <use href="#id"> instantiates references anywhere in the DOM with near-zero memory footprint.
The hardware-accelerated process where the browser's graphics rendering engine (Blink/Skia, Gecko/WebRender) converts mathematical Bézier curves into discrete display pixels using the device's graphics card rather than the CPU.
A Node.js-based tool for optimizing SVG files. Strips editor metadata (Inkscape/Illustrator tags), removes redundant whitespace, collapses nested groups, and rounds floating-point coordinates to reduce file weights by 40%–80%.
Aligning vector control points to whole integer pixel coordinates (e.g. 1.0 instead of 1.34). Prevents blurry edge rendering caused by the browser interpolating path boundaries across fractional physical display pixels.
Flash of Unstyled Content or Flash of Invisible Text occurring when icon fonts (like Font Awesome TTF/WOFF2) load asynchronously over high-latency networks, causing icons to display as blank boxes or random Unicode glyphs prior to font download.
An accessibility attribute added to decorative SVGs to hide raw vector nodes from assistive screen readers, preventing confusing announcements of SVG coordinates or redundant visual indicators.
An SVG attribute that controls how a vector element scales within non-uniform container dimensions. Setting xMidYMid meet centers and scales proportionally without distortion or clipping.