demo · v131

shared clip-path library across pages

A single SVG file (shapes.svg) defines six named clip paths. Every card on this page references them via clip-path: url(./shapes.svg#blob). Before v131, Chrome required the SVG to live in the current document. Now, libraries can ship one cacheable file used by many pages.

blob

hex

arrow

flag

burst

cache benefit

Because the shapes file is referenced by URL, the browser caches it once per origin. Many pages can use the same library without each one inlining its own SVG. This is the same benefit web fonts gave the type industry.

the api

/* shapes.svg ships once, every page references */
.card-hero { clip-path: url(/assets/shapes.svg#blob); }
.tag-row li { clip-path: url(/assets/shapes.svg#tag); }
.heading-arrow { clip-path: url(/assets/shapes.svg#arrow); }

scenario focus

Select a scenario to focus its rendered example and summary.