resvg Extended <use> support

[ ] use elements linked to an external SVG file
[x] use elements linked to svg element
[x] use elements linked to symbol element

Feb 20 '17 14:02 RazrFalcon

Any ideas for workarounds for files that use <use href="external.svg#id"/>?

Edit: use some external library to create a staging versions of the file. copy the external svg into the staging document as a child of the root svg element. Add style="display:none" on the imported svg element. Rewrite external.svg#id to #id . This approach can cause issues in some situations, especially with ID collisions.

Nov 12 '21 06:11 da2x

This is not supported mainly because not many apps support this to begin with. So it's hard to guess what is the correct output should be. This is a weird feature with very low priority.

The algorithm you're describing is completely incorrect. You cannot simply copy-paste one SVG into another. It would not work (think DTD for example). You have to parse the linked SVG and extract required element from it. As SVG, not as text. You also have to make sure to prevent recursive href's and so on.

Nov 12 '21 08:11 RazrFalcon

librsvg though supports this:

use elements linked to svg element

With some sane defaults. Encountered this problem and couldn't understand why resvg can't render until found this issue opened 😢

Dec 17 '21 12:12 antmelnyk

Are you sure? Afaik librsvg doesn't load any external files in general.

Dec 17 '21 16:12 RazrFalcon

What I meant was use elements linked to the svg element inside the same SVG file, not external. Right now I'm trying to work around it by extracting the inner of that svg and work directly with its content.

E.g. from this:

<defs>
  <svg id="12345">
    <image ... />
  </svg>
</defs>
<use xlink:href="#12345" />

to this:

<defs>
    <image id="12345" ... />
</defs>
<use xlink:href="#12345" />

Of course in real SVG it's more complex because of various other attributes like width, height and viewBox.

Dec 18 '21 03:12 antmelnyk

This is not implemented, because I never seen anyone using it. It's a very obscure feature. Also, it's not just a group. Afaik it's the same as symbol, where you have to clip and transform the content. I never looked into it.

Dec 18 '21 08:12 RazrFalcon

@RazrFalcon hi! We're trying to minimize puppeteer usage in svg-sprite. The problem is that it generates svgs with <use> attributes by design. I have tried to implement screenshot testing of generated svg and it fails because resvg is not rendering the <use> elements. You can see it here. Source: Resvg:

Do you have any plans to implement it? That'll be cool.

Feb 13 '22 13:02 Kreeg

Can you provide SVG example?

I can't say anything about the timeline, but I will prioritize this task.

Feb 13 '22 13:02 RazrFalcon

@Kreeg I'm also curious about what the SVG code looks like in the example.

Feb 13 '22 13:02 yisibl

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="407" height="200" viewBox="0 0 407 200" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <view id="weather-clear" viewBox="0 76 48 48"/>
    <svg width="48" height="48" viewBox="0 0 48 48" id="weather-clear-" y="76" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="ak">
                <stop offset="0" style="stop-color:#fff;stop-opacity:0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset=".75"/>
                <stop offset="1" style="stop-color:#fff;stop-opacity:1"/>
            </linearGradient>
            <linearGradient id="aj">
                <stop offset="0" style="stop-color:#fff7c2;stop-opacity:.63829786"/>
                <stop style="stop-color:#fcaf3e;stop-opacity:.18348624" offset=".594"/>
                <stop offset=".839" style="stop-color:#fcaf3e;stop-opacity:.50458717"/>
                <stop offset="1" style="stop-color:#fcaf3e;stop-opacity:1"/>
            </linearGradient>
            <linearGradient id="ai">
                <stop offset="0" style="stop-color:#fff9c6;stop-opacity:1"/>
                <stop style="stop-color:#fff28c;stop-opacity:1" offset=".542"/>
                <stop offset="1" style="stop-color:#ffea85;stop-opacity:1"/>
            </linearGradient>
            <linearGradient id="ah">
                <stop style="stop-color:#000;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#000;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="ac">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="aa">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="ag">
                <stop style="stop-color:#edd400;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#edd400;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="ab">
                <stop style="stop-color:#fcaf3e;stop-opacity:0" offset="0"/>
                <stop offset=".666" style="stop-color:#fcaf3e;stop-opacity:.17431192"/>
                <stop style="stop-color:#fcaf3e;stop-opacity:.55963302" offset=".865"/>
                <stop style="stop-color:#fcaf3e;stop-opacity:1" offset="1"/>
            </linearGradient>
            <linearGradient id="af">
                <stop style="stop-color:#fce94f;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fce94f;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="ae">
                <stop style="stop-color:#eeeeec;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#eeeeec;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="ad">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ai" id="an" gradientUnits="userSpaceOnUse" x1="-28.969" y1="-25.327"
                            x2="-37.197" y2="-9.559"/>
            <radialGradient xlink:href="#aj" id="am" cx="-33.519" cy="-22.113" fx="-33.519" fy="-22.113" r="9.5"
                            gradientUnits="userSpaceOnUse"
                            gradientTransform="matrix(.48774 1.2924 -1.10267 .49724 -41.774 32.415)"/>
            <radialGradient xlink:href="#ak" id="al" cx="24" cy="23.382" fx="24" fy="23.382" r="19.142"
                            gradientTransform="matrix(1.0067 0 0 1.00752 -.16 .427)" gradientUnits="userSpaceOnUse"/>
        </defs>
        <g style="opacity:.7">
            <path
                style="fill:#fce94f;fill-opacity:1;stroke:#fcaf3e;stroke-width:.73732895;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                d="m24 2.5-2.375 6.688a15.073 15.073 0 0 1 4.75 0L24 2.5zM8.812 8.781l3.032 6.438a15.224 15.224 0 0 1 3.375-3.375L8.813 8.78zm30.407 0-6.438 3.063c1.29.935 2.44 2.085 3.375 3.375L39.22 8.78zM9.187 21.594 2.5 23.969l6.688 2.375a15.07 15.07 0 0 1 0-4.75zm29.626.031a15.073 15.073 0 0 1 0 4.75L45.5 24l-6.688-2.375zm-26.97 11.156-3.03 6.407 6.406-3.032a15.224 15.224 0 0 1-3.375-3.375zm24.313 0a15.228 15.228 0 0 1-3.343 3.344l6.406 3.063-3.063-6.407zm-14.531 6.032L24 45.5l2.375-6.688a15.073 15.073 0 0 1-4.75 0z"/>
            <path
                style="fill:none;fill-opacity:1;stroke:url(#al);stroke-width:.84646249;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                d="m24 5.25-1.344 3.813C23.1 9.023 23.547 9 24 9c.453 0 .901.023 1.344.063L24 5.25zm-13.219 5.5 1.719 3.625a15.488 15.488 0 0 1 1.906-1.906l-3.625-1.719zm26.469 0-3.625 1.719c.68.57 1.337 1.226 1.906 1.906l1.719-3.625zM9.062 22.625l-3.78 1.344 3.78 1.343C9.025 24.88 9 24.442 9 24c0-.464.021-.922.063-1.375zm29.876.031c.039.443.062.891.062 1.344 0 .453-.023.901-.063 1.344L42.72 24l-3.782-1.344zM35.53 33.594a15.582 15.582 0 0 1-1.906 1.937l3.625 1.719-1.719-3.656zm-23.031.031-1.719 3.594 3.594-1.719a15.38 15.38 0 0 1-1.875-1.875zm10.156 5.313L24 42.718l1.344-3.78C24.9 38.977 24.453 39 24 39c-.453 0-.901-.023-1.344-.063z"/>
        </g>
        <path transform="matrix(.77806 -1.06129 1.06129 .77806 67.48 3.641)"
              d="M-22.5-17.5a9.5 9.5 0 1 1-19 0 9.5 9.5 0 1 1 19 0z"
              style="fill:#ffee54;fill-opacity:1;stroke:#fcaf3e;stroke-width:.75991178;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
        <path transform="matrix(1.24426 -.1677 .21664 1.25184 67.616 40.527)"
              d="M-22.5-17.5a9.5 9.5 0 1 1-19 0 9.5 9.5 0 1 1 19 0z"
              style="fill:url(#am);fill-opacity:1;stroke:none;stroke-width:1.01737845;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
        <path transform="matrix(.7158 -.97635 .97635 .7158 64 5.27)"
              d="M-22.5-17.5a9.5 9.5 0 1 1-19 0 9.5 9.5 0 1 1 19 0z"
              style="fill:none;fill-opacity:1;stroke:url(#an);stroke-width:.82601947;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
    </svg>
    <view id="weather-clear-left" viewBox="48 0 48 48"/>
    <use xlink:href="#weather-clear-" y="-76" x="48" xmlns="http://www.w3.org/2000/svg"/>
    <view id="weather-clear-right" viewBox="96 152 48 48"/>
    <use xlink:href="#weather-clear-" y="76" x="96" xmlns="http://www.w3.org/2000/svg"/>
    <view id="weather-snow" viewBox="144 76 48 48"/>
    <svg width="48" height="48" viewBox="0 0 48 48" id="weather-snow-" y="76" x="144"
         xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient xlink:href="#ba" id="bN" gradientUnits="userSpaceOnUse" x1="284.802" y1="-441.233"
                            x2="288.9" y2="-436.831"/>
            <linearGradient xlink:href="#bb" id="bM" gradientUnits="userSpaceOnUse" x1="286.666" y1="-439.484"
                            x2="289.766" y2="-436.707"/>
            <linearGradient xlink:href="#bc" id="bL" gradientUnits="userSpaceOnUse" x1="275.942" y1="-437.105"
                            x2="279.975" y2="-431.918"/>
            <linearGradient xlink:href="#ba" id="bK" gradientUnits="userSpaceOnUse" x1="285.941" y1="-439.939"
                            x2="289.391" y2="-436.443"/>
            <linearGradient xlink:href="#bd" id="bJ" gradientUnits="userSpaceOnUse" x1="286.512" y1="-441.291"
                            x2="289.854" y2="-436.145"/>
            <linearGradient xlink:href="#be" id="bI" gradientUnits="userSpaceOnUse" x1="287.517" y1="-439.753"
                            x2="289.676" y2="-436.322"/>
            <linearGradient xlink:href="#bf" id="bH" gradientUnits="userSpaceOnUse" x1="271.022" y1="-441.052"
                            x2="285.029" y2="-431.97"/>
            <linearGradient xlink:href="#ba" id="bG" gradientUnits="userSpaceOnUse" x1="284.802" y1="-441.233"
                            x2="288.9" y2="-436.831"/>
            <linearGradient id="bb">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bb" id="bF" gradientUnits="userSpaceOnUse" x1="286.666" y1="-439.484"
                            x2="289.766" y2="-436.707"/>
            <linearGradient id="bc">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bc" id="bE" gradientUnits="userSpaceOnUse" x1="275.942" y1="-437.105"
                            x2="279.975" y2="-431.918"/>
            <linearGradient id="ba">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ba" id="bD" gradientUnits="userSpaceOnUse" x1="285.941" y1="-439.939"
                            x2="289.391" y2="-436.443"/>
            <linearGradient id="bd">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bd" id="bC" gradientUnits="userSpaceOnUse" x1="286.512" y1="-441.291"
                            x2="289.854" y2="-436.145"/>
            <linearGradient id="be">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#be" id="bB" gradientUnits="userSpaceOnUse" x1="287.517" y1="-439.753"
                            x2="289.676" y2="-436.322"/>
            <linearGradient id="bf">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bf" id="bA" gradientUnits="userSpaceOnUse" x1="271.022" y1="-441.052"
                            x2="285.029" y2="-431.97"/>
            <linearGradient id="bg">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bg" id="bz" gradientUnits="userSpaceOnUse" x1="-156.29" y1="-100.534"
                            x2="-153.098" y2="-96.545"/>
            <linearGradient id="bh">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bh" id="by" gradientUnits="userSpaceOnUse" x1="238.005" y1="-388.475"
                            x2="245.655" y2="-382.645"/>
            <linearGradient id="bi">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bi" id="bx" gradientUnits="userSpaceOnUse" x1="230.876" y1="-390.44"
                            x2="235.257" y2="-386.959"/>
            <linearGradient id="bj">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bj" id="bw" gradientUnits="userSpaceOnUse" x1="246.74" y1="-391.314"
                            x2="252.698" y2="-385.352"/>
            <linearGradient id="bk">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bk" id="bv" gradientUnits="userSpaceOnUse" x1="240.074" y1="-393.407"
                            x2="245.827" y2="-388.55"/>
            <linearGradient id="bl">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#bl" id="bu" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(122.023 102)" x1="228.503" y1="-392.306" x2="278.915"
                            y2="-375.38"/>
            <linearGradient id="bt">
                <stop style="stop-color:#000;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#000;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="bo">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="bm">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="bs">
                <stop style="stop-color:#edd400;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#edd400;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="bn">
                <stop style="stop-color:#fcaf3e;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fcaf3e;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="br">
                <stop style="stop-color:#fce94f;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fce94f;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="bq">
                <stop style="stop-color:#eeeeec;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#eeeeec;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="bp">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
        </defs>
        <path
            d="M364.523-296c-2.772 0-5.108 1.574-6.406 3.813-.945-.476-1.965-.813-3.094-.813-3.864 0-7 3.136-7 7s3.136 7 7 7c2.42 0 4.43-1.32 5.688-3.188 1.134.69 2.388 1.188 3.812 1.188.913 0 1.753-.232 2.563-.531.51.867 1.179 1.58 2 2.156-.008.13-.063.243-.063.375 0 3.864 3.136 7 7 7s7-3.136 7-7c0-2.37-1.259-4.358-3.063-5.625.008-.13.063-.243.063-.375 0-3.864-3.136-7-7-7-.623 0-1.175.222-1.75.375-1.195-2.559-3.741-4.375-6.75-4.375z"
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-340.046 298)"/>
        <path
            d="M364.523-295c-2.78 0-5.135 1.762-6.063 4.219-.985-.71-2.13-1.219-3.437-1.219-3.312 0-6 2.688-6 6s2.688 6 6 6c2.428 0 4.493-1.456 5.438-3.531 1.12.917 2.502 1.531 4.062 1.531 1.075 0 2.044-.319 2.938-.781.398 1 1.1 1.786 1.937 2.437-.18.596-.375 1.19-.375 1.844 0 3.588 2.912 6.5 6.5 6.5s6.5-2.912 6.5-6.5c0-2.36-1.334-4.33-3.219-5.469.063-.347.219-.666.219-1.031a6.002 6.002 0 0 0-8.406-5.5c-.854-2.594-3.215-4.5-6.094-4.5z"
            style="opacity:1;fill:url(#bu);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-340.046 298)"/>
        <path transform="matrix(.96445 0 0 .96445 -197.734 389.526)"
              d="M248.548-383.667a6.74 6.74 0 1 1-13.48 0 6.74 6.74 0 1 1 13.48 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M250.183-389.301a6.231 6.231 0 1 1-12.463 0 6.231 6.231 0 1 1 12.463 0z"
            transform="translate(-190.842 353.11) scale(.88263)"/>
        <path
            style="opacity:1;fill:url(#bv);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M250.183-389.301a6.231 6.231 0 1 1-12.463 0 6.231 6.231 0 1 1 12.463 0z"
            transform="translate(-190.842 353.11) scale(.88263)"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M257.254-385.788a6.033 6.033 0 1 1-12.065 0 6.033 6.033 0 1 1 12.065 0z"
            transform="matrix(.91173 0 0 .91173 -196.568 365.234)"/>
        <path
            style="opacity:1;fill:url(#bw);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M257.254-385.788a6.033 6.033 0 1 1-12.065 0 6.033 6.033 0 1 1 12.065 0z"
            transform="matrix(.91173 0 0 .91173 -196.568 365.234)"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M237.809-387.887a4.375 4.375 0 1 1-8.75 0 4.375 4.375 0 1 1 8.75 0z"
            transform="matrix(1.1428 0 0 1.1428 -251.79 455.277)"/>
        <path
            style="opacity:1;fill:url(#bx);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M237.809-387.887a4.375 4.375 0 1 1-8.75 0 4.375 4.375 0 1 1 8.75 0z"
            transform="matrix(1.1428 0 0 1.1428 -251.79 455.277)"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M248.548-383.667a6.74 6.74 0 1 1-13.48 0 6.74 6.74 0 1 1 13.48 0z"
            transform="matrix(1.03864 0 0 1.03864 -227.173 414.49)"/>
        <path
            style="opacity:1;fill:url(#by);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M248.548-383.667a6.74 6.74 0 1 1-13.48 0 6.74 6.74 0 1 1 13.48 0z"
            transform="matrix(1.03864 0 0 1.03864 -227.173 414.49)"/>
        <g style="stroke:none">
            <path
                style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:.33115697;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
                d="M-151.938-96.938a3.125 3.125 0 1 1-6.25 0 3.125 3.125 0 1 1 6.25 0z"
                transform="matrix(1.62483 0 0 1.62483 263.434 175.907)"/>
            <path
                style="opacity:1;fill:url(#bz);fill-opacity:1;stroke:none;stroke-width:.4522453;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
                d="M-151.938-96.938a3.125 3.125 0 1 1-6.25 0 3.125 3.125 0 1 1 6.25 0z"
                transform="matrix(1.62483 0 0 1.62483 263.493 175.849)"/>
        </g>
        <path
            style="fill:#c4c5c2;fill-opacity:1;stroke:#888a85;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M280.5-445.5c-2.27 0-4.11 1.55-4.719 3.625-.693-.364-1.444-.625-2.281-.625-2.76 0-5 2.24-5 5 0 .579.163 1.108.344 1.625-1.374.77-2.344 2.189-2.344 3.875 0 2.484 2.016 4.5 4.5 4.5h19c2.484 0 4.5-2.016 4.5-4.5 0-1.686-.97-3.104-2.344-3.875.181-.517.344-1.046.344-1.625 0-2.76-2.24-5-5-5-.837 0-1.588.261-2.281.625-.61-2.075-2.448-3.625-4.719-3.625z"
            transform="translate(-249.023 460)"/>
        <path
            style="opacity:1;fill:url(#bA);fill-opacity:1;stroke:none;stroke-width:.99999958;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M280.5-445c-2.19 0-3.724 1.336-4.396 3.844-.668-.344-1.547-.834-2.354-.834-2.717 0-4.755 1.939-4.755 4.546 0 .546.267 1.333.442 1.822-1.325.728-2.437 1.89-2.437 3.372 0 2.346 1.546 4.25 4.34 4.25h18.32c2.772 0 4.34-1.904 4.34-4.25 0-1.592-1.112-2.666-2.437-3.394.175-.489.464-1.254.464-1.8 0-2.607-2.116-4.568-4.777-4.568-.807 0-1.642.49-2.31.833-.65-2.421-2.25-3.821-4.44-3.821z"
            transform="translate(-249.023 460)"/>
        <path transform="matrix(1.0566 0 0 1.0566 -273.22 481.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -273.22 481.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bB);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M271-438h20v9h-20z" transform="translate(-249.023 460)"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
            transform="translate(-239.192 424.311) scale(.90566)"/>
        <path transform="matrix(1.0566 0 0 1.0566 -266.22 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -266.22 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bC);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -280.22 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -280.22 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bD);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            d="M280.469-440.969c-3.58 0-6.469 2.92-6.469 6.5 0 2.37 1.35 4.338 3.25 5.469h6.469c1.9-1.131 3.25-3.13 3.25-5.5 0-3.58-2.92-6.469-6.5-6.469z"
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-250.023 460)"/>
        <path
            d="M280.5-441a6.502 6.502 0 0 0-6.5 6.5c0 2.376 1.345 4.366 3.25 5.5h6.5c1.905-1.134 3.25-3.124 3.25-5.5 0-3.588-2.912-6.5-6.5-6.5z"
            style="opacity:1;fill:url(#bE);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-250.023 460)"/>
        <path
            style="opacity:1;fill:url(#bF);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
            transform="translate(-239.192 424.311) scale(.90566)"/>
        <path
            style="fill:#888a85;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            d="M292.956-437.334c-.001 2.685-3.269 3.714-3.269 3.714s2.349-1.626 2.337-3.705l.932-.009z"
            transform="translate(-249.023 460)"/>
        <path transform="matrix(1.20755 0 0 1.20755 -313.249 555.415)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.20755 0 0 1.20755 -313.249 555.415)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bG);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="fill:#c4c5c2;fill-opacity:1;stroke:#888a85;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M280.5-445.5c-2.27 0-4.11 1.55-4.719 3.625-.693-.364-1.444-.625-2.281-.625-2.76 0-5 2.24-5 5 0 .579.163 1.108.344 1.625-1.374.77-2.344 2.189-2.344 3.875 0 2.484 2.016 4.5 4.5 4.5h19c2.484 0 4.5-2.016 4.5-4.5 0-1.686-.97-3.104-2.344-3.875.181-.517.344-1.046.344-1.625 0-2.76-2.24-5-5-5-.837 0-1.588.261-2.281.625-.61-2.075-2.448-3.625-4.719-3.625z"
            transform="translate(-264.025 456)"/>
        <path
            style="opacity:1;fill:url(#bH);fill-opacity:1;stroke:none;stroke-width:.99999958;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M280.5-445c-2.19 0-3.724 1.336-4.396 3.844-.668-.344-1.547-.834-2.354-.834-2.717 0-4.755 1.939-4.755 4.546 0 .546.267 1.333.442 1.822-1.325.728-2.437 1.89-2.437 3.372 0 2.346 1.546 4.25 4.34 4.25h18.32c2.772 0 4.34-1.904 4.34-4.25 0-1.592-1.112-2.666-2.437-3.394.175-.489.464-1.254.464-1.8 0-2.607-2.116-4.568-4.777-4.568-.807 0-1.642.49-2.31.833-.65-2.421-2.25-3.821-4.44-3.821z"
            transform="translate(-264.025 456)"/>
        <path transform="matrix(1.0566 0 0 1.0566 -288.223 477.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -288.223 477.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bI);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M271-438h20v9h-20z" transform="translate(-264.025 456)"/>
        <path
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
            transform="translate(-254.195 420.311) scale(.90566)"/>
        <path transform="matrix(1.0566 0 0 1.0566 -281.223 480.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -281.223 480.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bJ);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -295.223 480.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -295.223 480.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bK);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            d="M280.469-440.969c-3.58 0-6.469 2.92-6.469 6.5 0 2.37 1.35 4.338 3.25 5.469h6.469c1.9-1.131 3.25-3.13 3.25-5.5 0-3.58-2.92-6.469-6.5-6.469z"
            style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-265.025 456)"/>
        <path
            d="M280.5-441a6.502 6.502 0 0 0-6.5 6.5c0 2.376 1.345 4.366 3.25 5.5h6.5c1.905-1.134 3.25-3.124 3.25-5.5 0-3.588-2.912-6.5-6.5-6.5z"
            style="opacity:1;fill:url(#bL);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-265.025 456)"/>
        <path
            style="opacity:1;fill:url(#bM);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
            transform="translate(-254.195 420.311) scale(.90566)"/>
        <path
            style="fill:#888a85;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            d="M292.956-437.334c-.001 2.685-3.269 3.714-3.269 3.714s2.349-1.626 2.337-3.705l.932-.009z"
            transform="translate(-264.025 456)"/>
        <path transform="matrix(1.20755 0 0 1.20755 -328.252 551.415)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#c4c5c2;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.20755 0 0 1.20755 -328.252 551.415)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:url(#bN);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="translate(-11.306 249.173) scale(.68552)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:1.4587468;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(.91557 0 0 .91559 -10.599 325.572)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:1.0922043;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(.6724 0 0 .68374 -9.937 256.636)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:1.4748161;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(.6823 0 0 .68027 18.79 252.51)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:1.4678179;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.10713 0 0 1.11717 -5.79 386.936)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:.89916825;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.1276 0 0 1.05183 -1.396 373.388)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:.91822928;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(.68552 0 0 .68049 1.68 256.578)"
              d="M31.82-316.779a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 1 1 4.42 0z"
              style="opacity:1;fill:#fff;fill-opacity:1;stroke:#729fcf;stroke-width:1.4641328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
    </svg>
    <view id="weather-storm" viewBox="192 0 48 48"/>
    <svg width="48" height="48" viewBox="0 0 48 48" id="weather-storm-" x="192" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="ca">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ca" id="cB" gradientUnits="userSpaceOnUse" x1="238.005" y1="-388.475"
                            x2="245.655" y2="-382.645"/>
            <linearGradient id="cb">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cb" id="cA" gradientUnits="userSpaceOnUse" x1="230.876" y1="-390.44"
                            x2="235.257" y2="-386.959"/>
            <linearGradient id="cc">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cc" id="cz" gradientUnits="userSpaceOnUse" x1="246.74" y1="-391.314"
                            x2="252.698" y2="-385.352"/>
            <linearGradient id="cd">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cd" id="cy" gradientUnits="userSpaceOnUse" x1="240.074" y1="-393.407"
                            x2="245.827" y2="-388.55"/>
            <linearGradient id="ce">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ce" id="cx" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(69 155)" x1="228.503" y1="-392.306" x2="266.364"
                            y2="-379.269"/>
            <linearGradient xlink:href="#cf" id="cK" gradientUnits="userSpaceOnUse" x1="284.802" y1="-441.233"
                            x2="288.9" y2="-436.831"/>
            <linearGradient xlink:href="#cg" id="cJ" gradientUnits="userSpaceOnUse" x1="286.666" y1="-439.484"
                            x2="289.766" y2="-436.707"/>
            <linearGradient xlink:href="#ch" id="cI" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(-35 207)" x1="275.942" y1="-437.105" x2="279.975"
                            y2="-431.918"/>
            <linearGradient xlink:href="#cf" id="cH" gradientUnits="userSpaceOnUse" x1="285.941" y1="-439.939"
                            x2="289.391" y2="-436.443"/>
            <linearGradient xlink:href="#ci" id="cG" gradientUnits="userSpaceOnUse" x1="286.512" y1="-441.291"
                            x2="289.854" y2="-436.145"/>
            <linearGradient xlink:href="#cj" id="cF" gradientUnits="userSpaceOnUse" x1="287.517" y1="-439.753"
                            x2="289.676" y2="-436.322"/>
            <linearGradient xlink:href="#ck" id="cE" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(-34 207)" x1="271.022" y1="-441.052" x2="285.029"
                            y2="-431.97"/>
            <linearGradient xlink:href="#cl" id="cM" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(14.159 7.083)" x1="-190.477" y1="-332.512" x2="-196.19"
                            y2="-328.534"/>
            <linearGradient xlink:href="#cm" id="cL" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(13.805 2.84)" x1="-191.289" y1="-328.079" x2="-192.414"
                            y2="-315.329"/>
            <linearGradient id="cl">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cl" id="cD" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(14.159 7.083)" x1="-190.477" y1="-332.512" x2="-196.19"
                            y2="-328.534"/>
            <linearGradient id="cm">
                <stop style="stop-color:#fcaf3e;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fcaf3e;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cm" id="cC" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(13.805 2.84)" x1="-191.289" y1="-328.079" x2="-192.414"
                            y2="-315.329"/>
            <linearGradient xlink:href="#cf" id="cU" gradientUnits="userSpaceOnUse" x1="284.802" y1="-441.233"
                            x2="288.9" y2="-436.831"/>
            <linearGradient id="cg">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cg" id="cT" gradientUnits="userSpaceOnUse" x1="286.666" y1="-439.484"
                            x2="289.766" y2="-436.707"/>
            <linearGradient id="ch">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ch" id="cS" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(-35 207)" x1="275.942" y1="-437.105" x2="279.975"
                            y2="-431.918"/>
            <linearGradient id="cf">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cf" id="cR" gradientUnits="userSpaceOnUse" x1="285.941" y1="-439.939"
                            x2="289.391" y2="-436.443"/>
            <linearGradient id="ci">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ci" id="cQ" gradientUnits="userSpaceOnUse" x1="286.512" y1="-441.291"
                            x2="289.854" y2="-436.145"/>
            <linearGradient id="cj">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#cj" id="cP" gradientUnits="userSpaceOnUse" x1="287.517" y1="-439.753"
                            x2="289.676" y2="-436.322"/>
            <linearGradient id="ck">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient xlink:href="#ck" id="cO" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(-34 207)" x1="271.022" y1="-441.052" x2="285.029"
                            y2="-431.97"/>
            <linearGradient id="cn">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cw">
                <stop style="stop-color:#ad7fa8;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#ad7fa8;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cv">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cu">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="ct">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cs">
                <stop style="stop-color:#edd400;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#edd400;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cr">
                <stop style="stop-color:#fcaf3e;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fcaf3e;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cq">
                <stop style="stop-color:#fce94f;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fce94f;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="cp">
                <stop style="stop-color:#eeeeec;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#eeeeec;stop-opacity:0" offset="1"/>
            </linearGradient>
            <linearGradient id="co">
                <stop style="stop-color:#fff;stop-opacity:1" offset="0"/>
                <stop style="stop-color:#fff;stop-opacity:0" offset="1"/>
            </linearGradient>
            <radialGradient xlink:href="#cn" id="cN" gradientUnits="userSpaceOnUse"
                            gradientTransform="matrix(.93095 0 0 .44824 245.364 184.926)" cx="-229.75" cy="-343.956"
                            fx="-229.75" fy="-343.956" r="14.501"/>
            <radialGradient xlink:href="#cn" id="cV" gradientUnits="userSpaceOnUse"
                            gradientTransform="matrix(.93095 0 0 .44824 229.927 180.926)" cx="-229.75" cy="-343.956"
                            fx="-229.75" fy="-343.956" r="14.501"/>
        </defs>
        <path
            d="M311.5-243c-2.772 0-5.108 1.574-6.406 3.813-.945-.476-1.965-.813-3.094-.813-3.864 0-7 3.136-7 7s3.136 7 7 7c2.42 0 4.43-1.32 5.688-3.187 1.134.69 2.388 1.187 3.812 1.187.913 0 1.753-.232 2.563-.531.51.868 1.179 1.58 2 2.156-.008.13-.063.243-.063.375 0 3.864 3.136 7 7 7s7-3.136 7-7c0-2.37-1.259-4.358-3.063-5.625.008-.13.063-.243.063-.375 0-3.864-3.136-7-7-7-.623 0-1.175.222-1.75.375-1.195-2.559-3.741-4.375-6.75-4.375z"
            style="opacity:1;fill:#555753;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-287.02 245)"/>
        <path
            d="M311.5-242c-2.78 0-5.135 1.762-6.063 4.219-.985-.71-2.13-1.219-3.437-1.219-3.312 0-6 2.688-6 6s2.688 6 6 6c2.428 0 4.493-1.456 5.438-3.531 1.12.917 2.502 1.531 4.062 1.531 1.075 0 2.044-.319 2.938-.781.398 1 1.1 1.786 1.937 2.437-.18.596-.375 1.19-.375 1.844 0 3.588 2.912 6.5 6.5 6.5s6.5-2.912 6.5-6.5c0-2.36-1.334-4.33-3.219-5.469.063-.347.219-.666.219-1.031a6.002 6.002 0 0 0-8.406-5.5c-.854-2.594-3.215-4.5-6.094-4.5z"
            style="opacity:1;fill:url(#cx);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-287.02 245)"/>
        <path transform="matrix(.96445 0 0 .96445 -197.732 389.526)"
              d="M248.548-383.667a6.74 6.74 0 1 1-13.48 0 6.74 6.74 0 1 1 13.48 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M250.183-389.301a6.231 6.231 0 1 1-12.463 0 6.231 6.231 0 1 1 12.463 0z"
            transform="translate(-190.84 353.109) scale(.88263)"/>
        <path
            style="opacity:.4944444;fill:url(#cy);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M250.183-389.301a6.231 6.231 0 1 1-12.463 0 6.231 6.231 0 1 1 12.463 0z"
            transform="translate(-190.84 353.109) scale(.88263)"/>
        <path
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M257.254-385.788a6.033 6.033 0 1 1-12.065 0 6.033 6.033 0 1 1 12.065 0z"
            transform="matrix(.91173 0 0 .91173 -196.566 365.233)"/>
        <path
            style="opacity:.4944444;fill:url(#cz);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M257.254-385.788a6.033 6.033 0 1 1-12.065 0 6.033 6.033 0 1 1 12.065 0z"
            transform="matrix(.91173 0 0 .91173 -196.566 365.233)"/>
        <path
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M237.809-387.887a4.375 4.375 0 1 1-8.75 0 4.375 4.375 0 1 1 8.75 0z"
            transform="matrix(1.1428 0 0 1.1428 -251.788 455.276)"/>
        <path
            style="opacity:.4944444;fill:url(#cA);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M237.809-387.887a4.375 4.375 0 1 1-8.75 0 4.375 4.375 0 1 1 8.75 0z"
            transform="matrix(1.1428 0 0 1.1428 -251.788 455.276)"/>
        <path
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M248.548-383.667a6.74 6.74 0 1 1-13.48 0 6.74 6.74 0 1 1 13.48 0z"
            transform="matrix(1.03864 0 0 1.03864 -227.171 414.49)"/>
        <path
            style="opacity:.4944444;fill:url(#cB);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M248.548-383.667a6.74 6.74 0 1 1-13.48 0 6.74 6.74 0 1 1 13.48 0z"
            transform="matrix(1.03864 0 0 1.03864 -227.171 414.49)"/>
        <path
            d="m-173.246-327.591-3.124 4.279h3.78s-2.704 4.526-7.576 12.926c2.096-7.947 2.952-10.97 2.952-10.97h-5.163l4.043-6.235h5.088z"
            style="fill:#edd400;fill-opacity:1;fill-rule:evenodd;stroke:url(#cC);stroke-width:1.0000006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            transform="translate(208.856 357.885)"/>
        <path
            d="m-173.76-327.845-3.743 5.163 3.957-.176s-.14.46-5.013 8.86c2.096-7.947 2.07-7.965 2.07-7.965l-4.899.089 3.69-5.705 3.939-.266z"
            style="opacity:1;fill:url(#cD);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.0000006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            transform="translate(208.856 357.885)"/>
        <path
            d="M246.5-238.5c-2.27 0-4.11 1.55-4.719 3.625-.693-.364-1.444-.625-2.281-.625-2.76 0-5 2.24-5 5 0 .579.162 1.108.344 1.625-1.374.77-2.344 2.19-2.344 3.875 0 2.484 2.016 4.5 4.5 4.5h19c2.484 0 4.5-2.016 4.5-4.5 0-1.686-.97-3.104-2.344-3.875.181-.517.344-1.046.344-1.625 0-2.76-2.24-5-5-5-.837 0-1.588.261-2.281.625-.61-2.075-2.448-3.625-4.72-3.625z"
            style="fill:#888a85;fill-opacity:1;stroke:#555753;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-215.006 253)"/>
        <path
            d="M246.5-238c-2.19 0-3.724 1.336-4.396 3.844-.668-.344-1.547-.834-2.354-.834-2.717 0-4.755 1.94-4.755 4.546 0 .547.267 1.333.442 1.822-1.325.728-2.437 1.89-2.437 3.372 0 2.346 1.546 4.25 4.34 4.25h18.32c2.772 0 4.34-1.904 4.34-4.25 0-1.592-1.112-2.666-2.437-3.394.175-.489.464-1.253.464-1.8 0-2.607-2.116-4.568-4.777-4.568-.807 0-1.642.49-2.31.833-.65-2.421-2.25-3.82-4.44-3.82z"
            style="opacity:1;fill:url(#cE);fill-opacity:1;stroke:none;stroke-width:.99999958;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-215.006 253)"/>
        <path transform="matrix(1.0566 0 0 1.0566 -273.204 481.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -273.204 481.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cF);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M237-231h20v9h-20z" transform="translate(-215.006 253)"/>
        <path transform="translate(-239.176 424.31) scale(.90566)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -266.204 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -266.204 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cG);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -280.204 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -280.204 484.863)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cH);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            d="M245.469-233.969c-3.58 0-6.47 2.921-6.47 6.5 0 2.371 1.35 4.338 3.25 5.47h6.47c1.9-1.132 3.25-3.13 3.25-5.5 0-3.58-2.921-6.47-6.5-6.47z"
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-215.006 253)"/>
        <path
            d="M245.5-234a6.502 6.502 0 0 0-6.5 6.5c0 2.376 1.345 4.366 3.25 5.5h6.5c1.905-1.134 3.25-3.124 3.25-5.5 0-3.588-2.912-6.5-6.5-6.5z"
            style="opacity:.47777775;fill:url(#cI);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-215.006 253)"/>
        <path transform="translate(-239.176 424.31) scale(.90566)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cJ);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path d="M258.956-230.334c-.001 2.685-3.269 3.714-3.269 3.714s2.349-1.626 2.337-3.705l.932-.009z"
              style="fill:#555753;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
              transform="translate(-215.006 253)"/>
        <path transform="matrix(1.20755 0 0 1.20755 -313.233 555.415)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.20755 0 0 1.20755 -313.233 555.415)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cK);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            d="m-173.246-327.591-3.124 4.279h3.78s-2.704 4.526-7.576 12.926c2.096-7.947 2.952-10.97 2.952-10.97h-5.163l4.043-6.235h5.088z"
            style="fill:#edd400;fill-opacity:1;fill-rule:evenodd;stroke:url(#cL);stroke-width:1.0000006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            transform="translate(192.856 354.885)"/>
        <path
            d="m-173.76-327.845-3.743 5.163 3.957-.176s-.14.46-5.013 8.86c2.096-7.947 2.07-7.965 2.07-7.965l-4.899.089 3.69-5.705 3.939-.266z"
            style="opacity:1;fill:url(#cM);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.0000006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
            transform="translate(192.856 354.885)"/>
        <path
            style="opacity:1;fill:url(#cN);fill-opacity:1;stroke:none;stroke-width:1.0000004;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            d="M31.626 15c-2 0-3.685 1.079-4.53 2.614a5.507 5.507 0 0 0-1.926-.353c-2.83 0-5.118 2.118-5.118 4.718 0 .453.145.856.275 1.272-1.382.865-2.347 2.253-2.347 3.904 0 2.653.651 4.994 5.227 4.806.045-.002 17.452.097 17.7-.018 3.086.226 4.073-2.445 4.073-4.7 0-1.7-.837-3.049-2.31-3.877.048-.258-.038-.551-.038-.822 0-2.6-2.306-4.718-5.136-4.718-.394 0-.732.135-1.1.212C35.655 16.27 33.81 15 31.625 15z"/>
        <path
            d="M246.5-238.5c-2.27 0-4.11 1.55-4.719 3.625-.693-.364-1.444-.625-2.281-.625-2.76 0-5 2.24-5 5 0 .579.162 1.108.344 1.625-1.374.77-2.344 2.19-2.344 3.875 0 2.484 2.016 4.5 4.5 4.5h19c2.484 0 4.5-2.016 4.5-4.5 0-1.686-.97-3.104-2.344-3.875.181-.517.344-1.046.344-1.625 0-2.76-2.24-5-5-5-.837 0-1.588.261-2.281.625-.61-2.075-2.448-3.625-4.72-3.625z"
            style="fill:#888a85;fill-opacity:1;stroke:#555753;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-230.02 248.983)"/>
        <path
            d="M246.5-238c-2.19 0-3.724 1.336-4.396 3.844-.668-.344-1.547-.834-2.354-.834-2.717 0-4.755 1.94-4.755 4.546 0 .547.267 1.333.442 1.822-1.325.728-2.437 1.89-2.437 3.372 0 2.346 1.546 4.25 4.34 4.25h18.32c2.772 0 4.34-1.904 4.34-4.25 0-1.592-1.112-2.666-2.437-3.394.175-.489.464-1.253.464-1.8 0-2.607-2.116-4.568-4.777-4.568-.807 0-1.642.49-2.31.833-.65-2.421-2.25-3.82-4.44-3.82z"
            style="opacity:1;fill:url(#cO);fill-opacity:1;stroke:none;stroke-width:.99999958;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-230.02 248.983)"/>
        <path transform="matrix(1.0566 0 0 1.0566 -288.219 477.847)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -288.219 477.847)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cP);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            d="M237-231h20v9h-20z" transform="translate(-230.02 248.983)"/>
        <path transform="translate(-254.19 420.295) scale(.90566)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -281.218 480.847)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -281.219 480.847)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cQ);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -295.219 480.847)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.0566 0 0 1.0566 -295.219 480.847)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cR);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            d="M245.469-233.969c-3.58 0-6.47 2.921-6.47 6.5 0 2.371 1.35 4.338 3.25 5.47h6.47c1.9-1.132 3.25-3.13 3.25-5.5 0-3.58-2.921-6.47-6.5-6.47z"
            style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-230.02 248.983)"/>
        <path
            d="M245.5-234a6.502 6.502 0 0 0-6.5 6.5c0 2.376 1.345 4.366 3.25 5.5h6.5c1.905-1.134 3.25-3.124 3.25-5.5 0-3.588-2.912-6.5-6.5-6.5z"
            style="opacity:.47777775;fill:url(#cS);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
            transform="translate(-230.02 248.983)"/>
        <path transform="translate(-254.19 420.295) scale(.90566)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cT);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path d="M258.956-230.334c-.001 2.685-3.269 3.714-3.269 3.714s2.349-1.626 2.337-3.705l.932-.009z"
              style="fill:#555753;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
              transform="translate(-230.02 248.983)"/>
        <path transform="matrix(1.20755 0 0 1.20755 -328.247 551.399)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:1;fill:#888a85;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path transform="matrix(1.20755 0 0 1.20755 -328.247 551.399)"
              d="M291.688-437.594a3.313 3.313 0 1 1-6.625 0 3.313 3.313 0 1 1 6.625 0z"
              style="opacity:.47777775;fill:url(#cU);fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
        <path
            style="opacity:1;fill:url(#cV);fill-opacity:1;stroke:none;stroke-width:1.0000004;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            d="M16.189 11c-2 0-3.686 1.08-4.53 2.615a5.507 5.507 0 0 0-1.927-.353c-2.83 0-5.117 2.118-5.117 4.717 0 .454.144.857.275 1.272-1.382.865-2.348 2.254-2.348 3.905 0 2.653.652 4.993 5.228 4.806.045-.002 17.451.097 17.7-.018 3.085.226 4.072-2.446 4.072-4.7 0-1.7-.837-3.05-2.31-3.877.049-.259-.038-.551-.038-.823 0-2.599-2.305-4.717-5.136-4.717-.393 0-.732.135-1.1.212-.739-1.768-2.585-3.039-4.77-3.039z"/>
    </svg>
    <view id="z-gene" viewBox="240 0 166.67 200"/>
    <svg width="166.67" height="200" version="1.0" viewBox="0 0 800 960" id="z-gene-" x="240"
         xmlns="http://www.w3.org/2000/svg">
        <path
            d="M105.506 958.244c-.5-.204-3.807-.919-7.301-1.53l-6.428-1.226-.624-3.776c-.312-2.04-1.872-10.307-3.37-18.472-1.497-8.164-2.62-15.002-2.496-15.206.125-.204 2.372.204 5.055.817 23.214 5.306 47.863-1.225 68.581-18.166 6.428-5.41 16.475-15.309 16.475-16.431 0-.409-111.952-198.6-116.32-205.948-.687-1.123-1.435-.204-4.368 5.613-22.965 45.006-33.573 104.198-29.33 163.799l.437 5.715-21.966-11.43-.936-8.675c-8.799-80.011 9.36-162.37 47.052-213.5 16.724-22.656 34.696-37.76 55.227-46.333 15.476-6.532 23.9-8.063 44.306-8.063 13.542 0 20.281.409 26.834 1.735 19.72 4.083 37.691 10.002 65.71 21.636 8.737 3.674 15.913 6.634 16.038 6.634.063 0 .5-2.858.874-6.328 1.685-13.88 7.114-51.231 9.797-67.05 12.169-71.541 29.642-124.61 53.355-161.962 33.948-53.273 81.312-71.745 143.154-55.926 10.296 2.653 32.012 10.205 49.111 17.043 13.854 5.613 16.1 6.327 16.35 4.898.187-.918 1.997-14.9 4.118-31.229 7.676-59.294 15.164-102.361 23.027-133.182 24.65-96.034 64.9-151.042 116.445-159.308 8.112-1.327 20.53-.715 28.893 1.224l5.117 1.225.624 3.674c.312 2.041 1.872 10.307 3.37 18.472 1.497 8.164 2.62 15.002 2.496 15.206-.125.204-2.372-.204-5.055-.816-17.723-4.082-35.508-1.429-52.856 7.756-9.672 5.103-16.225 10.103-15.538 11.838.25.817 24.212 48.579 53.168 106.138 43.495 86.441 52.855 104.505 53.604 103.586.5-.714 3.12-6.735 5.804-13.471 17.098-42.149 24.337-92.666 20.78-144.715l-.437-5.715 10.983 5.715 10.92 5.715.687 6.124c1.685 15.104 1.997 20.513 2.31 36.332.81 36.637-4.057 73.48-14.042 106.648-13.416 44.496-35.258 80.317-62.84 102.871-13.167 10.716-27.582 17.962-44.618 22.248-12.044 3.062-39.626 3.368-53.73.613-18.783-3.674-37.691-9.9-65.96-21.738-8.736-3.572-15.913-6.43-15.975-6.327-.125.204-1.061 7.246-2.184 15.614-8.425 64.5-18.659 115.017-30.328 150.022-24.837 74.194-58.036 114.812-103.964 127.059-32.325 8.572-64.962 3.47-119.69-18.677-8.737-3.571-16.1-6.123-16.287-5.613-.188.409-1.81 12.451-3.62 26.637-6.864 54.293-14.477 99.81-21.716 130.325-6.74 28.371-17.473 60.212-28.082 82.869-5.928 12.757-19.282 35.005-26.084 43.373-19.158 23.575-40.188 37.25-63.277 41.027-5.804 1.02-18.909 1.326-21.28.612zm93.043-108.383c4.868-8.573 11.17-22.452 16.787-37.046l3.183-8.369-3.62-6.225c-51.545-88.788-104.026-178.29-104.588-178.29-2.933 0-24.088 17.96-29.454 24.9l-1.81 2.348 2.184 4.184c3.87 7.552 114.385 202.274 114.76 202.274.187 0 1.373-1.735 2.558-3.776zm33.823-93.075c2.808-11.736 6.802-30.82 8.737-41.536l.936-5.307-27.832-51.844-27.77-51.946-3.494-.817c-5.492-1.327-33.76-.102-40.875 1.735-3.432.919-6.302 1.735-6.365 1.94-.25.407 92.794 159.92 93.293 159.92.25 0 1.748-5.409 3.37-12.145zm19.096-109.403c1.497-11.43 2.496-20.82 2.184-21.33-.936-1.326-35.633-13.981-36.132-13.165-.187.408 30.39 54.804 30.89 54.906.187.102 1.56-9.083 3.058-20.411zm136.101-24.391c2.559-.715 4.743-1.327 4.868-1.531.312-.51-83.06-173.903-83.62-174.005-1.186-.102-15.54 45.925-15.664 50.212-.062 1.633 9.236 20.819 31.389 65.009l31.514 62.662 13.416-.612c7.364-.409 15.539-1.123 18.097-1.735zm-66.584-5.307c-.312-.715-8.986-18.064-19.22-38.577l-18.659-37.148-.874 4.49c-2.558 14.186-8.674 55.212-8.237 55.62.874.919 22.965 9.39 32.762 12.655 14.353 4.695 15.102 4.797 14.228 2.96zm100.407-7.858c8.55-4.797 25.149-18.574 24.712-20.514-.437-1.837-97.6-212.173-98.036-212.173-1.123-.204-9.86 12.145-16.849 23.473-7.114 11.634-7.364 12.145-6.427 14.288 5.054 11.838 91.982 196.763 92.481 196.763.375.102 2.247-.817 4.119-1.837zm52.107-57.968c5.429-10.001 9.672-18.778 14.477-30.31l3.745-8.981-19.845-43.068c-64.712-140.122-60.219-130.733-62.278-131.039-4.805-.816-37.442 13.574-36.88 16.227.311 1.53 95.664 204.927 96.038 205.03.25 0 2.371-3.573 4.743-7.859zm35.632-96.953c1.685-7.246 4.68-21.023 6.615-30.718 3.432-17.656 10.359-60.417 10.359-64.295 0-1.837-1.248-2.552-10.422-6.226-27.457-10.817-47.8-16.328-66.272-18.063-7.676-.715-7.738-.715-6.864 1.326 3.057 7.042 62.715 130.937 63.027 130.937.25 0 1.81-5.817 3.557-12.96zm146.773-101.443c7.863-1.633 18.783-5.205 18.596-6.123-.125-.408-21.217-42.863-46.99-94.095-41.248-82.257-46.927-93.177-47.613-91.646-1.186 2.347-6.428 19.39-9.174 30.106-2.184 8.165-2.309 9.185-1.497 11.329.499 1.326 16.91 36.127 36.443 77.46l35.57 75.112 4.992-.51c2.746-.408 7.114-1.02 9.673-1.633zm-58.472-28.167a12830.879 12830.879 0 0 0-25.398-55.824l-12.48-27.453-1.124 6.021c-4.244 22.963-12.855 84.808-11.982 86.135 2.06 3.061 52.606 18.982 61.218 19.288l2.683.102zm119.814-7.858c3.682-3.878 6.615-7.756 6.553-8.47-.312-2.246-106.273-222.686-107.022-222.788-.936 0-13.666 20.513-17.535 28.167l-2.621 5.205 24.774 49.905c13.604 27.453 37.38 75.317 52.73 106.342l28.02 56.335 4.18-3.674c2.31-2.041 7.24-7.042 10.921-11.022z"/>
    </svg>
</svg>

Feb 13 '22 21:02 Kreeg

resvg tmp/view/svg/view.horizontal.mixed-995069b6.svg 1.png
Warning (in usvg::svgtree::parse:915): 'use' elements linked to 'svg' elements are not supported. Skipped.
Warning (in usvg::svgtree::parse:915): 'use' elements linked to 'svg' elements are not supported. Skipped.

Feb 14 '22 07:02 Kreeg

I just stumbled upon the same problem, see https://github.com/yisibl/resvg-js/issues/70

You can generate examples here (proof of concept): https://sol.charactercreator.org/credits

Feb 19 '22 18:02 millette

Added support for svg referenced by use. External SVG files are still not supported.

https://github.com/RazrFalcon/resvg/commit/0eb347f2b6b9d76ffcb8e6b66ebefcd0f09da6a7

Feb 20 '22 17:02 RazrFalcon

Can we add a warning saying external SVG files are not supported yet? I just spent hours and found this is not supported.

And interestingly, are we having a test case that expects a blank render result? https://github.com/RazrFalcon/resvg/blob/master/tests/png/e-use-008.png

I was trying to make a texture for my 3D model by generating SVGs for each part and then composing them with this <use/> feature. But it seems no software can render this composed SVG correctly. Chrome ignores nested clipPath; firefox has trouble with the math in coordinate transform, which makes the result badly unaligned.

Sep 10 '22 14:09 huww98

Strange, I thought there should be a warning because of an unresolved link.

And interestingly, are we having a test case that expects a blank render result?

Yes, because this is a regression test. See: https://github.com/RazrFalcon/resvg/tree/master/tests#resvg-tests-vs-resvg-test-suite-tests The test is actually marked as failing in the resvg-test-suite itself.

But it seems no software can render this composed SVG correctly.

Welcome to the SVG world. You either use only the most primitive constructs or struggle with compatibility.

Sep 10 '22 15:09 RazrFalcon

Hello, I am using the use keyword in complex ways. I think that use can be used also in defs : https://www.w3.org/TR/SVG2/struct.html#DefsElement

I am using this to generate "nested" definitions and am using them creating a smaller svg file. I have attached a simple testfile use-test.svg

I process the file with debian package libbatik-java version 1.16+dfsg-1 and resvg version 0.35.0 (commit 3649b52f645990a114c9b715f7d5139ccba8df05)

resvg returns a blank png and I have attached the batik result. use-test batik

I have a solution that works, but maybe the usecase helps to test the use implementation.

Jun 30 '23 13:06 alfadir

resvg is correct. You should use id, not xml:id. Your SVG would not work in any app except Batik (which is its bug? I guess).

Jul 01 '23 10:07 RazrFalcon