browsers.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width=data.layout.width height="20">
  <defs>
    <if(data.layout.style !== "flat-square")>
      <linearGradient id="smooth" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity="0.1"/>
        <stop offset="1" stop-opacity="0.1"/>
      </linearGradient>
    </if>
    <if(data.layout.style !== "flat-square")>
      <mask for(badge in data.layout.badges | status-var=loop) id="mask-${ loop.getIndex() }">
        <rect width=badge.width height="20" rx="3" fill="#fff"/>
      </mask>
    </if>
    <!-- Browser icons from Font Awesome by Dave Gandy -->
    <!-- http://fontawesome.io via http://icomoon.io -->
    <symbol id="android" viewBox="0 0 14 14">
      <path d="M12.25 5.25c-0.481 0-0.875 0.394-0.875 0.875v3.5c0 0.481 0.394 0.875 0.875 0.875s0.875-0.394 0.875-0.875v-3.5c0-0.481-0.394-0.875-0.875-0.875zM1.75 5.25c-0.481 0-0.875 0.394-0.875 0.875v3.5c0 0.481 0.394 0.875 0.875 0.875s0.875-0.394 0.875-0.875v-3.5c0-0.481-0.394-0.875-0.875-0.875zM3.063 10.063c0 0.725 0.588 1.313 1.313 1.313v0 1.75c0 0.481 0.394 0.875 0.875 0.875s0.875-0.394 0.875-0.875v-1.75h1.75v1.75c0 0.481 0.394 0.875 0.875 0.875s0.875-0.394 0.875-0.875v-1.75c0.725 0 1.313-0.588 1.313-1.313v-4.813h-7.875v4.813z"></path>
      <path d="M10.913 4.375c-0.133-1.202-0.807-2.239-1.772-2.866l0.438-0.876c0.108-0.216 0.020-0.479-0.196-0.587s-0.479-0.020-0.587 0.196l-0.439 0.879-0.114-0.045c-0.391-0.13-0.808-0.2-1.243-0.2s-0.852 0.071-1.243 0.2l-0.114 0.045-0.439-0.879c-0.108-0.216-0.371-0.304-0.587-0.196s-0.304 0.371-0.196 0.587l0.438 0.876c-0.965 0.627-1.639 1.665-1.772 2.866v0.438h7.851v-0.437h-0.024zM5.688 3.5c-0.242 0-0.438-0.196-0.438-0.438s0.195-0.437 0.437-0.437c0 0 0.001 0 0.001 0s0-0 0.001-0c0.241 0.001 0.436 0.196 0.436 0.437s-0.196 0.438-0.438 0.438zM8.313 3.5c-0.242 0-0.438-0.196-0.438-0.438s0.195-0.437 0.436-0.437c0 0 0 0 0.001 0s0.001-0 0.001-0c0.241 0.001 0.437 0.196 0.437 0.437s-0.196 0.438-0.438 0.438z"></path>
    </symbol>
    <symbol id="firefox" viewBox="0 0 14 14">
      <path d="M7.055 14q-2.211 0-3.941-1.176t-2.574-3.113q-0.453-1.023-0.523-2.352t0.203-2.598 0.867-2.438 1.398-1.895l-0.086 2.195q0.086-0.109 0.531-0.121t0.547 0.121q0.328-0.633 1.254-1.078t1.832-0.461q-0.422 0.352-0.934 1.16t-0.457 1.277q0.195 0.062 0.488 0.105t0.492 0.059 0.531 0.031 0.395 0.023q0.117 0.039 0.074 0.355t-0.238 0.59q-0.039 0.055-0.129 0.145t-0.441 0.277-0.789 0.266l0.117 1.477-1.086-0.523q-0.141 0.336-0.059 0.637t0.281 0.52 0.512 0.324 0.633 0.051q0.398-0.070 0.766-0.27t0.652-0.352 0.574-0.137q0.477 0.031 0.699 0.258t0.152 0.508q-0.008 0.016-0.020 0.043t-0.066 0.098-0.141 0.121-0.246 0.082-0.363 0.008q-0.469 0.742-1.129 1.059t-1.637 0.23q0.578 0.477 1.27 0.645t1.316 0.047 1.207-0.406 1-0.684 0.629-0.813q0.336-0.711 0.305-1.504t-0.293-1.473-0.613-0.977q0.68 0.297 1.070 0.621t0.602 0.879q0.117-1.328-0.449-2.68t-1.637-2.219q2.070 0.602 3.219 2.184t1.18 4.043q0.016 0.992-0.316 1.992t-0.965 1.859-1.477 1.531-1.934 1.059-2.254 0.387z"></path>
    </symbol>
    <symbol id="googlechrome" viewBox="0 0 14 14">
      <path d="M6.977 0q1.875-0.016 3.523 0.937 1.812 1.047 2.75 2.906l-5.797-0.305q-1.25-0.070-2.297 0.582t-1.445 1.793l-2.156-3.313q1-1.242 2.43-1.918t2.992-0.684zM1.141 3.164l2.633 5.18q0.563 1.117 1.648 1.695t2.289 0.352l-1.797 3.523q-1.656-0.258-3.008-1.23t-2.129-2.469-0.777-3.215q0-2.086 1.141-3.836zM13.531 4.484q0.453 1.172 0.465 2.426t-0.379 2.391-1.195 2.125-1.922 1.637q-1.797 1.039-3.891 0.93l3.164-4.867q0.688-1.023 0.645-2.27t-0.832-2.168zM7 4.641q0.977 0 1.668 0.691t0.691 1.668-0.691 1.668-1.668 0.691-1.668-0.691-0.691-1.668 0.691-1.668 1.668-0.691z"></path>
    </symbol>
    <symbol id="iexplore" viewBox="0 0 14 14">
      <path d="M14 7.32q0 0.438-0.055 0.813h-8.992q0 1.141 0.855 1.91t2.012 0.77q0.773 0 1.449-0.363t1.066-1.020h3.305q-0.438 1.242-1.332 2.195t-2.090 1.473-2.508 0.52q-1.461 0-2.781-0.648-1.781 0.906-3.078 0.906-1.852 0-1.852-2.055 0-0.898 0.352-2.148 0.133-0.469 0.852-1.789 1.555-2.812 3.711-4.734-1.438 0.617-3.336 2.766 0.492-2.141 2.215-3.512t3.918-1.371q0.234 0 0.352 0.008 1.992-0.914 3.383-0.914 0.5 0 0.906 0.102t0.738 0.316 0.52 0.598 0.187 0.898q0 0.906-0.586 2.234 0.789 1.422 0.789 3.047zM13.453 2.32q0-0.648-0.414-1.031t-1.070-0.383q-0.844 0-1.984 0.547 0.945 0.367 1.738 1.027t1.332 1.527q0.398-1.055 0.398-1.688zM1 11.984q0 0.672 0.379 1.035t1.051 0.363q0.898 0 2.078-0.648-0.953-0.563-1.668-1.43t-1.074-1.914q-0.766 1.602-0.766 2.594zM4.938 6.414h5.688q-0.039-1.109-0.883-1.852t-1.961-0.742q-1.125 0-1.965 0.742t-0.879 1.852z"></path>
    </symbol>
    <symbol id="ipad" viewBox="0 0 13 14">
      <path d="M7.136 12.727q0-0.259-0.189-0.447t-0.447-0.189-0.447 0.189-0.189 0.447 0.189 0.447 0.447 0.189 0.447-0.189 0.189-0.447zM10.955 11.136v-9.545q0-0.129-0.095-0.224t-0.224-0.095h-8.273q-0.129 0-0.224 0.095t-0.095 0.224v9.545q0 0.129 0.095 0.224t0.224 0.095h8.273q0.129 0 0.224-0.095t0.095-0.224zM12.227 1.591v10.818q0 0.656-0.467 1.124t-1.124 0.467h-8.273q-0.656 0-1.124-0.467t-0.467-1.124v-10.818q0-0.656 0.467-1.124t1.124-0.467h8.273q0.656 0 1.124 0.467t0.467 1.124z"></path>
    </symbol>
    <symbol id="iphone" viewBox="0 0 11 14">
      <path d="M6.375 12.6q0-0.361-0.257-0.618t-0.618-0.257-0.618 0.257-0.257 0.618 0.257 0.618 0.618 0.257 0.618-0.257 0.257-0.618zM8.65 10.85v-7.7q0-0.142-0.104-0.246t-0.246-0.104h-5.6q-0.142 0-0.246 0.104t-0.104 0.246v7.7q0 0.142 0.104 0.246t0.246 0.104h5.6q0.142 0 0.246-0.104t0.104-0.246zM6.55 1.575q0-0.175-0.175-0.175h-1.75q-0.175 0-0.175 0.175t0.175 0.175h1.75q0.175 0 0.175-0.175zM9.7 1.4v11.2q0 0.569-0.416 0.984t-0.984 0.416h-5.6q-0.569 0-0.984-0.416t-0.416-0.984v-11.2q0-0.569 0.416-0.984t0.984-0.416h5.6q0.569 0 0.984 0.416t0.416 0.984z"></path>
    </symbol>
    <symbol id="microsoftedge" viewBox="0 0 14 14">
      <path d="M0.539 6.211h0.008q0.125-0.984 0.457-1.887t0.898-1.695 1.309-1.375 1.746-0.918 2.16-0.336q1.805 0 3.234 0.824t2.297 2.371q0.813 1.461 0.813 3.453v1.469h-8.789q0.008 0.867 0.418 1.504t1.066 0.957 1.48 0.445 1.664 0.023 1.625-0.363 1.355-0.66v2.945q-0.719 0.43-1.793 0.719t-2.441 0.297-2.469-0.414q-1.477-0.57-2.434-1.945t-0.973-2.906q-0.023-1.891 0.867-3.219t2.539-2.094q-0.375 0.469-0.609 0.98t-0.359 1.246h4.961q0.062-0.602-0.062-1.094t-0.367-0.793-0.551-0.52-0.629-0.32-0.586-0.16-0.438-0.066l-0.172-0.008q-1.055 0.039-2.027 0.348t-1.746 0.816-1.375 1.098-1.078 1.277z"></path>
    </symbol>
    <symbol id="opera" viewBox="0 0 14 14">
      <path d="M11.664 1.781q-1.289-0.859-2.805-0.859-1.211 0-2.289 0.57t-1.875 1.563q-0.586 0.727-0.934 1.703t-0.379 2.078v0.328q0.031 1.102 0.379 2.078t0.934 1.703q0.797 0.992 1.875 1.563t2.289 0.57q1.516 0 2.805-0.859-0.945 0.844-2.145 1.313t-2.52 0.469q-0.227 0-0.336-0.008-1.367-0.062-2.602-0.641t-2.125-1.508-1.414-2.195-0.523-2.648q0-1.422 0.555-2.719t1.492-2.234 2.234-1.492 2.719-0.555h0.023q1.313 0.008 2.504 0.473t2.137 1.309zM14 7q0 1.5-0.602 2.832t-1.664 2.316q-0.813 0.492-1.734 0.492-1.070 0-1.992-0.656 1.203-0.438 1.98-1.82t0.777-3.164q0-1.773-0.773-3.156t-1.977-1.828q0.93-0.648 1.984-0.648 0.93 0 1.766 0.508 1.055 0.977 1.645 2.305t0.59 2.82z"></path>
    </symbol>
    <symbol id="safari" viewBox="0 0 14 14">
      <path d="M7.414 6.977q0 0.203-0.129 0.352t-0.324 0.148q-0.203 0-0.352-0.129t-0.148-0.324q0-0.203 0.133-0.352t0.328-0.148 0.344 0.129 0.148 0.324zM7.531 7.43l2.734-4.539q-0.070 0.062-0.527 0.488t-0.98 0.91-1.066 0.992-0.914 0.863-0.395 0.402l-2.727 4.531q0.055-0.055 0.523-0.484t0.984-0.91 1.062-0.992 0.914-0.867 0.391-0.395zM12.586 7q0 1.57-0.813 2.898-0.023-0.016-0.133-0.086t-0.207-0.129-0.129-0.059q-0.102 0-0.102 0.102 0 0.078 0.461 0.344-0.578 0.875-1.441 1.488t-1.887 0.863l-0.125-0.523q-0.008-0.078-0.117-0.078-0.039 0-0.062 0.043t-0.016 0.074l0.125 0.531q-0.563 0.117-1.141 0.117-1.555 0-2.906-0.82 0.008-0.016 0.102-0.16t0.168-0.262 0.074-0.148q0-0.102-0.102-0.102-0.047 0-0.133 0.113t-0.176 0.27-0.105 0.18q-0.883-0.586-1.5-1.465t-0.859-1.91l0.539-0.117q0.078-0.023 0.078-0.117 0-0.039-0.043-0.062t-0.082-0.016l-0.531 0.117q-0.109-0.563-0.109-1.086 0-1.609 0.852-2.961 0.016 0.008 0.145 0.094t0.234 0.148 0.137 0.062q0.102 0 0.102-0.094 0-0.047-0.098-0.121t-0.254-0.168l-0.156-0.094q0.602-0.875 1.477-1.477t1.906-0.836l0.117 0.523q0.016 0.078 0.117 0.078 0.039 0 0.062-0.043t0.016-0.082l-0.117-0.516q0.555-0.102 1.047-0.102 1.594 0 2.961 0.852-0.305 0.438-0.305 0.508 0 0.102 0.094 0.102 0.086 0 0.375-0.5 0.867 0.586 1.465 1.453t0.84 1.883l-0.438 0.094q-0.078 0.016-0.078 0.125 0 0.039 0.043 0.062t0.074 0.016l0.445-0.102q0.109 0.563 0.109 1.094zM13.25 7q0-1.273-0.496-2.43t-1.332-1.992-1.992-1.332-2.43-0.496-2.43 0.496-1.992 1.332-1.332 1.992-0.496 2.43 0.496 2.43 1.332 1.992 1.992 1.332 2.43 0.496 2.43-0.496 1.992-1.332 1.332-1.992 0.496-2.43zM14 7q0 1.422-0.555 2.719t-1.492 2.234-2.234 1.492-2.719 0.555-2.719-0.555-2.234-1.492-1.492-2.234-0.555-2.719 0.555-2.719 1.492-2.234 2.234-1.492 2.719-0.555 2.719 0.555 2.234 1.492 1.492 2.234 0.555 2.719z"></path>
    </symbol>
  </defs>
  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
    <g for(badge in data.layout.badges | status-var=loop) transform="translate(${ badge.translate }, 0)"
      mask=(data.layout.style === "flat-square" ? null : "url(#mask-${ loop.getIndex() })")>
      <g transform="translate(${ badge.label.translate }, 0)">
        <rect width=badge.label.width height="20" fill="#555"
          shape-rendering=(data.layout.style === "flat-square" ? "crispEdges" : null)/>
        <if(data.layout.style !== "flat-square")>
          <rect width=badge.label.width height="20" fill="url(#smooth)"/>
        </if>
        <if(badge.label.logo)>
          <if(data.layout.style !== "flat-square")>
            <use xlink:href=badge.label.logo x="5" y="4" width="14" height="14" style="fill: #010101; fill-opacity: 0.3"/>
          </if>
          <use xlink:href=badge.label.logo x="5" y="3" width="14" height="14" style="fill: #bbb"/>
        </if>
        <if(badge.label.text)>
          <if(data.layout.style !== "flat-square")>
            <text x=badge.label.x y="15" fill="#010101" fill-opacity="0.3">${ badge.label.text }</text>
          </if>
          <text x=badge.label.x y="14">${ badge.label.text }</text>
        </if>
      </g>
      <g for(browser in badge.versions | status-var=loop) transform="translate(${ browser.translate }, 0)">
        <rect width=browser.width height="20" fill=browser.fill
          shape-rendering=(data.layout.style === "flat-square" ? "crispEdges" : null)/>
        <if(browser.divider === "line")>
          <if(!loop.isFirst())>
            <line x1="0.5" x2="0.5" y1="0" y2="20"
              stroke-width="1" stroke="#fff" stroke-opacity="0.3"/>
          </if>
          <if(!loop.isLast())>
            <line x1=browser.width-0.5 x2=browser.width-0.5 y1="0" y2="20"
              stroke-width="1" stroke="#010101" stroke-opacity="0.1"/>
          </if>
        </if>
        <if(data.layout.style !== "flat-square")>
          <rect width=browser.width height="20" fill="url(#smooth)"/>
        </if>
        <if(data.layout.style !== "flat-square")>
          <text x=browser.x y="15" fill="#010101" fill-opacity="0.3">${ browser.text }</text>
        </if>
        <text x=browser.x y="14">${ browser.text }</text>
      </g>
    </g>
  </g>
</svg>