wiki:members/GRIP-UQAM/Web_badge

Web_badge

Providers

Examples

  • https://img.shields.io/packagist/dt/slim/slim.svg https://shields.io for Packagist
    [[Image(https://img.shields.io/packagist/dt/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://poser.pugx.org/slim/slim/downloads https://poser.pugx.org for Packagist
    [[Image(https://poser.pugx.org/slim/slim/downloads, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://img.shields.io/npm/dm/mediator-js.svg https://shields.io for npm
    [[Image(https://img.shields.io/npm/dm/mediator-js.svg, link=https://www.npmjs.com/package/mediator-js, title=mediator-js)]]
    
  • https://img.shields.io/packagist/dm/slim/slim.svg https://shields.io for Packagist
    [[Image(https://img.shields.io/packagist/dm/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://poser.pugx.org/slim/slim/d/monthly https://poser.pugx.org for Packagist
    [[Image(https://poser.pugx.org/slim/slim/d/monthly, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://img.shields.io/github/license/slimphp/Slim.svg https://shields.io for Packagist
    [[Image(https://img.shields.io/github/license/slimphp/Slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://poser.pugx.org/slim/slim/license https://poser.pugx.org for Packagist
    [[Image(https://poser.pugx.org/slim/slim/license, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://api.travis-ci.org/bee4/events.svg https://api.travis-ci.org/ needs a .travis.yml file
    [[Image(https://api.travis-ci.org/bee4/events.svg, link=https://travis-ci.org/bee4/events, title=bee4/events)]]
    
  • https://php-eye.com/badge/bee4/events/tested.svg https://php-eye.com/about https://api.travis-ci.org/ may needs a .travis.yml file https://php-eye.com/badge/symfony/symfony.json
    [[Image(https://php-eye.com/badge/bee4/events/tested.svg, link=https://php-eye.com/package/bee4/events, title=bee4/events)]]
    
  • https://img.shields.io/sensiolabs/i/f06ff1ba-40a5-483b-88ce-c37b10177b2c.svg https://insight.sensiolabs.com/ for PHP, needs author registration (Badge from http://shields.io/)
    [[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://qa.debian.org/cgi-bin/popcon-png https://debian.org
    [[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://www.versioneye.com/php/psr:log/dev-master:references/badge https://www.versioneye.com/php/psr:log/reference_badge.svg https://www.versioneye.com/php/psr:log/references/badge https://www.versioneye.com/
    [[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!!
    
  • https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master/badge https://www.versioneye.com/php/phpmetrics:phpmetrics/badge https://www.versioneye.com/
    [[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)]]
    
  • http://phppackages.org/p/psr/log/badge/rank.svg http://phppackages.org/
    [[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

  • https://img.shields.io/packagist/dt/slim/slim.svg https://shields.io for Packagist
    [[Image(https://img.shields.io/packagist/dt/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
    <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>
    
  • https://poser.pugx.org/slim/slim/downloads https://poser.pugx.org for Packagist
    [[Image(https://poser.pugx.org/slim/slim/downloads, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
    <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>
    
  • https://img.shields.io/npm/dm/mediator-js.svg https://shields.io for npm
    [[Image(https://img.shields.io/npm/dm/mediator-js.svg, link=https://www.npmjs.com/package/mediator-js, title=mediator-js)]]
    
  • https://img.shields.io/packagist/dm/slim/slim.svg https://shields.io for Packagist
    [[Image(https://img.shields.io/packagist/dm/slim/slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://poser.pugx.org/slim/slim/d/monthly https://poser.pugx.org for Packagist
    [[Image(https://poser.pugx.org/slim/slim/d/monthly, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://img.shields.io/github/license/slimphp/Slim.svg https://shields.io for Packagist
    [[Image(https://img.shields.io/github/license/slimphp/Slim.svg, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://poser.pugx.org/slim/slim/license https://poser.pugx.org for Packagist
    [[Image(https://poser.pugx.org/slim/slim/license, link=https://packagist.org/packages/slim/slim, title=slim/slim)]]
    
  • https://api.travis-ci.org/bee4/events.svg https://api.travis-ci.org/ needs a .travis.yml file
    [[Image(https://api.travis-ci.org/bee4/events.svg, link=https://travis-ci.org/bee4/events, title=bee4/events)]]
    
    <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>
    
  • https://php-eye.com/badge/bee4/events/tested.svg https://php-eye.com/about https://api.travis-ci.org/ may needs a .travis.yml file https://php-eye.com/badge/symfony/symfony.json
    [[Image(https://php-eye.com/badge/bee4/events/tested.svg, link=https://php-eye.com/package/bee4/events, title=bee4/events)]]
    
    <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>
    
  • https://img.shields.io/sensiolabs/i/f06ff1ba-40a5-483b-88ce-c37b10177b2c.svg https://insight.sensiolabs.com/ for PHP, needs author registration (Badge from http://shields.io/)
    [[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 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>
    
  • https://qa.debian.org/cgi-bin/popcon-png https://debian.org
    [[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://www.versioneye.com/php/psr:log/dev-master:references/badge https://www.versioneye.com/php/psr:log/reference_badge.svg https://www.versioneye.com/php/psr:log/references/badge https://www.versioneye.com/
    [[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 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>
    
  • https://www.versioneye.com/php/phpmetrics:phpmetrics/dev-master/badge https://www.versioneye.com/php/phpmetrics:phpmetrics/badge https://www.versioneye.com/
    [[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)]]
    
  • http://phppackages.org/p/psr/log/badge/rank.svg http://phppackages.org/
    [[Image(http://phppackages.org/p/psr/log/badge/rank.svg, link=http://phppackages.org/p/psr/log, title=psr/log)]]
    
    <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 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>
Last modified 3 years ago Last modified on Jan 9, 2017, 3:54:14 PM