Responsive typographic elements.

HTML

<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.699994 200" width="73px" height="200px" enable-background="new 0 0 286.7 200"><path d="m73.7 200c-45.2 0-73.7-26.3-73.7-77.4v-122.6h36.7v123.2c0 28.5 12.4 42.9 37 42.9v33.9" fill="#808080"/></svg>
<div class="svg"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.699994 200" width="73px" height="200px" enable-background="new 0 0 286.7 200"><path d="m213 166.1c24.6 0 37-14.4 37-42.9v-123.2h36.7v122.6c0 51.1-28.5 77.4-73.7 77.4v-33.9" fill="#ff0" transform="translate(-213)"/></svg>
</div>

CSS

.wrapper {
  height: 200px;
  left: 10%;
  top: 10%;
  position:relative;
}
svg,div.svg {
  float: left;
  height: 200px;
}
div.svg {
  float:left;
  /*converted here http://www.mobilefish.com/services/base64/base64.php*/
  background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3My42OTk5OTQgMjAwIiB3aWR0aD0iNzNweCIgaGVpZ2h0PSIyMDBweCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjg2LjcgMjAwIj48cGF0aCBkPSJtMCAxNjYuOThoNzMuN3YzMy4wMmgtNzMuNyIgZmlsbD0iIzAwNjRmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) 0 0 repeat-x;
  width:50%;
}