HOUSE ICON AS A CSS MASK

Files for "Use a Custom SVG Icon as a CSS Mask" on svgai.org.
Made in October 2026.

FILES
house-original.svg: The house icon generated with SVG AI on September 16,
2026 (Classic, one SVG), unchanged. To confirm it matches the published
download, its SHA-256 is
8b6908a60415576dcd1bb6b5d0ebd40e4c4b2f839bbbee42389cc592258e201a.
It paints white details on top of navy shapes (two navy and seven white
paths), so as a CSS mask it gives a solid house.
house-mask.svg: The same nine paths (path data unchanged), drawn in their
original order inside an SVG <mask>: the navy ones filled white (keep), the
white ones filled black (cut). A navy rectangle is painted through it, so the
white areas are now transparent holes. The root
element drops preserveAspectRatio="none", the version attribute and the
inline style, and the file gains a <title>. Prepared by an AI coding agent.
parcel-ai-flat.svg: A parcel icon from an SVG AI edit made on September 14,
2026 (Classic), unchanged. It is one path whose details are already
transparent, so it works as a mask without preparation.
icon-mask.css: The mask rules, including the forced-colors and print rules.
index.html: The example page. It compares the image and the mask, and shows
colors, sizes, a navigation bar, a button and an icon-only link.
check-results.json: The browser check results (Chrome 155.0.8059.80,
Edge 155.0.4283.62).

USE
Serve the folder over http, for example:  python -m http.server
then open http://localhost:8000/ . Opened straight from disk (file://),
browsers block the mask files and every masked icon disappears.
Keep the SVG files on the same site as the page, or send an
Access-Control-Allow-Origin header with them. A mask that fails to load
hides the element, so keep a visible label or an aria-label on the control.

TESTED
Chrome and Edge on Windows only: sizes 16-48 px at 1x and 2x, hover, a
375 px wide layout, the size defaults, 404, cross-origin and file:// cases,
forced-colors emulation, keyboard focus, computed accessible names (not a
screen reader) and printing to PDF.
Not tested: Safari, Firefox, real Windows contrast themes, screen readers,
physical printers, real phones.
