How to resize an SVG clip?

Question

I use SVG as a mask for an image, and I'm trying to resize it. I tried to specify the width and height (up to 100), but it still does not scale. It just stays the same size.

Codepen Demo

This is the SVG code:

<svg height="100" width="100"> <defs> <clipPath id="svgPath"> <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" /> <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" /> <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" /> <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" /> </clipPath> </defs> </svg> 

Answer 1

Firts, when you set the width and height attributes to 100, this makes svg 100px tall and wide. If you want svg to be full width, you need to give 100% width.

Secondly, as @Paulie_D comments, you need to give a value to the viewbox attribute to provide a scale and coordinate system for the elements in your svg. Here is an example with viewbox="0 0 500 500" and width="30%" :

 <svg viewbox="0 0 500 500" width="30%" > <defs> <clipPath id="svgPath"> <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" /> <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" /> <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" /> <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" /> </clipPath> </defs> <image xlink:href="http://i.stack.imgur.com/3DR2G.jpg" x="0" y="0" height="500" width="500" style="clip-path: url(#svgPath);"/> </svg> 

Exit: