[[PageOutline]]
[WikiPedia:Web_badge]
= Providers =
* https://shields.io/
* https://poser.pugx.org/ (for PHP)
* https://docs.travis-ci.com/user/status-images/
* https://php-eye.com/about  (for PHP?)
* https://insight.sensiolabs.com/analyses (for PHP?)
* https://debian.org/
* https://www.versioneye.com/
* https://phppackages.org/ (for PHP)
* https://nodei.co/ (for node.js javascript)
* https://gemnasium.com/fbbdev/node-fastcgi.svg
* https://coveralls.io/ ([WikiPedia:Code_coverage])
* https://david-dm.org/ (Node.js)
= Examples =
  * [[Image(https://img.shields.io/packagist/dt/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://shields.io for Packagist
{{{#!sh
[[Image(https://img.shields.io/packagist/dt/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://poser.pugx.org/slim/slim/downloads, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://poser.pugx.org for Packagist
{{{#!sh
[[Image(https://poser.pugx.org/slim/slim/downloads, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://img.shields.io/npm/dm/mediator-js.svg, link=https://www.npmjs.com/package/mediator-js, title=mediator-js)]] https://shields.io for npm
{{{#!sh
[[Image(https://img.shields.io/npm/dm/mediator-js.svg, link=https://www.npmjs.com/package/mediator-js, title=mediator-js)]]
}}}
  * [[Image(https://img.shields.io/packagist/dm/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://shields.io for Packagist
{{{#!sh
[[Image(https://img.shields.io/packagist/dm/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://poser.pugx.org/slim/slim/d/monthly, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://poser.pugx.org for Packagist
{{{#!sh
[[Image(https://poser.pugx.org/slim/slim/d/monthly, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://img.shields.io/github/license/slimphp/Slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://shields.io for Packagist
{{{#!sh
[[Image(https://img.shields.io/github/license/slimphp/Slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://poser.pugx.org/slim/slim/license, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://poser.pugx.org for Packagist
{{{#!sh
[[Image(https://poser.pugx.org/slim/slim/license, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://api.travis-ci.org/bee4/events.svg, link=https://travis-ci.org/bee4/events, title=bee4/events)]] https://api.travis-ci.org/ needs a .travis.yml file
{{{#!sh
[[Image(https://api.travis-ci.org/bee4/events.svg, link=https://travis-ci.org/bee4/events, title=bee4/events)]]
}}}
  * [[Image(https://php-eye.com/badge/bee4/events/tested.svg, link=https://php-eye.com/package/bee4/events, title=bee4/events)]] https://php-eye.com/about https://api.travis-ci.org/ may needs a .travis.yml file https://php-eye.com/badge/symfony/symfony.json
{{{#!sh
[[Image(https://php-eye.com/badge/bee4/events/tested.svg, link=https://php-eye.com/package/bee4/events, title=bee4/events)]]
}}}
  * [[Image(https://img.shields.io/sensiolabs/i/f06ff1ba-40a5-483b-88ce-c37b10177b2c.svg, link=https://insight.sensiolabs.com/projects/f06ff1ba-40a5-483b-88ce-c37b10177b2c, title=bee4/events)]] https://insight.sensiolabs.com/ for PHP, needs author registration (Badge from http://shields.io/)
{{{#!sh
[[Image(https://img.shields.io/sensiolabs/i/f06ff1ba-40a5-483b-88ce-c37b10177b2c.svg, link=https://insight.sensiolabs.com/projects/f06ff1ba-40a5-483b-88ce-c37b10177b2c, title=bee4/events)]]
}}}
  * [[Image(https://qa.debian.org/cgi-bin/popcon-png?packages=php-codesniffer&show_installed=on&date_fmt=%25Y, 3%, link=https://tracker.debian.org/pkg/php-codesniffer, title="debian: php-codesniffer")]] https://debian.org
{{{#!sh
[[Image(https://qa.debian.org/cgi-bin/popcon-png?packages=php-codesniffer&show_installed=on&date_fmt=%25Y, 3%, link=https://tracker.debian.org/pkg/php-codesniffer, title="debian: php-codesniffer")]]
}}}
  * [[Image(https://www.versioneye.com/php/psr:log/dev-master:references/badge, link=https://www.versioneye.com/php/psr:log/dev-master:references, title=psr/log/dev-master)]] [[Image(https://www.versioneye.com/php/psr:log/reference_badge.svg, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]] [[Image(https://www.versioneye.com/php/psr:log/references/badge, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]] https://www.versioneye.com/
{{{#!sh
[[Image(https://www.versioneye.com/php/psr:log/dev-master:references/badge, link=https://www.versioneye.com/php/psr:log/dev-master:references, title=psr/log/dev-master)]] # use with care!
[[Image(https://www.versioneye.com/php/psr:log/reference_badge.svg, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]]
[[Image(https://www.versioneye.com/php/psr:log/references/badge, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]] # do not use this!!
}}}
  * [[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master, title=phpmetrics/phpmetrics/dev-master)]] [[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics, title=phpmetrics/phpmetrics)]] https://www.versioneye.com/
{{{#!sh
[[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master, title=phpmetrics/phpmetrics:dev-master)]]
[[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics, title=phpmetrics/phpmetrics)]]
}}}
  * [[Image(http://phppackages.org/p/psr/log/badge/rank.svg, link=http://phppackages.org/p/psr/log, title=psr/log)]] http://phppackages.org/
{{{#!sh
[[Image(http://phppackages.org/p/psr/log/badge/rank.svg, link=http://phppackages.org/p/psr/log, title=psr/log)]]
}}}
  * https://nodei.co/npm/levelup.png?stars&downloads&downloadRank
  * https://nodei.co/npm-dl/levelup.png?months=12&height=3
= SVG code =
  * [[Image(https://img.shields.io/packagist/dt/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://shields.io for Packagist
{{{#!sh
[[Image(https://img.shields.io/packagist/dt/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <clipPath id="a">
        <rect width="96" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#a)">
        <path fill="#555" d="M0 0h69v20H0z"/>
        <path fill="#4c1" d="M69 0h27v20H69z"/>
        <path fill="url(#b)" d="M0 0h96v20H0z"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="34.5" y="15" fill="#010101" fill-opacity=".3">downloads</text>
        <text x="34.5" y="14">downloads</text>
        <text x="81.5" y="15" fill="#010101" fill-opacity=".3">3M</text>
        <text x="81.5" y="14">3M</text>
    </g>
</svg>
}}}
  * [[Image(https://poser.pugx.org/slim/slim/downloads, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://poser.pugx.org for Packagist
{{{#!sh
[[Image(https://poser.pugx.org/slim/slim/downloads, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="123" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <mask id="a">
        <rect width="123" height="20" rx="3" fill="#fff"/>
    </mask>
    <g mask="url(#a)">
        <rect width="71" height="20" fill="#555"/>
        <rect x="71" width="52" height="20" fill="#007ec6"/>
        <rect width="123" height="20" fill="url(#b)"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="36.5" y="15" fill="#010101" fill-opacity=".3">downloads</text>
        <text x="36.5" y="14">downloads</text>
        <text x="96" y="15" fill="#010101" fill-opacity=".3">2.51 M </text>
        <text x="96" y="14">2.51 M </text>
    </g>
</svg>
}}}
  * [[Image(https://img.shields.io/npm/dm/mediator-js.svg, link=https://www.npmjs.com/package/mediator-js, title=mediator-js)]] https://shields.io for npm
{{{#!sh
[[Image(https://img.shields.io/npm/dm/mediator-js.svg, link=https://www.npmjs.com/package/mediator-js, title=mediator-js)]]
}}}
  * [[Image(https://img.shields.io/packagist/dm/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://shields.io for Packagist
{{{#!sh
[[Image(https://img.shields.io/packagist/dm/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://poser.pugx.org/slim/slim/d/monthly, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://poser.pugx.org for Packagist
{{{#!sh
[[Image(https://poser.pugx.org/slim/slim/d/monthly, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://img.shields.io/github/license/slimphp/Slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://shields.io for Packagist
{{{#!sh
[[Image(https://img.shields.io/github/license/slimphp/Slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://poser.pugx.org/slim/slim/license, link=https://packagist.org/packages/slim/slim, title=slim/slim)]] https://poser.pugx.org for Packagist
{{{#!sh
[[Image(https://poser.pugx.org/slim/slim/license, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
}}}
  * [[Image(https://api.travis-ci.org/bee4/events.svg, link=https://travis-ci.org/bee4/events, title=bee4/events)]] https://api.travis-ci.org/ needs a .travis.yml file
{{{#!sh
[[Image(https://api.travis-ci.org/bee4/events.svg, link=https://travis-ci.org/bee4/events, title=bee4/events)]]
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="20">
    <linearGradient id="a" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <rect rx="3" width="90" height="20" fill="#555"/>
    <rect rx="3" x="37" width="53" height="20" fill="#4c1"/>
    <path fill="#4c1" d="M37 0h4v20h-4z"/>
    <rect rx="3" width="90" height="20" fill="url(#a)"/>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="19.5" y="15" fill="#010101" fill-opacity=".3">build</text>
        <text x="19.5" y="14">build</text>
        <text x="62.5" y="15" fill="#010101" fill-opacity=".3">passing</text>
        <text x="62.5" y="14">passing</text>
    </g>
</svg>
}}}
  * [[Image(https://php-eye.com/badge/bee4/events/tested.svg, link=https://php-eye.com/package/bee4/events, title=bee4/events)]] https://php-eye.com/about https://api.travis-ci.org/ may needs a .travis.yml file https://php-eye.com/badge/symfony/symfony.json
{{{#!sh
[[Image(https://php-eye.com/badge/bee4/events/tested.svg, link=https://php-eye.com/package/bee4/events, title=bee4/events)]]
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="266" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <clipPath id="a">
        <rect width="266" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#a)">
        <path fill="#555" d="M0 0h221v20H0z"/>
        <path fill="#4c1" d="M221 0h45v20h-45z"/>
        <path fill="url(#b)" d="M0 0h266v20H0z"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="110.5" y="15" fill="#010101" fill-opacity=".3">PHP 7.0 | PHP 5.6 | PHP 5.5 | PHP 5.4</text>
        <text x="110.5" y="14">PHP 7.0 | PHP 5.6 | PHP 5.5 | PHP 5.4</text>
        <text x="242.5" y="15" fill="#010101" fill-opacity=".3">Tested</text>
        <text x="242.5" y="14">Tested</text>
    </g>
</svg>
}}}
  * [[Image(https://img.shields.io/sensiolabs/i/f06ff1ba-40a5-483b-88ce-c37b10177b2c.svg, link=https://insight.sensiolabs.com/projects/f06ff1ba-40a5-483b-88ce-c37b10177b2c, title=bee4/events)]] https://insight.sensiolabs.com/ for PHP, needs author registration (Badge from http://shields.io/)
{{{#!sh
[[Image(https://img.shields.io/sensiolabs/i/f06ff1ba-40a5-483b-88ce-c37b10177b2c.svg, link=https://insight.sensiolabs.com/projects/f06ff1ba-40a5-483b-88ce-c37b10177b2c, title=bee4/events)]]
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="116" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <clipPath id="a">
        <rect width="116" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#a)">
        <path fill="#555" d="M0 0h41v20H0z"/>
        <path fill="#9f9f9f" d="M41 0h75v20H41z"/>
        <path fill="url(#b)" d="M0 0h116v20H0z"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="20.5" y="15" fill="#010101" fill-opacity=".3">check</text>
        <text x="20.5" y="14">check</text>
        <text x="77.5" y="15" fill="#010101" fill-opacity=".3">inaccessible</text>
        <text x="77.5" y="14">inaccessible</text>
    </g>
</svg>
}}}
  * [[Image(https://qa.debian.org/cgi-bin/popcon-png?packages=php-codesniffer&show_installed=on&date_fmt=%25Y, 3%, link=https://tracker.debian.org/pkg/php-codesniffer, title="debian: php-codesniffer")]] https://debian.org
{{{#!sh
[[Image(https://qa.debian.org/cgi-bin/popcon-png?packages=php-codesniffer&show_installed=on&date_fmt=%25Y, 3%, link=https://tracker.debian.org/pkg/php-codesniffer, title="debian: php-codesniffer")]]
}}}
  * [[Image(https://www.versioneye.com/php/psr:log/dev-master:references/badge, link=https://www.versioneye.com/php/psr:log/dev-master:references, title=psr/log/dev-master)]] [[Image(https://www.versioneye.com/php/psr:log/reference_badge.svg, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]] [[Image(https://www.versioneye.com/php/psr:log/references/badge, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]] https://www.versioneye.com/
{{{#!sh
[[Image(https://www.versioneye.com/php/psr:log/dev-master:references/badge, link=https://www.versioneye.com/php/psr:log/dev-master:references, title=psr/log/dev-master)]] # use with care!
[[Image(https://www.versioneye.com/php/psr:log/reference_badge.svg, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]]
[[Image(https://www.versioneye.com/php/psr:log/references/badge, link=https://www.versioneye.com/php/psr:log/references, title=psr/log)]] # do not use this!!
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="123" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <mask id="a">
        <rect width="123" height="20" rx="3" fill="#fff"/>
    </mask>
    <g mask="url(#a)">
        <path fill="#555" d="M0 0h71v20H0z"/>
        <path fill="#97CA00" d="M71 0h52v20H71z"/>
        <path fill="url(#b)" d="M0 0h123v20H0z"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="35.5" y="15" fill="#010101" fill-opacity=".3">references</text>
        <text x="35.5" y="14">references</text>
        <text x="96" y="15" fill="#010101" fill-opacity=".3">2219</text>
        <text x="96" y="14">2219</text>
    </g>
</svg>
}}}
  * [[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master, title=phpmetrics/phpmetrics/dev-master)]] [[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics, title=phpmetrics/phpmetrics)]] https://www.versioneye.com/
{{{#!sh
[[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master, title=phpmetrics/phpmetrics:dev-master)]]
[[Image(https://www.versioneye.com/php/phpmetrics:phpmetrics/badge, link=https://www.versioneye.com/php/phpmetrics:phpmetrics, title=phpmetrics/phpmetrics)]]
}}}
  * [[Image(http://phppackages.org/p/psr/log/badge/rank.svg, link=http://phppackages.org/p/psr/log, title=psr/log)]] http://phppackages.org/
{{{#!sh
[[Image(http://phppackages.org/p/psr/log/badge/rank.svg, link=http://phppackages.org/p/psr/log, title=psr/log)]]
}}}
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <mask id="a">
        <rect width="57" height="20" rx="3" fill="#fff"/>
    </mask>
    <g mask="url(#a)">
        <rect width="35" height="20" fill="#555"/>
        <rect x="35" width="22" height="20" fill="#428F7E"/>
        <rect width="57" height="20" fill="url(#b)"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="18.5" y="15" fill="#010101" fill-opacity=".3">rank</text>
        <text x="18.5" y="14">rank</text>
        <text x="45" y="15" fill="#010101" fill-opacity=".3">66</text>
        <text x="45" y="14">66</text>
    </g>
</svg>
}}}
  * https://nodei.co/npm/levelup.png?stars&downloads&downloadRank
  * https://nodei.co/npm-dl/levelup.png?months=12&height=3
== Comparison of Code ==
https://poser.pugx.org/ and http://phppackages.org/ look very similar and easier to understand than others.
{{{#!svg
<svg xmlns="http://www.w3.org/2000/svg" width="$_____(total)" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <mask id="a">
        <rect width="$_____(total)" height="20" rx="3" fill="#fff"/>
    </mask>
    <g mask="url(#a)">
        <rect width="$___(left)" height="20" fill="#555"/>
        <rect x="$___(left)" width="$__(right)" height="20" fill="#$______(color)"/>
        <rect width="$_____(total)" height="20" fill="url(#b)"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="$_(middle of left = half of left)" y="15" fill="#010101" fill-opacity=".3">$_(text left)</text>
        <text x="$_(middle of left)" y="14">$_(text left)</text>
        <text x="$_(middle of right = total - half of right)" y="15" fill="#010101" fill-opacity=".3">$_(text right)</text>
        <text x="$_(middle of right)" y="14">$_(text right)</text>
    </g>
</svg>
}}}