How to resize SVG clip-path?

Question

I am using an SVG as a mask for an image and I'm trying to resize it. I tried indicating the width & height (to 100) but it still doesn't scale. Just remains 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>

Solution

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

Second, as commented by @Paulie_D 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>

Output :

Comments

[catandmouse]

Yes this works! However, what if I want to put the <image> tag outside the clip-path <svg> as in my codepen example? Is that possible?