example vignette

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg98" width="57px" height="274px" version="1.1" viewBox="0 0 60 274">
 <title id="title2">GDE Copy 8</title>
 <desc id="desc4">Created with Sketch.</desc>
 <defs id="defs56">
  <rect id="path-1" x="1" width="57" height="125.49"/>
  <filter id="filter-2" x="-9.6%" y="-2.8%" width="122.8%" height="111.2%">
   <feMorphology id="feMorphology7" in="SourceAlpha" operator="dilate" radius="0.5" result="shadowSpreadOuter1"/>
   <feOffset id="feOffset9" dx="1" dy="4" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
   <feGaussianBlur id="feGaussianBlur11" in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
   <feColorMatrix id="feColorMatrix13" in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
  </filter>
  <linearGradient id="linearGradient-3" x1="25.622" x2="25.622" y1="140.35" y2="145.07" gradientTransform="matrix(1.1513 0 0 .86855 -1 29)" gradientUnits="userSpaceOnUse">
   <stop id="stop16" stop-color="#E8E8E8" offset="0"/>
   <stop id="stop18" stop-color="#ACACAC" offset="1"/>
  </linearGradient>
  <rect id="path-4" y="137.44" width="59" height="107.56"/>
  <linearGradient id="linearGradient-5" x1="17.439" x2="17.439" y1="74.129" y2="107.82" gradientTransform="matrix(1.6916 0 0 .59115 -1 29)" gradientUnits="userSpaceOnUse">
   <stop id="stop22" stop-color="#FDFDFD" offset="0"/>
   <stop id="stop24" stop-color="#E9E6E6" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient-6" x1="11.698" x2="11.698" y2="15.231" gradientTransform="matrix(2.5217 0 0 .39655 -1 29)" gradientUnits="userSpaceOnUse">
   <stop id="stop27" stop-color="#E1E8FF" offset="0"/>
   <stop id="stop29" stop-color="#00AAE1" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient-7" x1="17.439" x2="17.439" y1="106.14" y2="139.83" gradientTransform="scale(1.6916 .59115)" gradientUnits="userSpaceOnUse">
   <stop id="stop32" stop-color="#ADADB1" offset="0"/>
   <stop id="stop34" stop-color="#ADADB1" offset=".60031"/>
   <stop id="stop36" stop-color="#DADAE0" offset=".80632"/>
   <stop id="stop38" stop-color="#929296" offset="1"/>
  </linearGradient>
  <rect id="path-8" x="1" y="62.744" width="57" height="19.919"/>
  <filter id="filter-9" x="-8.8%" y="-20.1%" width="117.5%" height="150.2%">
   <feOffset id="feOffset42" dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
   <feGaussianBlur id="feGaussianBlur44" in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
   <feColorMatrix id="feColorMatrix46" in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
  </filter>
  <rect id="path-10" width="44" height="36" rx="2"/>
  <polyline id="path-13" points="0.5,155 0.5,115.5 57,115.5"/>
 </defs>
 <g id="g5478">
  <g id="g45" fill-rule="evenodd">
   <g id="Rectangle-3" transform="translate(-1,29)">
    <use id="use58" width="100%" height="100%" fill="#000000" filter="url(#filter-2)" xlink:href="#path-1"/>
    <use id="use60" width="100%" height="100%" fill="#eeeeee" fill-rule="evenodd" xlink:href="#path-1"/>
   </g>

   <rect id="rect69" y="72.821" width="57" height="19.919" fill="url(#linearGradient-5)"/>
   <rect id="rect71" y="29" width="57" height="8.9634" fill="url(#linearGradient-6)"/>
   <rect id="Rectangle-3-Copy-2" y="112" width="57" height="43" fill="url(#linearGradient-3)"/>
   <g id="g77" transform="translate(-1,29)">
    <use id="use73" width="100%" height="100%" fill="#000000" filter="url(#filter-9)" xlink:href="#path-8"/>
    <use id="use75" width="100%" height="100%" fill="url(#linearGradient-7)" fill-rule="evenodd" xlink:href="#path-8"/>
   </g>
  </g>
  <rect id="rect79" y="112" width="57" height="43" fill="none"/>
  <g id="g57" fill-rule="evenodd">



   <use id="use64-5" transform="matrix(-.022274 0 0 1.0783 57.019 -114.31)" width="100%" height="100%" fill="#adadb1" stroke="#adadb1" stroke-width="9.5321" style="paint-order:normal" xlink:href="#path-4"/>
  </g>
  <use id="use94" transform="matrix(.97644 0 0 1.0002 -.0014574 -.030063)" width="100%" height="100%" fill="none" stroke="#ffffff" stroke-width="1.5" style="mix-blend-mode:lighten" xlink:href="#path-13"/>
  <text id="textcaliber" x="7.4560299" y="-237.88921" fill="#484848" fill-rule="evenodd" font-family="HelveticaNeue, 'Helvetica Neue'" font-size="14px" font-weight="bold" letter-spacing="-.23917" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">
   <tspan id="caliber" x="14.883123" y="22.110796" font-family="HelveticaNeue, 'Helvetica Neue'" font-size="14px" font-weight="bold" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"></tspan>
  </text>
  <text id="textmarking" x="19.579027" y="-124.78306" fill="#484848" fill-rule="evenodd" font-family="HelveticaNeue, 'Helvetica Neue'" font-size="16px" font-weight="bold" letter-spacing="-.23917" text-align="center" text-anchor="middle" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">
   <tspan id="marking" x="27.006121" y="135.21693" font-family="HelveticaNeue, 'Helvetica Neue'" font-size="14px" font-weight="bold" text-align="center" text-anchor="middle" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"></tspan>
  </text>
 </g>
 <g id="labelTemplate" transform="translate(0,165)">

 </g>
</svg>