demo · v131

External SVG resources for clip-path, fill, stroke, marker

Until Chrome 131 you had to inline the SVG <defs> for clip-paths, gradients and markers on every page. Now clip-path: url("/shapes.svg#star") works cross-document. The stage below points the same property at a data-URL SVG so the demo runs offline.



  


  

    
the css


.target {
  /* Pre-131 - only worked if the <clipPath> was in the same document. */
  clip-path: url("/shapes.svg#star");
}

  


  

    
see also