SVG image placeholder with correct dimensions and background color

placeholder.svg.js

const prefix = "data:image/svg+xml,";

export default props =>
  prefix +
  encodeURI(`
<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 ${props.width} ${props.height}'>
    <rect
      height='100%'
      style='fill:${props.fill}'
      width='100%'
      x='0'
      y='0'
    />
</svg>`);