Improvements

main
Anton Novojilov 3 years ago
parent 8c94205be4
commit 0148b476a4

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="20" role="img" aria-label="flat: blue"><title>flat: blue</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="60" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="33" height="20" fill="#007ec6"/><rect width="60" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="230">blue</text><text x="425" y="140" transform="scale(.1)" fill="#fff" textLength="230">blue</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="20" role="img" aria-label="flat: blue"><title>flat: blue</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="60" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="33" height="20" fill="#007ec6"/><rect width="60" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="228">blue</text><text x="425" y="140" transform="scale(.1)" fill="#fff" textLength="228">blue</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="20" role="img" aria-label="flat: brightgreen"><title>flat: brightgreen</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="102" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="75" height="20" fill="#4c1"/><rect width="102" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="635" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="650">brightgreen</text><text x="635" y="140" transform="scale(.1)" fill="#fff" textLength="650">brightgreen</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="20" role="img" aria-label="flat: brightgreen"><title>flat: brightgreen</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="102" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="75" height="20" fill="#4c14c1"/><rect width="102" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="635" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="627">brightgreen</text><text x="635" y="140" transform="scale(.1)" fill="#fff" textLength="627">brightgreen</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73" height="20" role="img" aria-label="flat: critical"><title>flat: critical</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="73" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="46" height="20" fill="#e05d44"/><rect width="73" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="495" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="360">critical</text><text x="495" y="140" transform="scale(.1)" fill="#fff" textLength="360">critical</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73" height="20" role="img" aria-label="flat: critical"><title>flat: critical</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="73" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="46" height="20" fill="#e05d44"/><rect width="73" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="490" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="352">critical</text><text x="490" y="140" transform="scale(.1)" fill="#fff" textLength="352">critical</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="20" role="img" aria-label="flat: ff69b4"><title>flat: ff69b4</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="72" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="45" height="20" fill="#ff69b4"/><rect width="72" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="485" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">ff69b4</text><text x="485" y="140" transform="scale(.1)" fill="#fff" textLength="350">ff69b4</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="20" role="img" aria-label="flat: #ff69b4"><title>flat: #ff69b4</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="81" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="54" height="20" fill="#ff69b4"/><rect width="81" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="530" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="428">#ff69b4</text><text x="530" y="140" transform="scale(.1)" fill="#fff" textLength="428">#ff69b4</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69" height="20" role="img" aria-label="flat: green"><title>flat: green</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="69" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="42" height="20" fill="#97ca00"/><rect width="69" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="320">green</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="320">green</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69" height="20" role="img" aria-label="flat: green"><title>flat: green</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="69" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="42" height="20" fill="#97ca00"/><rect width="69" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="470" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="314">green</text><text x="470" y="140" transform="scale(.1)" fill="#fff" textLength="314">green</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="20" role="img" aria-label="flat: important"><title>flat: important</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="91" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="64" height="20" fill="#fe7d37"/><rect width="91" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="585" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="540">important</text><text x="585" y="140" transform="scale(.1)" fill="#fff" textLength="540">important</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="20" role="img" aria-label="flat: important"><title>flat: important</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="91" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="64" height="20" fill="#fe7d37"/><rect width="91" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="580" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="522">important</text><text x="580" y="140" transform="scale(.1)" fill="#fff" textLength="522">important</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="20" role="img" aria-label="flat: inactive"><title>flat: inactive</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="80" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="53" height="20" fill="#9f9f9f"/><rect width="80" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="525" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">inactive</text><text x="525" y="140" transform="scale(.1)" fill="#fff" textLength="430">inactive</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="20" role="img" aria-label="flat: inactive"><title>flat: inactive</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="80" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="53" height="20" fill="#9f9f9f"/><rect width="80" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="525" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="418">inactive</text><text x="525" y="140" transform="scale(.1)" fill="#fff" textLength="418">inactive</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="111" height="20" role="img" aria-label="flat: informational"><title>flat: informational</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="111" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="84" height="20" fill="#007ec6"/><rect width="111" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="685" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="740">informational</text><text x="685" y="140" transform="scale(.1)" fill="#fff" textLength="740">informational</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="111" height="20" role="img" aria-label="flat: informational"><title>flat: informational</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="111" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="84" height="20" fill="#007ec6"/><rect width="111" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="680" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="712">informational</text><text x="680" y="140" transform="scale(.1)" fill="#fff" textLength="712">informational</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="20" role="img" aria-label="ラベル: メッセージ"><title>ラベル: メッセージ</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="106" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="42" height="20" fill="#555"/><rect x="42" width="64" height="20" fill="#ac3fd4"/><rect width="106" 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="220" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="314">ラベル</text><text x="220" y="140" transform="scale(.1)" fill="#fff" textLength="314">ラベル</text><text aria-hidden="true" x="730" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="522">メッセージ</text><text x="730" y="140" transform="scale(.1)" fill="#fff" textLength="522">メッセージ</text></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="86" height="20" role="img" aria-label="flat: lightgrey"><title>flat: lightgrey</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="86" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="59" height="20" fill="#9f9f9f"/><rect width="86" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="555" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">lightgrey</text><text x="555" y="140" transform="scale(.1)" fill="#fff" textLength="490">lightgrey</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="86" height="20" role="img" aria-label="flat: lightgrey"><title>flat: lightgrey</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="86" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="59" height="20" fill="#9f9f9f"/><rect width="86" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="555" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="475">lightgrey</text><text x="555" y="140" transform="scale(.1)" fill="#fff" textLength="475">lightgrey</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="20" role="img" aria-label="flat: orange"><title>flat: orange</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="76" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="49" height="20" fill="#fe7d37"/><rect width="76" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="505" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="390">orange</text><text x="505" y="140" transform="scale(.1)" fill="#fff" textLength="390">orange</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="20" role="img" aria-label="flat: orange"><title>flat: orange</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="76" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="49" height="20" fill="#fe7d37"/><rect width="76" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="505" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="380">orange</text><text x="505" y="140" transform="scale(.1)" fill="#fff" textLength="380">orange</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55" height="20" role="img" aria-label="flat: red"><title>flat: red</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="55" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="28" height="20" fill="#e05d44"/><rect width="55" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="405" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="180">red</text><text x="405" y="140" transform="scale(.1)" fill="#fff" textLength="180">red</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55" height="20" role="img" aria-label="flat: red"><title>flat: red</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="55" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="28" height="20" fill="#e05d44"/><rect width="55" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="400" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="180">red</text><text x="400" y="140" transform="scale(.1)" fill="#fff" textLength="180">red</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="20" role="img" aria-label="blue"><title>blue</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="33" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#007ec6"/><rect x="0" width="33" height="20" fill="#007ec6"/><rect width="33" 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="165" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="240">blue</text><text x="165" y="140" transform="scale(.1)" fill="#fff" textLength="240">blue</text></g></svg>

After

Width:  |  Height:  |  Size: 903 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="20" role="img" aria-label="brightgreen"><title>brightgreen</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="75" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#4c14c1"/><rect x="0" width="75" height="20" fill="#4c14c1"/><rect width="75" 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="375" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="660">brightgreen</text><text x="375" y="140" transform="scale(.1)" fill="#fff" textLength="660">brightgreen</text></g></svg>

After

Width:  |  Height:  |  Size: 931 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="20" role="img" aria-label="critical"><title>critical</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="46" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#e05d44"/><rect x="0" width="46" height="20" fill="#e05d44"/><rect width="46" 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="230" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">critical</text><text x="230" y="140" transform="scale(.1)" fill="#fff" textLength="370">critical</text></g></svg>

After

Width:  |  Height:  |  Size: 919 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="20" role="img" aria-label="#ff69b4"><title>#ff69b4</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="54" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#ff69b4"/><rect x="0" width="54" height="20" fill="#ff69b4"/><rect width="54" 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="270" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">#ff69b4</text><text x="270" y="140" transform="scale(.1)" fill="#fff" textLength="450">#ff69b4</text></g></svg>

After

Width:  |  Height:  |  Size: 915 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="20" role="img" aria-label="green"><title>green</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="42" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#97ca00"/><rect x="0" width="42" height="20" fill="#97ca00"/><rect width="42" 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="210" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">green</text><text x="210" y="140" transform="scale(.1)" fill="#fff" textLength="330">green</text></g></svg>

After

Width:  |  Height:  |  Size: 907 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="20" role="img" aria-label="important"><title>important</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="64" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#fe7d37"/><rect x="0" width="64" height="20" fill="#fe7d37"/><rect width="64" 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="320" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="550">important</text><text x="320" y="140" transform="scale(.1)" fill="#fff" textLength="550">important</text></g></svg>

After

Width:  |  Height:  |  Size: 923 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="20" role="img" aria-label="inactive"><title>inactive</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="53" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#9f9f9f"/><rect x="0" width="53" height="20" fill="#9f9f9f"/><rect width="53" 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="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="440">inactive</text><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="440">inactive</text></g></svg>

After

Width:  |  Height:  |  Size: 919 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84" height="20" role="img" aria-label="informational"><title>informational</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="84" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#007ec6"/><rect x="0" width="84" height="20" fill="#007ec6"/><rect width="84" 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="420" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="750">informational</text><text x="420" y="140" transform="scale(.1)" fill="#fff" textLength="750">informational</text></g></svg>

After

Width:  |  Height:  |  Size: 939 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="20" role="img" aria-label="ラベル: メッセージ"><title>ラベル: メッセージ</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="106" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="42" height="20" fill="#555"/><rect x="42" width="64" height="20" fill="#ac3fd4"/><rect width="106" 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="220" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="314">ラベル</text><text x="220" y="140" transform="scale(.1)" fill="#fff" textLength="314">ラベル</text><text aria-hidden="true" x="730" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="522">メッセージ</text><text x="730" y="140" transform="scale(.1)" fill="#fff" textLength="522">メッセージ</text></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="59" height="20" role="img" aria-label="lightgrey"><title>lightgrey</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="59" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#9f9f9f"/><rect x="0" width="59" height="20" fill="#9f9f9f"/><rect width="59" 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="295" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="500">lightgrey</text><text x="295" y="140" transform="scale(.1)" fill="#fff" textLength="500">lightgrey</text></g></svg>

After

Width:  |  Height:  |  Size: 923 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="20" role="img" aria-label="orange"><title>orange</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="49" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#fe7d37"/><rect x="0" width="49" height="20" fill="#fe7d37"/><rect width="49" 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="245" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="400">orange</text><text x="245" y="140" transform="scale(.1)" fill="#fff" textLength="400">orange</text></g></svg>

After

Width:  |  Height:  |  Size: 911 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="20" role="img" aria-label="red"><title>red</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="28" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#e05d44"/><rect x="0" width="28" height="20" fill="#e05d44"/><rect width="28" 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="140" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="190">red</text><text x="140" y="140" transform="scale(.1)" fill="#fff" textLength="190">red</text></g></svg>

After

Width:  |  Height:  |  Size: 899 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="20" role="img" aria-label="success"><title>success</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="53" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#4c14c1"/><rect x="0" width="53" height="20" fill="#4c14c1"/><rect width="53" 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="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="440">success</text><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="440">success</text></g></svg>

After

Width:  |  Height:  |  Size: 915 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="20" role="img" aria-label="yellow"><title>yellow</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="45" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#dfb317"/><rect x="0" width="45" height="20" fill="#dfb317"/><rect width="45" 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="225" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="360">yellow</text><text x="225" y="140" transform="scale(.1)" fill="#fff" textLength="360">yellow</text></g></svg>

After

Width:  |  Height:  |  Size: 911 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="20" role="img" aria-label="yellowgreen"><title>yellowgreen</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="78" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#a4a61d"/><rect x="0" width="78" height="20" fill="#a4a61d"/><rect width="78" 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="390" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="690">yellowgreen</text><text x="390" y="140" transform="scale(.1)" fill="#fff" textLength="690">yellowgreen</text></g></svg>

After

Width:  |  Height:  |  Size: 931 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="20" role="img" aria-label="flat: success"><title>flat: success</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="80" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="53" height="20" fill="#4c1"/><rect width="80" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="525" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">success</text><text x="525" y="140" transform="scale(.1)" fill="#fff" textLength="430">success</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="20" role="img" aria-label="flat: success"><title>flat: success</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="80" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="53" height="20" fill="#4c14c1"/><rect width="80" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="525" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="418">success</text><text x="525" y="140" transform="scale(.1)" fill="#fff" textLength="418">success</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="20" role="img" aria-label="flat: yellow"><title>flat: yellow</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="72" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="45" height="20" fill="#dfb317"/><rect width="72" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="485" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">yellow</text><text x="485" y="140" transform="scale(.1)" fill="#fff" textLength="350">yellow</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="20" role="img" aria-label="flat: yellow"><title>flat: yellow</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="72" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="45" height="20" fill="#dfb317"/><rect width="72" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="485" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">yellow</text><text x="485" y="140" transform="scale(.1)" fill="#fff" textLength="342">yellow</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="105" height="20" role="img" aria-label="flat: yellowgreen"><title>flat: yellowgreen</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="105" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="78" height="20" fill="#a4a61d"/><rect width="105" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="170">flat</text><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="680">yellowgreen</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="680">yellowgreen</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="105" height="20" role="img" aria-label="flat: yellowgreen"><title>flat: yellowgreen</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="105" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="27" height="20" fill="#555"/><rect x="27" width="78" height="20" fill="#a4a61d"/><rect width="105" 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="145" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="171">flat</text><text x="145" y="140" transform="scale(.1)" fill="#fff" textLength="171">flat</text><text aria-hidden="true" x="650" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="656">yellowgreen</text><text x="650" y="140" transform="scale(.1)" fill="#fff" textLength="656">yellowgreen</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="18" role="img" aria-label="plastic: blue"><title>plastic: blue</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="78" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="33" height="18" fill="#007ec6"/><rect width="78" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="605" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="230">blue</text><text x="605" y="130" transform="scale(.1)" fill="#fff" textLength="230">blue</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="18" role="img" aria-label="plastic: blue"><title>plastic: blue</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="78" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="33" height="18" fill="#007ec6"/><rect width="78" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="605" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="228">blue</text><text x="605" y="130" transform="scale(.1)" fill="#fff" textLength="228">blue</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="18" role="img" aria-label="plastic: brightgreen"><title>plastic: brightgreen</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="120" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="75" height="18" fill="#4c1"/><rect width="120" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="815" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="650">brightgreen</text><text x="815" y="130" transform="scale(.1)" fill="#fff" textLength="650">brightgreen</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="18" role="img" aria-label="plastic: brightgreen"><title>plastic: brightgreen</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="120" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="75" height="18" fill="#4c14c1"/><rect width="120" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="815" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="627">brightgreen</text><text x="815" y="130" transform="scale(.1)" fill="#fff" textLength="627">brightgreen</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="18" role="img" aria-label="plastic: critical"><title>plastic: critical</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="91" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="46" height="18" fill="#e05d44"/><rect width="91" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="675" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="360">critical</text><text x="675" y="130" transform="scale(.1)" fill="#fff" textLength="360">critical</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="18" role="img" aria-label="plastic: critical"><title>plastic: critical</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="91" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="46" height="18" fill="#e05d44"/><rect width="91" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="670" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="352">critical</text><text x="670" y="130" transform="scale(.1)" fill="#fff" textLength="352">critical</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="18" role="img" aria-label="plastic: ff69b4"><title>plastic: ff69b4</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="90" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="45" height="18" fill="#ff69b4"/><rect width="90" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="665" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">ff69b4</text><text x="665" y="130" transform="scale(.1)" fill="#fff" textLength="350">ff69b4</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="99" height="18" role="img" aria-label="plastic: #ff69b4"><title>plastic: #ff69b4</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="99" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="54" height="18" fill="#ff69b4"/><rect width="99" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="710" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="428">#ff69b4</text><text x="710" y="130" transform="scale(.1)" fill="#fff" textLength="428">#ff69b4</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87" height="18" role="img" aria-label="plastic: green"><title>plastic: green</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="87" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="42" height="18" fill="#97ca00"/><rect width="87" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="655" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="320">green</text><text x="655" y="130" transform="scale(.1)" fill="#fff" textLength="320">green</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87" height="18" role="img" aria-label="plastic: green"><title>plastic: green</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="87" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="42" height="18" fill="#97ca00"/><rect width="87" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="650" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="314">green</text><text x="650" y="130" transform="scale(.1)" fill="#fff" textLength="314">green</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="109" height="18" role="img" aria-label="plastic: important"><title>plastic: important</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="109" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="64" height="18" fill="#fe7d37"/><rect width="109" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="765" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="540">important</text><text x="765" y="130" transform="scale(.1)" fill="#fff" textLength="540">important</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="109" height="18" role="img" aria-label="plastic: important"><title>plastic: important</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="109" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="64" height="18" fill="#fe7d37"/><rect width="109" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="760" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="522">important</text><text x="760" y="130" transform="scale(.1)" fill="#fff" textLength="522">important</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="98" height="18" role="img" aria-label="plastic: inactive"><title>plastic: inactive</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="98" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="53" height="18" fill="#9f9f9f"/><rect width="98" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="705" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">inactive</text><text x="705" y="130" transform="scale(.1)" fill="#fff" textLength="430">inactive</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="98" height="18" role="img" aria-label="plastic: inactive"><title>plastic: inactive</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="98" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="53" height="18" fill="#9f9f9f"/><rect width="98" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="705" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="418">inactive</text><text x="705" y="130" transform="scale(.1)" fill="#fff" textLength="418">inactive</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="129" height="18" role="img" aria-label="plastic: informational"><title>plastic: informational</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="129" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="84" height="18" fill="#007ec6"/><rect width="129" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="865" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="740">informational</text><text x="865" y="130" transform="scale(.1)" fill="#fff" textLength="740">informational</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="129" height="18" role="img" aria-label="plastic: informational"><title>plastic: informational</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="129" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="84" height="18" fill="#007ec6"/><rect width="129" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="860" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="712">informational</text><text x="860" y="130" transform="scale(.1)" fill="#fff" textLength="712">informational</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="18" role="img" aria-label="ラベル: メッセージ"><title>ラベル: メッセージ</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="106" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="42" height="18" fill="#555"/><rect x="42" width="64" height="18" fill="#ac3fd4"/><rect width="106" height="18" 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="220" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="314">ラベル</text><text x="220" y="130" transform="scale(.1)" fill="#fff" textLength="314">ラベル</text><text aria-hidden="true" x="730" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="522">メッセージ</text><text x="730" y="130" transform="scale(.1)" fill="#fff" textLength="522">メッセージ</text></g></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="18" role="img" aria-label="plastic: lightgrey"><title>plastic: lightgrey</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="104" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="59" height="18" fill="#9f9f9f"/><rect width="104" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="735" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">lightgrey</text><text x="735" y="130" transform="scale(.1)" fill="#fff" textLength="490">lightgrey</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="18" role="img" aria-label="plastic: lightgrey"><title>plastic: lightgrey</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="104" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="59" height="18" fill="#9f9f9f"/><rect width="104" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="735" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="475">lightgrey</text><text x="735" y="130" transform="scale(.1)" fill="#fff" textLength="475">lightgrey</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="18" role="img" aria-label="plastic: orange"><title>plastic: orange</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="94" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="49" height="18" fill="#fe7d37"/><rect width="94" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="685" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="390">orange</text><text x="685" y="130" transform="scale(.1)" fill="#fff" textLength="390">orange</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="18" role="img" aria-label="plastic: orange"><title>plastic: orange</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="94" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="49" height="18" fill="#fe7d37"/><rect width="94" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="685" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="380">orange</text><text x="685" y="130" transform="scale(.1)" fill="#fff" textLength="380">orange</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73" height="18" role="img" aria-label="plastic: red"><title>plastic: red</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="73" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="28" height="18" fill="#e05d44"/><rect width="73" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="585" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="180">red</text><text x="585" y="130" transform="scale(.1)" fill="#fff" textLength="180">red</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="73" height="18" role="img" aria-label="plastic: red"><title>plastic: red</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="73" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="28" height="18" fill="#e05d44"/><rect width="73" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="580" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="180">red</text><text x="580" y="130" transform="scale(.1)" fill="#fff" textLength="180">red</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="18" role="img" aria-label="blue"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="33" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#007ec6"/><rect x="0" width="33" height="18" fill="#007ec6"/><rect width="33" height="18" 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="165" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="240">blue</text><text x="165" y="130" transform="scale(.1)" fill="#fff" textLength="240">blue</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="18" role="img" aria-label="brightgreen"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="75" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#4c14c1"/><rect x="0" width="75" height="18" fill="#4c14c1"/><rect width="75" height="18" 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="375" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="660">brightgreen</text><text x="375" y="130" transform="scale(.1)" fill="#fff" textLength="660">brightgreen</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="18" role="img" aria-label="critical"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="46" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#e05d44"/><rect x="0" width="46" height="18" fill="#e05d44"/><rect width="46" height="18" 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="230" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">critical</text><text x="230" y="130" transform="scale(.1)" fill="#fff" textLength="370">critical</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="18" role="img" aria-label="#ff69b4"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="54" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#ff69b4"/><rect x="0" width="54" height="18" fill="#ff69b4"/><rect width="54" height="18" 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="270" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">#ff69b4</text><text x="270" y="130" transform="scale(.1)" fill="#fff" textLength="450">#ff69b4</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="18" role="img" aria-label="green"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="42" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#97ca00"/><rect x="0" width="42" height="18" fill="#97ca00"/><rect width="42" height="18" 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="210" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">green</text><text x="210" y="130" transform="scale(.1)" fill="#fff" textLength="330">green</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="18" role="img" aria-label="important"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="64" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#fe7d37"/><rect x="0" width="64" height="18" fill="#fe7d37"/><rect width="64" height="18" 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="320" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="550">important</text><text x="320" y="130" transform="scale(.1)" fill="#fff" textLength="550">important</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="18" role="img" aria-label="inactive"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="53" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#9f9f9f"/><rect x="0" width="53" height="18" fill="#9f9f9f"/><rect width="53" height="18" 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="265" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="440">inactive</text><text x="265" y="130" transform="scale(.1)" fill="#fff" textLength="440">inactive</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84" height="18" role="img" aria-label="informational"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="84" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#007ec6"/><rect x="0" width="84" height="18" fill="#007ec6"/><rect width="84" height="18" 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="420" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="750">informational</text><text x="420" y="130" transform="scale(.1)" fill="#fff" textLength="750">informational</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="18" role="img" aria-label="ラベル: メッセージ"><title>ラベル: メッセージ</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="106" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="42" height="18" fill="#555"/><rect x="42" width="64" height="18" fill="#ac3fd4"/><rect width="106" height="18" 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="220" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="314">ラベル</text><text x="220" y="130" transform="scale(.1)" fill="#fff" textLength="314">ラベル</text><text aria-hidden="true" x="730" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="522">メッセージ</text><text x="730" y="130" transform="scale(.1)" fill="#fff" textLength="522">メッセージ</text></g></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="59" height="18" role="img" aria-label="lightgrey"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="59" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#9f9f9f"/><rect x="0" width="59" height="18" fill="#9f9f9f"/><rect width="59" height="18" 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="295" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="500">lightgrey</text><text x="295" y="130" transform="scale(.1)" fill="#fff" textLength="500">lightgrey</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="18" role="img" aria-label="orange"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="49" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#fe7d37"/><rect x="0" width="49" height="18" fill="#fe7d37"/><rect width="49" height="18" 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="245" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="400">orange</text><text x="245" y="130" transform="scale(.1)" fill="#fff" textLength="400">orange</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="18" role="img" aria-label="red"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="28" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#e05d44"/><rect x="0" width="28" height="18" fill="#e05d44"/><rect width="28" height="18" 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="140" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="190">red</text><text x="140" y="130" transform="scale(.1)" fill="#fff" textLength="190">red</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="18" role="img" aria-label="success"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="53" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#4c14c1"/><rect x="0" width="53" height="18" fill="#4c14c1"/><rect width="53" height="18" 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="265" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="440">success</text><text x="265" y="130" transform="scale(.1)" fill="#fff" textLength="440">success</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="18" role="img" aria-label="yellow"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="45" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#dfb317"/><rect x="0" width="45" height="18" fill="#dfb317"/><rect width="45" height="18" 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="225" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="360">yellow</text><text x="225" y="130" transform="scale(.1)" fill="#fff" textLength="360">yellow</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="18" role="img" aria-label="yellowgreen"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="78" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#a4a61d"/><rect x="0" width="78" height="18" fill="#a4a61d"/><rect width="78" height="18" 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="390" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="690">yellowgreen</text><text x="390" y="130" transform="scale(.1)" fill="#fff" textLength="690">yellowgreen</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="98" height="18" role="img" aria-label="plastic: success"><title>plastic: success</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="98" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="53" height="18" fill="#4c1"/><rect width="98" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="705" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">success</text><text x="705" y="130" transform="scale(.1)" fill="#fff" textLength="430">success</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="98" height="18" role="img" aria-label="plastic: success"><title>plastic: success</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="98" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="53" height="18" fill="#4c14c1"/><rect width="98" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="705" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="418">success</text><text x="705" y="130" transform="scale(.1)" fill="#fff" textLength="418">success</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="18" role="img" aria-label="plastic: yellow"><title>plastic: yellow</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="90" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="45" height="18" fill="#dfb317"/><rect width="90" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="665" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">yellow</text><text x="665" y="130" transform="scale(.1)" fill="#fff" textLength="350">yellow</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="18" role="img" aria-label="plastic: yellow"><title>plastic: yellow</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="90" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="45" height="18" fill="#dfb317"/><rect width="90" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="665" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">yellow</text><text x="665" y="130" transform="scale(.1)" fill="#fff" textLength="342">yellow</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="123" height="18" role="img" aria-label="plastic: yellowgreen"><title>plastic: yellowgreen</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="123" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="78" height="18" fill="#a4a61d"/><rect width="123" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">plastic</text><text aria-hidden="true" x="835" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="680">yellowgreen</text><text x="835" y="130" transform="scale(.1)" fill="#fff" textLength="680">yellowgreen</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="123" height="18" role="img" aria-label="plastic: yellowgreen"><title>plastic: yellowgreen</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="123" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="18" fill="#555"/><rect x="45" width="78" height="18" fill="#a4a61d"/><rect width="123" height="18" 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="235" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="342">plastic</text><text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="342">plastic</text><text aria-hidden="true" x="830" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="656">yellowgreen</text><text x="830" y="130" transform="scale(.1)" fill="#fff" textLength="656">yellowgreen</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="20" role="img" aria-label="square: blue"><title>square: blue</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="33" height="20" fill="#007ec6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="635" y="140" transform="scale(.1)" fill="#fff" textLength="230">blue</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="20" role="img" aria-label="square: blue"><title>square: blue</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="33" height="20" fill="#007ec6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="635" y="140" transform="scale(.1)" fill="#fff" textLength="228">blue</text></g></svg>

Before

Width:  |  Height:  |  Size: 620 B

After

Width:  |  Height:  |  Size: 620 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="123" height="20" role="img" aria-label="square: brightgreen"><title>square: brightgreen</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="75" height="20" fill="#4c1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="845" y="140" transform="scale(.1)" fill="#fff" textLength="650">brightgreen</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="123" height="20" role="img" aria-label="square: brightgreen"><title>square: brightgreen</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="75" height="20" fill="#4c14c1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="845" y="140" transform="scale(.1)" fill="#fff" textLength="627">brightgreen</text></g></svg>

Before

Width:  |  Height:  |  Size: 639 B

After

Width:  |  Height:  |  Size: 642 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="20" role="img" aria-label="square: critical"><title>square: critical</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="46" height="20" fill="#e05d44"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="705" y="140" transform="scale(.1)" fill="#fff" textLength="360">critical</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="20" role="img" aria-label="square: critical"><title>square: critical</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="46" height="20" fill="#e05d44"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="700" y="140" transform="scale(.1)" fill="#fff" textLength="352">critical</text></g></svg>

Before

Width:  |  Height:  |  Size: 632 B

After

Width:  |  Height:  |  Size: 632 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93" height="20" role="img" aria-label="square: ff69b4"><title>square: ff69b4</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="45" height="20" fill="#ff69b4"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="350">ff69b4</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="20" role="img" aria-label="square: #ff69b4"><title>square: #ff69b4</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="54" height="20" fill="#ff69b4"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="740" y="140" transform="scale(.1)" fill="#fff" textLength="428">#ff69b4</text></g></svg>

Before

Width:  |  Height:  |  Size: 626 B

After

Width:  |  Height:  |  Size: 630 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="20" role="img" aria-label="square: green"><title>square: green</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="42" height="20" fill="#97ca00"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="685" y="140" transform="scale(.1)" fill="#fff" textLength="320">green</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="20" role="img" aria-label="square: green"><title>square: green</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="42" height="20" fill="#97ca00"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="680" y="140" transform="scale(.1)" fill="#fff" textLength="314">green</text></g></svg>

Before

Width:  |  Height:  |  Size: 623 B

After

Width:  |  Height:  |  Size: 623 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112" height="20" role="img" aria-label="square: important"><title>square: important</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="64" height="20" fill="#fe7d37"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="795" y="140" transform="scale(.1)" fill="#fff" textLength="540">important</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112" height="20" role="img" aria-label="square: important"><title>square: important</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="64" height="20" fill="#fe7d37"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="790" y="140" transform="scale(.1)" fill="#fff" textLength="522">important</text></g></svg>

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 636 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101" height="20" role="img" aria-label="square: inactive"><title>square: inactive</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="53" height="20" fill="#9f9f9f"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="735" y="140" transform="scale(.1)" fill="#fff" textLength="430">inactive</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101" height="20" role="img" aria-label="square: inactive"><title>square: inactive</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="53" height="20" fill="#9f9f9f"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="735" y="140" transform="scale(.1)" fill="#fff" textLength="418">inactive</text></g></svg>

Before

Width:  |  Height:  |  Size: 633 B

After

Width:  |  Height:  |  Size: 633 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="20" role="img" aria-label="square: informational"><title>square: informational</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="84" height="20" fill="#007ec6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="895" y="140" transform="scale(.1)" fill="#fff" textLength="740">informational</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="20" role="img" aria-label="square: informational"><title>square: informational</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="84" height="20" fill="#007ec6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="890" y="140" transform="scale(.1)" fill="#fff" textLength="712">informational</text></g></svg>

Before

Width:  |  Height:  |  Size: 648 B

After

Width:  |  Height:  |  Size: 648 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="20" role="img" aria-label="ラベル: メッセージ"><title>ラベル: メッセージ</title><g shape-rendering="crispEdges"><rect width="42" height="20" fill="#555"/><rect x="42" width="64" height="20" fill="#ac3fd4"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="220" y="140" transform="scale(.1)" fill="#fff" textLength="314">ラベル</text><text x="730" y="140" transform="scale(.1)" fill="#fff" textLength="522">メッセージ</text></g></svg>

After

Width:  |  Height:  |  Size: 663 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="107" height="20" role="img" aria-label="square: lightgrey"><title>square: lightgrey</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="59" height="20" fill="#9f9f9f"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="765" y="140" transform="scale(.1)" fill="#fff" textLength="490">lightgrey</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="107" height="20" role="img" aria-label="square: lightgrey"><title>square: lightgrey</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="59" height="20" fill="#9f9f9f"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="765" y="140" transform="scale(.1)" fill="#fff" textLength="475">lightgrey</text></g></svg>

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 636 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="97" height="20" role="img" aria-label="square: orange"><title>square: orange</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="49" height="20" fill="#fe7d37"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="715" y="140" transform="scale(.1)" fill="#fff" textLength="390">orange</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="97" height="20" role="img" aria-label="square: orange"><title>square: orange</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="49" height="20" fill="#fe7d37"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="715" y="140" transform="scale(.1)" fill="#fff" textLength="380">orange</text></g></svg>

Before

Width:  |  Height:  |  Size: 626 B

After

Width:  |  Height:  |  Size: 626 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="20" role="img" aria-label="square: red"><title>square: red</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="28" height="20" fill="#e05d44"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="615" y="140" transform="scale(.1)" fill="#fff" textLength="180">red</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="20" role="img" aria-label="square: red"><title>square: red</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="28" height="20" fill="#e05d44"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="610" y="140" transform="scale(.1)" fill="#fff" textLength="180">red</text></g></svg>

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 617 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="20" role="img" aria-label="blue"><title>blue</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#007ec6"/><rect x="0" width="33" height="20" fill="#007ec6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="165" y="140" transform="scale(.1)" fill="#fff" textLength="240">blue</text></g></svg>

After

Width:  |  Height:  |  Size: 519 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="20" role="img" aria-label="brightgreen"><title>brightgreen</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#4c14c1"/><rect x="0" width="75" height="20" fill="#4c14c1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="375" y="140" transform="scale(.1)" fill="#fff" textLength="660">brightgreen</text></g></svg>

After

Width:  |  Height:  |  Size: 540 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="20" role="img" aria-label="critical"><title>critical</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#e05d44"/><rect x="0" width="46" height="20" fill="#e05d44"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="230" y="140" transform="scale(.1)" fill="#fff" textLength="370">critical</text></g></svg>

After

Width:  |  Height:  |  Size: 531 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54" height="20" role="img" aria-label="#ff69b4"><title>#ff69b4</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#ff69b4"/><rect x="0" width="54" height="20" fill="#ff69b4"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="270" y="140" transform="scale(.1)" fill="#fff" textLength="450">#ff69b4</text></g></svg>

After

Width:  |  Height:  |  Size: 528 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="20" role="img" aria-label="green"><title>green</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#97ca00"/><rect x="0" width="42" height="20" fill="#97ca00"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="210" y="140" transform="scale(.1)" fill="#fff" textLength="330">green</text></g></svg>

After

Width:  |  Height:  |  Size: 522 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="20" role="img" aria-label="important"><title>important</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#fe7d37"/><rect x="0" width="64" height="20" fill="#fe7d37"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="320" y="140" transform="scale(.1)" fill="#fff" textLength="550">important</text></g></svg>

After

Width:  |  Height:  |  Size: 534 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="20" role="img" aria-label="inactive"><title>inactive</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#9f9f9f"/><rect x="0" width="53" height="20" fill="#9f9f9f"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="440">inactive</text></g></svg>

After

Width:  |  Height:  |  Size: 531 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84" height="20" role="img" aria-label="informational"><title>informational</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#007ec6"/><rect x="0" width="84" height="20" fill="#007ec6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="420" y="140" transform="scale(.1)" fill="#fff" textLength="750">informational</text></g></svg>

After

Width:  |  Height:  |  Size: 546 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="106" height="20" role="img" aria-label="ラベル: メッセージ"><title>ラベル: メッセージ</title><g shape-rendering="crispEdges"><rect width="42" height="20" fill="#555"/><rect x="42" width="64" height="20" fill="#ac3fd4"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="220" y="140" transform="scale(.1)" fill="#fff" textLength="314">ラベル</text><text x="730" y="140" transform="scale(.1)" fill="#fff" textLength="522">メッセージ</text></g></svg>

After

Width:  |  Height:  |  Size: 663 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="59" height="20" role="img" aria-label="lightgrey"><title>lightgrey</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#9f9f9f"/><rect x="0" width="59" height="20" fill="#9f9f9f"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="295" y="140" transform="scale(.1)" fill="#fff" textLength="500">lightgrey</text></g></svg>

After

Width:  |  Height:  |  Size: 534 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="20" role="img" aria-label="orange"><title>orange</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#fe7d37"/><rect x="0" width="49" height="20" fill="#fe7d37"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="245" y="140" transform="scale(.1)" fill="#fff" textLength="400">orange</text></g></svg>

After

Width:  |  Height:  |  Size: 525 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="20" role="img" aria-label="red"><title>red</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#e05d44"/><rect x="0" width="28" height="20" fill="#e05d44"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="140" y="140" transform="scale(.1)" fill="#fff" textLength="190">red</text></g></svg>

After

Width:  |  Height:  |  Size: 516 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="20" role="img" aria-label="success"><title>success</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#4c14c1"/><rect x="0" width="53" height="20" fill="#4c14c1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="440">success</text></g></svg>

After

Width:  |  Height:  |  Size: 528 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="20" role="img" aria-label="yellow"><title>yellow</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#dfb317"/><rect x="0" width="45" height="20" fill="#dfb317"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="225" y="140" transform="scale(.1)" fill="#fff" textLength="360">yellow</text></g></svg>

After

Width:  |  Height:  |  Size: 525 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="20" role="img" aria-label="yellowgreen"><title>yellowgreen</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="#a4a61d"/><rect x="0" width="78" height="20" fill="#a4a61d"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="390" y="140" transform="scale(.1)" fill="#fff" textLength="690">yellowgreen</text></g></svg>

After

Width:  |  Height:  |  Size: 540 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101" height="20" role="img" aria-label="square: success"><title>square: success</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="53" height="20" fill="#4c1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="735" y="140" transform="scale(.1)" fill="#fff" textLength="430">success</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101" height="20" role="img" aria-label="square: success"><title>square: success</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="53" height="20" fill="#4c14c1"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="735" y="140" transform="scale(.1)" fill="#fff" textLength="418">success</text></g></svg>

Before

Width:  |  Height:  |  Size: 627 B

After

Width:  |  Height:  |  Size: 630 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93" height="20" role="img" aria-label="square: yellow"><title>square: yellow</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="45" height="20" fill="#dfb317"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="350">yellow</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93" height="20" role="img" aria-label="square: yellow"><title>square: yellow</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="45" height="20" fill="#dfb317"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="342">yellow</text></g></svg>

Before

Width:  |  Height:  |  Size: 626 B

After

Width:  |  Height:  |  Size: 626 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="126" height="20" role="img" aria-label="square: yellowgreen"><title>square: yellowgreen</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="78" height="20" fill="#a4a61d"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="255" y="140" transform="scale(.1)" fill="#fff" textLength="380">square</text><text x="865" y="140" transform="scale(.1)" fill="#fff" textLength="680">yellowgreen</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="126" height="20" role="img" aria-label="square: yellowgreen"><title>square: yellowgreen</title><g shape-rendering="crispEdges"><rect width="48" height="20" fill="#555"/><rect x="48" width="78" height="20" fill="#a4a61d"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="250" y="140" transform="scale(.1)" fill="#fff" textLength="370">square</text><text x="860" y="140" transform="scale(.1)" fill="#fff" textLength="656">yellowgreen</text></g></svg>

Before

Width:  |  Height:  |  Size: 642 B

After

Width:  |  Height:  |  Size: 642 B

@ -17,7 +17,7 @@ jobs:
strategy:
matrix:
go: [ '1.15.x', '1.16.x' ]
go: [ '1.16.x', '1.17.x' ]
steps:
- name: Set up Go
@ -106,16 +106,8 @@ jobs:
working-directory: ${{env.SRC_DIR}}
run: make deps
- name: Install Aligo
working-directory: ${{env.SRC_DIR}}
run: |
wget https://apps.kaos.st/aligo/latest/linux/x86_64/aligo
chmod +x aligo
- name: Print Aligo version info
working-directory: ${{env.SRC_DIR}}
run: ./aligo --version
- name: Check Go structs alignment info
working-directory: ${{env.SRC_DIR}}
run: ./aligo check ./...
- name: Check Golang sources with Aligo
uses: essentialkaos/aligo-action@v1
with:
path: ${{env.SRC_DIR}}
files: ./...

@ -18,7 +18,7 @@
### Installation
Make sure you have a working Go 1.15+ workspace (_[instructions](https://golang.org/doc/install)_), then:
Make sure you have a working Go 1.16+ workspace (_[instructions](https://golang.org/doc/install)_), then:
````bash
go get -d pkg.re/essentialkaos/go-badge.v1
@ -57,22 +57,25 @@ func main() {
### Examples
| Flat | Flat Square | Plastic |
|------|-------------|---------|
| ![flat](.github/images/flat_brightgreen.svg) | ![square](.github/images/square_brightgreen.svg) | ![plastic](.github/images/plastic_brightgreen.svg) |
| ![flat](.github/images/flat_green.svg) | ![square](.github/images/square_green.svg) | ![plastic](.github/images/plastic_green.svg) |
| ![flat](.github/images/flat_yellowgreen.svg) | ![square](.github/images/square_yellowgreen.svg) | ![plastic](.github/images/plastic_yellowgreen.svg) |
| ![flat](.github/images/flat_yellow.svg) | ![square](.github/images/square_yellow.svg) | ![plastic](.github/images/plastic_yellow.svg) |
| ![flat](.github/images/flat_orange.svg) | ![square](.github/images/square_orange.svg) | ![plastic](.github/images/plastic_orange.svg) |
| ![flat](.github/images/flat_red.svg) | ![square](.github/images/square_red.svg) | ![plastic](.github/images/plastic_red.svg) |
| ![flat](.github/images/flat_blue.svg) | ![square](.github/images/square_blue.svg) | ![plastic](.github/images/plastic_blue.svg) |
| ![flat](.github/images/flat_lightgrey.svg) | ![square](.github/images/square_lightgrey.svg) | ![plastic](.github/images/plastic_lightgrey.svg) |
| ![flat](.github/images/flat_success.svg) | ![square](.github/images/square_success.svg) | ![plastic](.github/images/plastic_success.svg) |
| ![flat](.github/images/flat_important.svg) | ![square](.github/images/square_important.svg) | ![plastic](.github/images/plastic_important.svg) |
| ![flat](.github/images/flat_critical.svg) | ![square](.github/images/square_critical.svg) | ![plastic](.github/images/plastic_critical.svg) |
| ![flat](.github/images/flat_informational.svg) | ![square](.github/images/square_informational.svg) | ![plastic](.github/images/plastic_informational.svg) |
| ![flat](.github/images/flat_inactive.svg) | ![square](.github/images/square_inactive.svg) | ![plastic](.github/images/plastic_inactive.svg) |
| ![flat](.github/images/flat_custom.svg) | ![square](.github/images/square_custom.svg) | ![plastic](.github/images/plastic_custom.svg) |
| Flat | Flat Square | Plastic | Flat (Simple) | Flat Square (Simple) | Plastic (Simple) |
|------|-------------|---------|---------------|----------------------|------------------|
| ![flat](.github/images/flat_flat_brightgreen.svg) | ![square](.github/images/square_flat_brightgreen.svg) | ![plastic](.github/images/plastic_flat_brightgreen.svg) | ![flat-simple](.github/images/flat_simple_flat_brightgreen.svg) | ![square-simple](.github/images/square_simple_flat_brightgreen.svg) | ![plastic-simple](.github/images/plastic_simple_flat_brightgreen.svg) |
| ![flat](.github/images/flat_flat_green.svg) | ![square](.github/images/square_flat_green.svg) | ![plastic](.github/images/plastic_flat_green.svg) | ![flat-simple](.github/images/flat_simple_flat_green.svg) | ![square-simple](.github/images/square_simple_flat_green.svg) | ![plastic-simple](.github/images/plastic_simple_flat_green.svg) |
| ![flat](.github/images/flat_flat_yellowgreen.svg) | ![square](.github/images/square_flat_yellowgreen.svg) | ![plastic](.github/images/plastic_flat_yellowgreen.svg) | ![flat-simple](.github/images/flat_simple_flat_yellowgreen.svg) | ![square-simple](.github/images/square_simple_flat_yellowgreen.svg) | ![plastic-simple](.github/images/plastic_simple_flat_yellowgreen.svg) |
| ![flat](.github/images/flat_flat_yellow.svg) | ![square](.github/images/square_flat_yellow.svg) | ![plastic](.github/images/plastic_flat_yellow.svg) | ![flat-simple](.github/images/flat_simple_flat_yellow.svg) | ![square-simple](.github/images/square_simple_flat_yellow.svg) | ![plastic-simple](.github/images/plastic_simple_flat_yellow.svg) |
| ![flat](.github/images/flat_flat_orange.svg) | ![square](.github/images/square_flat_orange.svg) | ![plastic](.github/images/plastic_flat_orange.svg) | ![flat-simple](.github/images/flat_simple_flat_orange.svg) | ![square-simple](.github/images/square_simple_flat_orange.svg) | ![plastic-simple](.github/images/plastic_simple_flat_orange.svg) |
| ![flat](.github/images/flat_flat_red.svg) | ![square](.github/images/square_flat_red.svg) | ![plastic](.github/images/plastic_flat_red.svg) | ![flat-simple](.github/images/flat_simple_flat_red.svg) | ![square-simple](.github/images/square_simple_flat_red.svg) | ![plastic-simple](.github/images/plastic_simple_flat_red.svg) |
| ![flat](.github/images/flat_flat_blue.svg) | ![square](.github/images/square_flat_blue.svg) | ![plastic](.github/images/plastic_flat_blue.svg) | ![flat-simple](.github/images/flat_simple_flat_blue.svg) | ![square-simple](.github/images/square_simple_flat_blue.svg) | ![plastic-simple](.github/images/plastic_simple_flat_blue.svg) |
| ![flat](.github/images/flat_flat_lightgrey.svg) | ![square](.github/images/square_flat_lightgrey.svg) | ![plastic](.github/images/plastic_flat_lightgrey.svg) | ![flat-simple](.github/images/flat_simple_flat_lightgrey.svg) | ![square-simple](.github/images/square_simple_flat_lightgrey.svg) | ![plastic-simple](.github/images/plastic_simple_flat_lightgrey.svg) |
| ![flat](.github/images/flat_flat_success.svg) | ![square](.github/images/square_flat_success.svg) | ![plastic](.github/images/plastic_flat_success.svg) | ![flat-simple](.github/images/flat_simple_flat_success.svg) | ![square-simple](.github/images/square_simple_flat_success.svg) | ![plastic-simple](.github/images/plastic_simple_flat_success.svg) |
| ![flat](.github/images/flat_flat_important.svg) | ![square](.github/images/square_flat_important.svg) | ![plastic](.github/images/plastic_flat_important.svg) | ![flat-simple](.github/images/flat_simple_flat_important.svg) | ![square-simple](.github/images/square_simple_flat_important.svg) | ![plastic-simple](.github/images/plastic_simple_flat_important.svg) |
| ![flat](.github/images/flat_flat_critical.svg) | ![square](.github/images/square_flat_critical.svg) | ![plastic](.github/images/plastic_flat_critical.svg) | ![flat-simple](.github/images/flat_simple_flat_critical.svg) | ![square-simple](.github/images/square_simple_flat_critical.svg) | ![plastic-simple](.github/images/plastic_simple_flat_critical.svg) |
| ![flat](.github/images/flat_flat_informational.svg) | ![square](.github/images/square_flat_informational.svg) | ![plastic](.github/images/plastic_flat_informational.svg) | ![flat-simple](.github/images/flat_simple_flat_informational.svg) | ![square-simple](.github/images/square_simple_flat_informational.svg) | ![plastic-simple](.github/images/plastic_simple_flat_informational.svg) |
| ![flat](.github/images/flat_flat_inactive.svg) | ![square](.github/images/square_flat_inactive.svg) | ![plastic](.github/images/plastic_flat_inactive.svg) | ![flat-simple](.github/images/flat_simple_flat_inactive.svg) | ![square-simple](.github/images/square_simple_flat_inactive.svg) | ![plastic-simple](.github/images/plastic_simple_flat_inactive.svg) |
| ![flat](.github/images/flat_flat_custom.svg) | ![square](.github/images/square_flat_custom.svg) | ![plastic](.github/images/plastic_flat_custom.svg) | ![flat-simple](.github/images/flat_simple_flat_custom.svg) | ![square-simple](.github/images/square_simple_flat_custom.svg) | ![plastic-simple](.github/images/plastic_simple_flat_custom.svg) |
| ![flat](.github/images/flat_flat_japanese.svg) | ![square](.github/images/square_flat_japanese.svg) | ![plastic](.github/images/plastic_flat_japanese.svg) | ![flat-simple](.github/images/flat_simple_flat_japanese.svg) | ![square-simple](.github/images/square_simple_flat_japanese.svg) | ![plastic-simple](.github/images/plastic_simple_flat_japanese.svg) |
_All badges are generated with the latest version of the package._
### Build Status

@ -10,6 +10,7 @@ package badge
import (
"io/ioutil"
"math"
"strconv"
"strings"
@ -20,6 +21,9 @@ import (
// ////////////////////////////////////////////////////////////////////////////////// //
// VERSION is current package version
const VERSION = "1.2.0"
const (
COLOR_BLUE = "#007ec6"
COLOR_BRIGHTGREEN = "#4c1"
@ -45,11 +49,17 @@ const (
// ////////////////////////////////////////////////////////////////////////////////// //
const _TEMPLATE_PLASTIC = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="18" role="img" aria-label="{LABEL}: {MESSAGE}"><title>{LABEL}: {MESSAGE}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="{WIDTH}" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="{LABEL_WIDTH}" height="18" fill="#555"/><rect x="{LABEL_WIDTH}" width="{MESSAGE_WIDTH}" height="18" fill="{COLOR}"/><rect width="{WIDTH}" height="18" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text aria-hidden="true" x="{LABEL_X}" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="{LABEL_LENGTH}">{LABEL}</text><text x="{LABEL_X}" y="130" transform="scale(.1)" fill="#fff" textLength="{LABEL_LENGTH}">{LABEL}</text><text aria-hidden="true" x="{MESSAGE_X}" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text><text x="{MESSAGE_X}" y="130" transform="scale(.1)" fill="#fff" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_PLASTIC = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="18" role="img" aria-label="{LABEL}: {MESSAGE}"><title>{LABEL}: {MESSAGE}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="{WIDTH}" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="{LABEL_WIDTH}" height="18" fill="#555"/><rect x="{LABEL_WIDTH}" width="{MESSAGE_WIDTH}" height="18" fill="{COLOR}"/><rect width="{WIDTH}" height="18" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text aria-hidden="true" x="{LABEL_X}" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="{LABEL_LENGTH}">{LABEL}</text><text x="{LABEL_X}" y="130" transform="scale(.1)" fill="#fff" textLength="{LABEL_LENGTH}">{LABEL}</text><text aria-hidden="true" x="{MESSAGE_X}" y="140" fill="{MESSAGE_SHADOW}" fill-opacity=".3" transform="scale(.1)" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text><text x="{MESSAGE_X}" y="130" transform="scale(.1)" fill="{MESSAGE_COLOR}" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_FLAT = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="20" role="img" aria-label="{LABEL}: {MESSAGE}"><title>{LABEL}: {MESSAGE}</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="{WIDTH}" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="{LABEL_WIDTH}" height="20" fill="#555"/><rect x="{LABEL_WIDTH}" width="{MESSAGE_WIDTH}" height="20" fill="{COLOR}"/><rect width="{WIDTH}" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text aria-hidden="true" x="{LABEL_X}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="{LABEL_LENGTH}">{LABEL}</text><text x="{LABEL_X}" y="140" transform="scale(.1)" fill="#fff" textLength="{LABEL_LENGTH}">{LABEL}</text><text aria-hidden="true" x="{MESSAGE_X}" y="150" fill="{MESSAGE_SHADOW}" fill-opacity=".3" transform="scale(.1)" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text><text x="{MESSAGE_X}" y="140" transform="scale(.1)" fill="{MESSAGE_COLOR}" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_FLAT_SQUARE = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="20" role="img" aria-label="{LABEL}: {MESSAGE}"><title>{LABEL}: {MESSAGE}</title><g shape-rendering="crispEdges"><rect width="{LABEL_WIDTH}" height="20" fill="#555"/><rect x="{LABEL_WIDTH}" width="{MESSAGE_WIDTH}" height="20" fill="{COLOR}"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text x="{LABEL_X}" y="140" transform="scale(.1)" fill="#fff" textLength="{LABEL_LENGTH}">{LABEL}</text><text x="{MESSAGE_X}" y="140" transform="scale(.1)" fill="{MESSAGE_COLOR}" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_FLAT_SIMPLE = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="20" role="img" aria-label="{MESSAGE}"><title>{MESSAGE}</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="{WIDTH}" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="{COLOR}"/><rect x="0" width="{WIDTH}" height="20" fill="{COLOR}"/><rect width="{WIDTH}" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text aria-hidden="true" x="{MESSAGE_X}" y="150" fill="{MESSAGE_SHADOW}" fill-opacity=".3" transform="scale(.1)" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text><text x="{MESSAGE_X}" y="140" transform="scale(.1)" fill="{MESSAGE_COLOR}" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_FLAT = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="20" role="img" aria-label="{LABEL}: {MESSAGE}"><title>{LABEL}: {MESSAGE}</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="{WIDTH}" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="{LABEL_WIDTH}" height="20" fill="#555"/><rect x="{LABEL_WIDTH}" width="{MESSAGE_WIDTH}" height="20" fill="{COLOR}"/><rect width="{WIDTH}" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text aria-hidden="true" x="{LABEL_X}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="{LABEL_LENGTH}">{LABEL}</text><text x="{LABEL_X}" y="140" transform="scale(.1)" fill="#fff" textLength="{LABEL_LENGTH}">{LABEL}</text><text aria-hidden="true" x="{MESSAGE_X}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text><text x="{MESSAGE_X}" y="140" transform="scale(.1)" fill="#fff" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_PLASTIC_SIMPLE = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="18" role="img" aria-label="{MESSAGE}"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="{WIDTH}" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="{COLOR}"/><rect x="0" width="{WIDTH}" height="18" fill="{COLOR}"/><rect width="{WIDTH}" height="18" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text aria-hidden="true" x="{MESSAGE_X}" y="140" fill="{MESSAGE_SHADOW}" fill-opacity=".3" transform="scale(.1)" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text><text x="{MESSAGE_X}" y="130" transform="scale(.1)" fill="{MESSAGE_COLOR}" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_FLAT_SQUARE = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="20" role="img" aria-label="{LABEL}: {MESSAGE}"><title>{LABEL}: {MESSAGE}</title><g shape-rendering="crispEdges"><rect width="{LABEL_WIDTH}" height="20" fill="#555"/><rect x="{LABEL_WIDTH}" width="{MESSAGE_WIDTH}" height="20" fill="{COLOR}"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text x="{LABEL_X}" y="140" transform="scale(.1)" fill="#fff" textLength="{LABEL_LENGTH}">{LABEL}</text><text x="{MESSAGE_X}" y="140" transform="scale(.1)" fill="#fff" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
const _TEMPLATE_FLAT_SQUARE_SIMPLE = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{WIDTH}" height="20" role="img" aria-label="{MESSAGE}"><title>{MESSAGE}</title><g shape-rendering="crispEdges"><rect width="0" height="20" fill="{COLOR}"/><rect x="0" width="{WIDTH}" height="20" fill="{COLOR}"/></g><g fill="#fff" text-anchor="middle" font-family="{FONT},Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="{FONT_SIZE}"><text x="{MESSAGE_X}" y="140" transform="scale(.1)" fill="{MESSAGE_COLOR}" textLength="{MESSAGE_LENGTH}">{MESSAGE}</text></g></svg>`
// ////////////////////////////////////////////////////////////////////////////////// //
@ -100,48 +110,158 @@ func NewGenerator(fontFile string, fontSize int) (*Generator, error) {
// GeneratePlastic generates SVG badge in plastic style
func (g *Generator) GeneratePlastic(label, message, color string) []byte {
if label == "" {
return g.generateBadgeSimple(_TEMPLATE_PLASTIC_SIMPLE, message, color)
}
return g.generateBadge(_TEMPLATE_PLASTIC, label, message, color)
}
// GenerateFlat generates SVG badge in flat style
func (g *Generator) GenerateFlat(label, message, color string) []byte {
if label == "" {
return g.generateBadgeSimple(_TEMPLATE_FLAT_SIMPLE, message, color)
}
return g.generateBadge(_TEMPLATE_FLAT, label, message, color)
}
// GenerateFlatSquare generates SVG badge in flat-square style
func (g *Generator) GenerateFlatSquare(label, message, color string) []byte {
if label == "" {
return g.generateBadgeSimple(_TEMPLATE_FLAT_SQUARE_SIMPLE, message, color)
}
return g.generateBadge(_TEMPLATE_FLAT_SQUARE, label, message, color)
}
// GeneratePlasticSimple generates SVG simple badge in plastic style
func (g *Generator) GeneratePlasticSimple(message, color string) []byte {
return g.generateBadgeSimple(_TEMPLATE_PLASTIC_SIMPLE, message, color)
}
// GenerateFlatSimple generates SVG simple badge in flat style
func (g *Generator) GenerateFlatSimple(message, color string) []byte {
return g.generateBadgeSimple(_TEMPLATE_FLAT_SIMPLE, message, color)
}
// GenerateFlatSquareSimple generates SVG simple badge in flat-square style
func (g *Generator) GenerateFlatSquareSimple(message, color string) []byte {
return g.generateBadgeSimple(_TEMPLATE_FLAT_SQUARE_SIMPLE, message, color)
}
// ////////////////////////////////////////////////////////////////////////////////// //
// generateBadge generates badge with given template
func (g *Generator) generateBadge(template, label, message, color string) []byte {
if !strings.HasPrefix(color, "#") {
color = "#" + color
}
color = formatColor(color)
lW := int(g.drawer.MeasureString(label)>>6) + g.Offset
mW := int(g.drawer.MeasureString(message)>>6) + g.Offset
gF := float64(g.Offset)
lW := float64(g.drawer.MeasureString(label)>>6) + gF
mW := float64(g.drawer.MeasureString(message)>>6) + gF
fW := lW + mW
lX := ((lW/2 + 1) * 10) + 5
mX := ((lW + (mW / 2) - 1) * 10) + 5
lL := int(float64(lW-10) * (10.0 + g.Spacing))
mL := int(float64(mW-10) * (10.0 + g.Spacing))
lX := (lW/2 + 1) * 10
mX := (lW + (mW / 2) - 1) * 10
lL := (lW - gF) * (10.0 + g.Spacing - 0.5)
mL := (mW - gF) * (10.0 + g.Spacing - 0.5)
fS := g.fontSize * 10
mC, mS := getMessageColors(color)
badge := strings.ReplaceAll(template, "{LABEL}", label)
badge = strings.ReplaceAll(badge, "{MESSAGE}", message)
badge = strings.ReplaceAll(badge, "{COLOR}", color)
badge = strings.ReplaceAll(badge, "{WIDTH}", strconv.Itoa(fW))
badge = strings.ReplaceAll(badge, "{LABEL_WIDTH}", strconv.Itoa(lW))
badge = strings.ReplaceAll(badge, "{MESSAGE_WIDTH}", strconv.Itoa(mW))
badge = strings.ReplaceAll(badge, "{LABEL_X}", strconv.Itoa(lX))
badge = strings.ReplaceAll(badge, "{MESSAGE_X}", strconv.Itoa(mX))
badge = strings.ReplaceAll(badge, "{LABEL_LENGTH}", strconv.Itoa(lL))
badge = strings.ReplaceAll(badge, "{MESSAGE_LENGTH}", strconv.Itoa(mL))
badge = strings.ReplaceAll(badge, "{COLOR}", "#"+color)
badge = strings.ReplaceAll(badge, "{WIDTH}", formatFloat(fW))
badge = strings.ReplaceAll(badge, "{LABEL_WIDTH}", formatFloat(lW))
badge = strings.ReplaceAll(badge, "{MESSAGE_WIDTH}", formatFloat(mW))
badge = strings.ReplaceAll(badge, "{LABEL_X}", formatFloat(lX))
badge = strings.ReplaceAll(badge, "{MESSAGE_X}", formatFloat(mX))
badge = strings.ReplaceAll(badge, "{LABEL_LENGTH}", formatFloat(lL))
badge = strings.ReplaceAll(badge, "{MESSAGE_LENGTH}", formatFloat(mL))
badge = strings.ReplaceAll(badge, "{MESSAGE_COLOR}", mC)
badge = strings.ReplaceAll(badge, "{MESSAGE_SHADOW}", mS)
badge = strings.ReplaceAll(badge, "{FONT}", g.fontName)
badge = strings.ReplaceAll(badge, "{FONT_SIZE}", strconv.Itoa(fS))
return []byte(badge)
}
// generateBadgeSimple generates badge with given template
func (g *Generator) generateBadgeSimple(template, message, color string) []byte {
color = formatColor(color)
gF := float64(g.Offset)
fW := float64(g.drawer.MeasureString(message)>>6) + gF
mX := (fW / 2) * 10
mL := (fW - gF) * (10.0 + g.Spacing)
fS := g.fontSize * 10
mC, mS := getMessageColors(color)
badge := strings.ReplaceAll(template, "{MESSAGE}", message)
badge = strings.ReplaceAll(badge, "{COLOR}", "#"+color)
badge = strings.ReplaceAll(badge, "{WIDTH}", strconv.Itoa(int(fW)))
badge = strings.ReplaceAll(badge, "{MESSAGE_X}", strconv.Itoa(int(mX)))
badge = strings.ReplaceAll(badge, "{MESSAGE_LENGTH}", strconv.Itoa(int(mL)))
badge = strings.ReplaceAll(badge, "{MESSAGE_COLOR}", mC)
badge = strings.ReplaceAll(badge, "{MESSAGE_SHADOW}", mS)
badge = strings.ReplaceAll(badge, "{FONT}", g.fontName)
badge = strings.ReplaceAll(badge, "{FONT_SIZE}", strconv.Itoa(fS))
return []byte(badge)
}
// ////////////////////////////////////////////////////////////////////////////////// //
func formatColor(c string) string {
if strings.HasPrefix(c, "#") {
c = strings.TrimLeft(c, "#")
}
// Short hex
if len(c) == 3 {
c = c + c
}
return c
}
// formatFloat formats float values
func formatFloat(v float64) string {
return strconv.FormatFloat(v, 'f', 0, 64)
}
// getMessageColors returns message text and shadow colors based on color of badge
func getMessageColors(badgeColor string) (string, string) {
c := parseColor(badgeColor)
if c == 0 || calcLuminance(c) < 0.5 {
return "#fff", "#010101"
}
return "#333", "#ccc"
}
// parseColor parses hex color
func parseColor(c string) int {
i, _ := strconv.ParseInt(c, 16, 64)
return int(i)
}
// calcLuminance calculates relative luminance
func calcLuminance(color int) float64 {
r := calcLumColor(float64(color>>16&0xFF) / 255)
g := calcLumColor(float64(color>>8&0xFF) / 255)
b := calcLumColor(float64(color&0xFF) / 255)
return 0.2126*r + 0.7152*g + 0.0722*b
}
// calcLumColor calculates luminance for one color
func calcLumColor(c float64) float64 {
if c <= 0.03928 {
return c / 12.92
}
return math.Pow(((c + 0.055) / 1.055), 2.4)
}

@ -54,9 +54,9 @@ func (s *BadgeSuite) TestPlastic(c *C) {
c.Fatal(err.Error())
}
ourBadge := s.generator.GeneratePlastic("test1", "good", "ff69b4")
ourBadge := s.generator.GeneratePlastic("label", "message", COLOR_RED)
c.Assert(ourBadge, DeepEquals, srcBadge)
c.Assert(string(ourBadge), Equals, string(srcBadge))
}
func (s *BadgeSuite) TestFlat(c *C) {
@ -66,19 +66,90 @@ func (s *BadgeSuite) TestFlat(c *C) {
c.Fatal(err.Error())
}
ourBadge := s.generator.GenerateFlat("test1", "good", "ff69b4")
ourBadge := s.generator.GenerateFlat("label", "message", COLOR_RED)
c.Assert(ourBadge, DeepEquals, srcBadge)
c.Assert(string(ourBadge), Equals, string(srcBadge))
}
func (s *BadgeSuite) TestFlatSquare(c *C) {
srcBadge, err := ioutil.ReadFile("testdata/flat-square.svg")
srcBadge, err := ioutil.ReadFile("testdata/square.svg")
if err != nil {
c.Fatal(err.Error())
}
ourBadge := s.generator.GenerateFlatSquare("test1", "good", "ff69b4")
ourBadge := s.generator.GenerateFlatSquare("label", "message", COLOR_RED)
c.Assert(ourBadge, DeepEquals, srcBadge)
c.Assert(string(ourBadge), Equals, string(srcBadge))
}
func (s *BadgeSuite) TestPlasticSimple(c *C) {
srcBadge, err := ioutil.ReadFile("testdata/plastic_simple.svg")
if err != nil {
c.Fatal(err.Error())
}
ourBadge := s.generator.GeneratePlastic("", "message", COLOR_RED)
c.Assert(string(ourBadge), Equals, string(srcBadge))
ourBadge = s.generator.GeneratePlasticSimple("message", COLOR_RED)
c.Assert(string(ourBadge), Equals, string(srcBadge))
}
func (s *BadgeSuite) TestFlatSimple(c *C) {
srcBadge, err := ioutil.ReadFile("testdata/flat_simple.svg")
if err != nil {
c.Fatal(err.Error())
}
ourBadge := s.generator.GenerateFlat("", "message", COLOR_RED)
c.Assert(string(ourBadge), Equals, string(srcBadge))
ourBadge = s.generator.GenerateFlatSimple("message", COLOR_RED)
c.Assert(string(ourBadge), Equals, string(srcBadge))
}
func (s *BadgeSuite) TestFlatSquareSimple(c *C) {
srcBadge, err := ioutil.ReadFile("testdata/square_simple.svg")
if err != nil {
c.Fatal(err.Error())
}
ourBadge := s.generator.GenerateFlatSquare("", "message", COLOR_RED)
c.Assert(string(ourBadge), Equals, string(srcBadge))
ourBadge = s.generator.GenerateFlatSquareSimple("message", COLOR_RED)
c.Assert(string(ourBadge), Equals, string(srcBadge))
}
func (s *BadgeSuite) TestBlackAndWhite(c *C) {
bb, err := ioutil.ReadFile("testdata/black.svg")
if err != nil {
c.Fatal(err.Error())
}
wb, err := ioutil.ReadFile("testdata/white.svg")
if err != nil {
c.Fatal(err.Error())
}
ourBadge := s.generator.GenerateFlatSimple("message", "#FFFFFF")
c.Assert(string(ourBadge), Equals, string(wb))
ourBadge = s.generator.GenerateFlatSimple("message", "#000000")
c.Assert(string(ourBadge), Equals, string(bb))
}
func (s *BadgeSuite) TestAux(c *C) {
c.Assert(formatColor("000000"), Equals, "000000")
c.Assert(formatColor("#000000"), Equals, "000000")
c.Assert(formatColor("#000"), Equals, "000000")
c.Assert(calcLumColor(0.7), Equals, 0.4479884124418833)
c.Assert(calcLumColor(0.01), Equals, 0.0007739938080495357)
}

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="20" role="img" aria-label="message"><title>message</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="60" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#000000"/><rect x="0" width="60" height="20" fill="#000000"/><rect width="60" 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="300" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="510">message</text><text x="300" y="140" transform="scale(.1)" fill="#fff" textLength="510">message</text></g></svg>

After

Width:  |  Height:  |  Size: 915 B

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="74" height="20" role="img" aria-label="test1: good"><title>test1: good</title><g shape-rendering="crispEdges"><rect width="37" height="20" fill="#555"/><rect x="37" width="37" height="20" fill="#ff69b4"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">test1</text><text x="545" y="140" transform="scale(.1)" fill="#fff" textLength="270">good</text></g></svg>

Before

Width:  |  Height:  |  Size: 617 B

2
testdata/flat.svg vendored

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="74" height="20" role="img" aria-label="test1: good"><title>test1: good</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="74" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="37" height="20" fill="#ff69b4"/><rect width="74" 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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">test1</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="270">test1</text><text aria-hidden="true" x="545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">good</text><text x="545" y="140" transform="scale(.1)" fill="#fff" textLength="270">good</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="20" role="img" aria-label="label: message"><title>label: message</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="96" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="36" height="20" fill="#555"/><rect x="36" width="60" height="20" fill="#e05d44"/><rect width="96" 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="190" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="256">label</text><text x="190" y="140" transform="scale(.1)" fill="#fff" textLength="256">label</text><text aria-hidden="true" x="650" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="484">message</text><text x="650" y="140" transform="scale(.1)" fill="#fff" textLength="484">message</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="20" role="img" aria-label="message"><title>message</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="60" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#e05d44"/><rect x="0" width="60" height="20" fill="#e05d44"/><rect width="60" 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="300" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="510">message</text><text x="300" y="140" transform="scale(.1)" fill="#fff" textLength="510">message</text></g></svg>

After

Width:  |  Height:  |  Size: 915 B

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="74" height="18" role="img" aria-label="test1: good"><title>test1: good</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="74" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="37" height="18" fill="#555"/><rect x="37" width="37" height="18" fill="#ff69b4"/><rect width="74" height="18" 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="195" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">test1</text><text x="195" y="130" transform="scale(.1)" fill="#fff" textLength="270">test1</text><text aria-hidden="true" x="545" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">good</text><text x="545" y="130" transform="scale(.1)" fill="#fff" textLength="270">good</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="18" role="img" aria-label="label: message"><title>label: message</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="96" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="36" height="18" fill="#555"/><rect x="36" width="60" height="18" fill="#e05d44"/><rect width="96" height="18" 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="190" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="256">label</text><text x="190" y="130" transform="scale(.1)" fill="#fff" textLength="256">label</text><text aria-hidden="true" x="650" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="484">message</text><text x="650" y="130" transform="scale(.1)" fill="#fff" textLength="484">message</text></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="18" role="img" aria-label="message"><title>TESTTEST</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#fff" stop-opacity=".7"/><stop offset=".1" stop-color="#aaa" stop-opacity=".1"/><stop offset=".9" stop-color="#000" stop-opacity=".3"/><stop offset="1" stop-color="#000" stop-opacity=".5"/></linearGradient><clipPath id="r"><rect width="60" height="18" rx="4" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="18" fill="#e05d44"/><rect x="0" width="60" height="18" fill="#e05d44"/><rect width="60" height="18" 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="300" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="510">message</text><text x="300" y="130" transform="scale(.1)" fill="#fff" textLength="510">message</text></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save