Cannot use svgs with "<g>","<rect>" elements.

[AmilaWijayarathna]

Hi, thank you for the library, I'm trying to use this for svg coloring, but svgs with <rect>, <g> elements are not working. Any guidance for this is appreciated. Thank you!

[pflammertsma]

Can you please provide a minimal working example of this issue? <rect> and <g> tags are supported; something else must be going wrong.

[pflammertsma]

It would be helpful to add a SVG that illustrates the problem. Thanks!

[yexuan910812]

Hi, if @AmilaWijayarathna can not provide the example, I can give it to you:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>3.Icons/Outlined/sticker</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M11.717512,3.9140581 C11.4775905,3.56055155 10.7702467,3.36880195 10.2536908,3.60871312 C9.95575598,3.74706904 9.91613125,3.84446884 9.87680242,4.95341878 C9.86565838,5.26764565 9.86408435,5.30813886 9.85767085,5.44349806 C9.80513638,6.5541423 9.75049181,6.96962214 9.57088875,7.4452733 C9.26297967,8.25945803 8.80961054,8.7934199 8.07664984,9.22315517 C7.50585746,9.55783793 7.17689035,9.70760516 6.75736937,9.79997682 C6.26626332,9.90805448 5.83065051,9.95539436 5.35531284,9.95539436 L3.79309615,9.95539436 C3.62881963,9.95539436 3.5,10.0825391 3.5,10.2342099 L3.5,16.301303 C3.5,16.4530196 3.62678668,16.579159 3.78981454,16.5801306 C9.27711442,16.6151227 11.7276398,16.6149301 12.1980487,16.5765041 C12.8943874,16.5194834 13.8574861,16.1589689 14.2693902,15.8197652 C15.6511375,14.6823421 16.2534708,10.8501039 15.5051425,9.18258898 C15.4074467,8.96489164 15.1914406,8.78827269 14.8121181,8.65134589 C14.4953315,8.53699315 14.1539441,8.47843028 13.8928942,8.47361954 C13.6179807,8.47811847 13.3074228,8.39874824 13.0394255,8.24420625 C12.4610137,7.9106622 12.1920077,7.32006533 12.1920077,6.56351082 C12.1920077,5.03269631 12.0765059,4.44289726 11.717512,3.9140581 Z M12.544887,3.35240811 C13.0550264,4.10390205 13.1920077,4.89674065 13.1920077,6.56351082 C13.1920077,7.01829741 13.3230882,7.2534287 13.5389737,7.37792017 C13.6641903,7.45012695 13.7990151,7.47502197 13.8765315,7.47375342 C14.2181311,7.47934731 14.6790602,7.54015719 15.1516512,7.71075178 C15.7385362,7.9226039 16.1886566,8.26325825 16.4174839,8.77315882 C17.2342515,10.5931784 16.8232565,15.0127103 14.9049355,16.5918288 C14.3293645,17.0658124 13.1730991,17.5 12.279662,17.5731682 C11.7232052,17.6186231 8.87411167,17.6125732 3.78343773,17.5801102 C3.07430933,17.5758845 2.5,17.0064293 2.5,16.301303 L2.5,10.2342099 C2.5,9.52603757 3.08072592,8.95539436 3.79309615,8.95539436 L5.35531284,8.95539436 C5.74441965,8.95539436 6.10831009,8.91888615 6.54244246,8.82334668 C6.84875214,8.7559023 7.10324317,8.63468446 7.57083999,8.36051017 C8.09489813,8.05325459 8.40371856,7.70453734 8.63554135,7.09154283 C8.76661668,6.74440964 8.81112636,6.40386939 8.85878766,5.39624999 C8.86510937,5.26282807 8.86668944,5.22084623 8.87743071,4.91797614 C8.92614451,3.54439945 9.07179037,3.05500184 9.83250674,2.70173793 C10.8491894,2.22954602 12.0636819,2.64338826 12.544887,3.35240811 Z" id="path-1"></path>
    </defs>
    <g id="200601-tl-广告" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="综合备份-3" transform="translate(-136.000000, -546.000000)">
            <g id="编组-8" transform="translate(106.000000, 450.000000)">
                <g id="编组-6" transform="translate(16.000000, 85.500000)">
                    <g id="3.Icons/Outlined/sticker" transform="translate(12.000000, 8.000000)">
                        <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <use id="Combined-Shape" fill-opacity="0.9" fill="#000000" xlink:href="#path-1"></use>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

It will present as a black picture with Sharp, but show a "thumb" picture in browser (like Chrome)

@pflammertsma Looking forward to your reply!

[alexbejann]

This is still an issue