SVG with size in px and percentage?

I'm trying to create an SVG element with a width defined by a percentage of the parent and a fixed value, say 50% + 20px. For normal html elements, in the CSS you can use calc(50% + 20px). Is there an equivalent way to do this for embedded SVGs? Specifically, I'm using snap.svg, though I'm not sure if this capability exists with SVGs in general.

EDIT:

Tried setting <svg> width with percentages and px, which I couldn't get to work. I tried both:

<svg width='calc(50% + 20px)'>...</svg>

<svg width='50% + 20px'>...</svg>

I also tried setting it in CSS:

svg {
  width: calc(50% + 20px);
}