title: Possible to build an svg that has fluid horizontal scaling, similar to old table-slice method?
body: <p>I am attempting to build an svg that can be scaled horizontally and fluidly, similar to the old table-sliced images used to scale a header fluidly across the top of a page. Typically this requires the end component(s) not to stretch while the center component does stretch (or repeat). I have included an example image below. I have experimented with nested svg tags combined with viewBox and preserveAspectRatio in a variety of configurations but can't quite get it to work.</p>
  
  <p><img src="https://i.stack.imgur.com/VACGG.png" alt="Fuild Horizontal Scaling Diagram"></p>
  
  <p>Here is a working example of what I need to do, in pure html/css: <a href="http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview" rel="noreferrer">http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview</a></p>
  
  <p>Is it even possible to do this with a single self-contained svg, or am I wasting my time?</p>