Example of link pointing to nmrium
The spectra can be opened with NMRium.
Playing with badges
add stuff
fdsd
https://nmredatainitiative.github.io/myjsondemo.json
https://nmredatainitiative.github.io/myBadgeWithLogo.json
points to my file:
more option :..logoWidth=40?
All desired options object html tag. (does not preview well on visual studio code)
Removed the unused link to github - it is overwritten in the object data….
more details how arived there
Discussion shields discussion
https://raw.githubusercontent.com/chris48s/shields-endpoint-test/2958b1745abdc566152d54d336550a29c1ccb553/badge1.json
https://img.shields.io/endpoint.svg?url=https%3A//raw.githubusercontent.com/chris48s/shields-endpoint-test/2958b1745abdc566152d54d336550a29c1ccb553/badge1.json
https://raw.githubusercontent.com/chris48s/shields-endpoint-test/2958b1745abdc566152d54d336550a29c1ccb553/badge1.json
about shields : https://shields.io/category/monitoring
[adding-custom-badges-to-gitlab](https://medium.com/@iffi33/adding-custom-badges-to-gitlab-a9af8e3f3569}
archiveForgeDesktopApplication
same output as
variant works with mized SVG
more about minimized SVG :
variant works
changed stat
original
** packagist generated .svg
svg from shields
converted circle to base64 (see below): not working…?
From svg editor, take central part (the plot part): Eg:
<polygon fill="#A2A2A2" points="67.071,12.727 98.79,32.5 98.797,85.674 67.071,102.844 "/>
<path fill="none" stroke="#FFFFFF" stroke-width="8.7373" stroke-linecap="round" stroke-linejoin="round" d="M52.918,111.116L6.875,84.511L6.868,31.345L52.918,4.757c0,0.01,16.041,9.268,16.041,9.268l30,17.32l0.008,53.174L52.918,111.116z"/><line fill="none" stroke="#FFFFFF" stroke-width="6.0" stroke-linecap="round" stroke-linejoin="round" x1="67.241" y1="13.032" x2="67.241" y2="102.844"/>
<text transform="matrix(1 0 0 1 15.0 81.0)" fill="#FFFFFF" font-family="'Verdana'" font-size="70.0">d</text>
Set viewBox according to plot min/max position (take into account the line widths):
<svg role="img" height="16" width="16" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><title>Zerply</title><polygon fill="#A2A2A2" points="67.071,12.727 98.79,32.5 98.797,85.674 67.071,102.844 "/><path fill="none" stroke="#FFFFFF" stroke-width="8.7373" stroke-linecap="round" stroke-linejoin="round" d="M52.918,111.116L6.875,84.511L6.868,31.345L52.918,4.757c0,0.01,16.041,9.268,16.041,9.268l30,17.32l0.008,53.174L52.918,111.116z"/><line fill="none" stroke="#FFFFFF" stroke-width="6.0" stroke-linecap="round" stroke-linejoin="round" x1="67.241" y1="13.032" x2="67.241" y2="102.844"/><text transform="matrix(1 0 0 1 15.0 81.0)" fill="#FFFFFF" font-family="'Verdana'" font-size="70.0">d</text></svg>
convert into httbinary64
PHN2ZyByb2xlPSJpbWciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDEyMCAxMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPlplcnBseTwvdGl0bGU+PHBvbHlnb24gZmlsbD0iI0VEMjA4OCIgcG9pbnRzPSI2Ny4wNzEsMTIuNzI3IDk4Ljc5LDMyLjUgOTguNzk3LDg1LjY3NCA2Ny4wNzEsMTAyLjg0NCAiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiICBzdHJva2Utd2lkdGg9IjguNzM3MyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNTIuOTE4LDExMS4xMTZMNi44NzUsODQuNTExTDYuODY4LDMxLjM0NUw1Mi45MTgsNC43NTdjMCwwLjAxLDE2LjA0MSw5LjI2OCwxNi4wNDEsOS4yNjhsMzAsMTcuMzJsMC4wMDgsNTMuMTc0TDUyLjkxOCwxMTEuMTE2eiIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgIHN0cm9rZS13aWR0aD0iNi4wIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHgxPSI2Ny4yNDEiIHkxPSIxMy4wMzIiIHgyPSI2Ny4yNDEiIHkyPSIxMDIuODQ0Ii8+PHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAxOC44OTcgODYuNjAyNSkiIGZpbGw9IiNGRkZGRkYiIGZvbnQtZmFtaWx5PSInTXlyaWFkUHJvLVJlZ3VsYXInIiBmb250LXNpemU9Ijg3LjM3MjkiPlM8L3RleHQ+PC9zdmc+
Embed into the badge in the .md format:
Changed colors and slightly shifted text left and Verdana font and size 70:
Format with clickable link
base64 interconverter https://base64.guru/converter
badges with links …
html offers more possibilities (two different links - not shown here… only in html)
.md
badges with separation style content
Two styles same content
Back to mix of examples and svg
from github github.com/marketplace/actions/dynamic-badges
With a hot link… (no svg…)
With a hot link… (and svg…)
with custom svg?
same compressed svg
using above circle svg…
examples of svg to play
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Zerply</title><path d="M20.779 18.746c-.747.714-1.562 1.017-2.543 1.017-1.32 0-3.322-.61-4.846-1.66-1.629-1.119-3.765-2.237-5.562-2.271 1.323-1.798 3.39-3.628 5.322-5.798.713-.78 4.983-5.7 5.73-6.586.54-.645.813-1.424.813-2.205 0-.3-.033-.585-.101-.855-2.035.405-3.561.601-6.001.601-2.677.015-4.607-.314-5.73-.989-.78 1.018-1.56 2.373-1.56 3.12 0 .948.918 1.728 3.189 1.728.746 0 1.965-.034 3.66-.169-3.492 4.5-6.949 8.16-9.016 10.47-.713.781-1.121 1.83-1.121 2.881 0 .405.075.81.18 1.185.645-.104 1.291-.179 1.965-.179 1.395 0 2.79.299 4.081.839C11.805 21.014 14.205 24 16.921 24c2.204 0 4.065-1.741 4.065-4.036 0-.404-.061-.825-.195-1.229l-.012.011z"/></svg>
<svg height="16" width="16"><circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" /></svg>
TRY2
SVG logo from https://github.com/simple-icons/simple-icons from https://shields.io/category/monitoring
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Zerply</title><path d="M20.779 18.746c-.747.714-1.562 1.017-2.543 1.017-1.32 0-3.322-.61-4.846-1.66-1.629-1.119-3.765-2.237-5.562-2.271 1.323-1.798 3.39-3.628 5.322-5.798.713-.78 4.983-5.7 5.73-6.586.54-.645.813-1.424.813-2.205 0-.3-.033-.585-.101-.855-2.035.405-3.561.601-6.001.601-2.677.015-4.607-.314-5.73-.989-.78 1.018-1.56 2.373-1.56 3.12 0 .948.918 1.728 3.189 1.728.746 0 1.965-.034 3.66-.169-3.492 4.5-6.949 8.16-9.016 10.47-.713.781-1.121 1.83-1.121 2.881 0 .405.075.81.18 1.185.645-.104 1.291-.179 1.965-.179 1.395 0 2.79.299 4.081.839C11.805 21.014 14.205 24 16.921 24c2.204 0 4.065-1.741 4.065-4.036 0-.404-.061-.825-.195-1.229l-.012.011z"/></svg>
<?xml version="1.0"?>
<xmlns="http://www.w3.org/2000/svg" height="178" width="172" viewBox="-86 -89 172 178">
<rect width="172" height="178" x="-86" y="-89" fill="#f2f2f2"/><text style="letter-spacing:.2pt;font-weight:bold;fill:#a00;stroke-opacity:.5;text-anchor:middle;text-align:center;stroke:#700;stroke-width:1pt;font-family:sans-serif" transform="rotate(45) scale(.2)"><tspan y="-120" x="-5" font-size="125px">just an</tspan><tspan y="90" x="10" font-size="210px">Example</tspan></text></svg>
GitHub dynamic badge
Example git…. from https://github.com/marketplace/actions/dynamic-badges
A badge like
...
Badge:
https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/schneegans/2ab8f1d386f13aaebccbd87dac94068d/raw/hello-world.json
badge clicking on the link https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/schneegans/2ab8f1d386f13aaebccbd87dac94068d/raw/hello-world.json
generates:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="20" role="img" aria-label="The Answer is: 42"><title>The Answer is: 42</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="110" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="87" height="20" fill="#555"/><rect x="87" width="23" height="20" fill="#97ca00"/><rect width="110" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="445" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="770">The Answer is</text><text x="445" y="140" transform="scale(.1)" fill="#fff" textLength="770">The Answer is</text><text aria-hidden="true" x="975" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="130">42</text><text x="975" y="140" transform="scale(.1)" fill="#fff" textLength="130">42</text></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588"
xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
End.