Ripped Shirt SF Symbol (CC BY-NC-SA 4.0)

shirt.ripped-sfsymbol-issue.md

Summary

• Issue: Overlapping paths in an SF Symbol render as cutouts instead of fills on the overlapping spots.
• Solution: This can apparently be solved—at least in this case—by reversing the path order of the overlapping paths.

Issue description

As you can see in Github's rendering of the SF Symbol shirt.ripped-sfsymbol-incorrect.svg, the three shirt renderings render completely black, without cutouts in the shirt's outline.

However, when you drag the file into the SF Symbols app, you can see that SF Symbols somehow uses a different rendering, and the overlap of the ripped parts of the shirt with its outline are cut out (i.e. not filled) instead. But this doesn't appear to happen with the collar, that also overlaps with the outline.

Workaround

With some help, we figured out that reversing the path's node order can solve this. By reversing the paths of the 'rip' shapes, we can convince SF Symbols to render the icon with fills instead of cutouts.

The question still remains why it didn't work in the first place, since even macOS' own preview rendering of the SVG shows it correctly.

Additional notes

• The vector file is adjusted to be more compact in Sketch. It opens in SF Symbols app, but won't open in Xcode.

shirt.ripped-sfsymbol-issue.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="216px" viewBox="0 0 800 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>shirt.ripped-sfsymbol</title>
    <defs>
        <path d="M0,0 L800,0 L800,216 L0,216 L0,0 Z" id="path-1"></path>
    </defs>
    <g id="shirt.ripped-sfsymbol" stroke="none" fill="none" fill-rule="evenodd" stroke-width="1">
        <g id="SF-Symbol-Template" xlink:href="#path-1">
            <g id="Notes">
                <rect id="Rectangle" fill="color(display-p3 1.000 1.000 1.000)" fill-rule="nonzero" x="0" y="0" width="800" height="216"></rect>
                <text id="Small" fill="color(display-p3 0.000 0.000 0.000)" fill-rule="nonzero" font-family="Helvetica" font-size="13" font-weight="normal">
                    <tspan x="18" y="176">Small</tspan>
                </text>
                <text id="Ultralight" fill="color(display-p3 0.000 0.000 0.000)" fill-rule="nonzero" font-family="Helvetica" font-size="9" font-weight="normal">
                    <tspan x="232" y="30">Ultralight</tspan>
                </text>
                <text id="Regular" fill="color(display-p3 0.000 0.000 0.000)" fill-rule="nonzero" font-family="Helvetica" font-size="9" font-weight="normal">
                    <tspan x="432" y="30">Regular</tspan>
                </text>
                <text id="Black" fill="color(display-p3 0.000 0.000 0.000)" fill-rule="nonzero" font-family="Helvetica" font-size="9" font-weight="normal">
                    <tspan x="638.5" y="30">Black</tspan>
                </text>
                <text id="template-version" fill="color(display-p3 0.314 0.314 0.314)" fill-rule="nonzero" font-family="Helvetica" font-size="9" font-weight="normal">
                    <tspan x="727" y="187">Template v.3.0</tspan>
                </text>
                <text id="credits" fill="color(display-p3 0.314 0.314 0.314)" fill-rule="nonzero" font-family="Helvetica" font-size="9" font-weight="normal">
                    <tspan x="528" y="202">https://github.com/swhitty/SwiftDraw, modified by Bruno Scheele</tspan>
                </text>
                <text id="instructions" fill="color(display-p3 0.314 0.314 0.314)" fill-rule="nonzero" font-family="Helvetica" font-size="9" font-weight="normal">
                    <tspan x="18" y="202">‘Copy image as…’ with SVG, 100 points and Small</tspan>
                </text>
            </g>
            <g id="Guides" transform="translate(0, 53)" fill="color(display-p3 0.000 0.000 0.000)">
                <line x1="0" y1="20" x2="800" y2="20" id="Capline-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <path d="M67,89.755 L69.685,89.755 L95.369,23.287 L96.052,23.287 L96.052,20 L94.148,20 L67,89.755 Z M77.693,65.536 L112.996,65.536 L112.263,63.313 L78.474,63.313 L77.693,65.536 Z M121.15,89.755 L123.787,89.755 L96.638,20 L95.466,20 L95.466,23.287 L121.15,89.755 Z" id="H-reference" fill-rule="nonzero"></path>
                <line x1="0" y1="90" x2="800" y2="90" id="Baseline-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <line x1="188.5" y1="0" x2="188.5" y2="110" id="left-margin-Ultralight-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <line x1="304.5" y1="0" x2="304.5" y2="110" id="right-margin-Ultralight-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <line x1="389.5" y1="0" x2="389.5" y2="110" id="left-margin-Regular-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <line x1="510.5" y1="0" x2="510.5" y2="110" id="right-margin-Regular-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <line x1="587.5" y1="0" x2="587.5" y2="110" id="left-margin-Black-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
                <line x1="714.5" y1="0" x2="714.5" y2="110" id="right-margin-Black-S" stroke="color(display-p3 0.153 0.667 0.882)" stroke-width="0.5" fill-rule="nonzero"></line>
            </g>
        </g>
        <g id="Symbols" transform="translate(15.8078, 60.7979)" fill="color(display-p3 0.000 0.000 0.000)">
            <g id="Black-S" transform="translate(581.1922, 1)">
                <path d="M80.4272675,47.3702504 L62.1526616,51.9492897 C61.8022871,52.0370824 61.6598013,52.38966 61.8022871,52.6905833 L63.2985988,55.8507241 C63.4122053,56.0906558 63.3308805,56.3776252 63.1082853,56.5222801 L53.7244224,62.6204424 C53.3453217,62.8668034 53.4396469,63.4144653 53.8251688,63.5608194 L66.7848218,68.480641 C66.9500288,68.5433579 67.1356223,68.5196567 67.2797659,68.4174344 L74.5132853,63.287636 C74.6029354,63.2240588 74.7101253,63.1899087 74.8200307,63.1899087 L81.0498989,63.1899087 L80.4272675,47.3702504 Z" id="rip"></path>
                <path d="M8.50197449,31.9326325 L11.7192201,41.3628108 L23.0593203,39.2768711 L25.1765428,26.5641798 C25.2585982,26.0714848 24.7127429,25.6934379 24.2788601,25.9607388 C19.4744362,28.9368881 17.0300084,30.4410792 16.9455768,30.4733122 C16.8611452,30.5055451 14.0466111,30.9919852 8.50197449,31.9326325 Z" id="rip"></path>
                <path d="M76.1787538,14.2317162 C73.5820619,24.1998107 64.4176232,32.0179284 54.259078,32.0179284 C44.0985465,32.0179284 34.9401175,24.1993601 32.3450007,14.2309634 L41.9864508,11.7072781 C43.4819726,17.4518961 48.8379084,22.0262652 54.259078,22.0262652 C59.6773197,22.0262652 65.0408152,17.4527008 66.5376958,11.7065253 L76.1787538,14.2317162 Z" id="collar"></path>
                <path d="M73.1770504,78.5108379 C74.173164,78.5108379 74.6612195,77.7161961 74.6715166,77.0374732 L75.348685,37.1034131 C75.348685,34.9403841 76.743335,33.9873058 78.7166105,34.183406 L91.1282151,35.3828289 C91.6613184,35.5025369 92.1278329,35.0707598 92.2527214,34.5374716 L94.3686813,24.188547 C94.4795957,23.7149297 94.3294143,23.4294761 93.8827062,23.2396174 L70.5994227,13.3408028 C64.2636827,15.9254284 58.5872969,17.0429289 54,17.0754722 C49.4127031,17.1080154 43.9475087,16.0115826 37.4005773,13.3408028 L14.1172938,23.2396174 C13.6705857,23.4294761 13.4981357,23.7149297 13.6090501,24.188547 L15.7472786,34.5374716 C15.8721671,35.0707598 16.3386816,35.5025369 16.8717849,35.3828289 L29.2833895,34.183406 C31.256665,33.9873058 32.651315,34.9751889 32.651315,37.1034131 L33.3284834,77.0374732 C33.3387901,77.7168277 33.8264959,78.5108379 34.8229496,78.5108379 L73.1770504,78.5108379 Z M34.8364961,91.5 C27.3109957,91.5 20.5015931,85.5066437 20.3764425,77.2574741 L19.8846219,48.1448297 L14.0633644,48.7112573 C9.19981346,49.1729676 5.04505021,46.1635382 3.87569054,41.1702381 L0.223166618,23.3089262 C-0.878821006,18.6033125 2.27736442,14.1608368 5.80234879,12.6627822 L34.0374617,0.66237534 C36.2794691,-0.290085769 38.7081804,-0.140050698 40.5793024,0.634493063 C46.4186412,3.05166494 50.3473712,4.06072264 54,4.08663516 C57.6526288,4.11254768 61.4044091,3.12491258 67.4206976,0.634493063 C69.2918196,-0.140050698 71.7205309,-0.290085769 73.9625383,0.66237534 L102.197651,12.6627822 C105.722636,14.1608368 108.878821,18.6033125 107.776833,23.3089262 L104.124309,41.1702381 C102.95495,46.1635382 98.8001865,49.1729676 93.9366356,48.7112573 L88.1153781,48.1448297 L87.6235575,77.2574741 C87.4984069,85.5066437 80.6890043,91.5 73.1635039,91.5 L34.8364961,91.5 Z" id="shirt" fill-rule="nonzero"></path>
            </g>
            <g id="Regular-S" transform="translate(383.1922, 3.9896)">
                <path d="M77.4119995,44.3806066 L60.18053,48.6982688 C59.8501553,48.7810502 59.7158028,49.1135022 59.8501553,49.3972485 L61.2610557,52.3770047 C61.3681775,52.6032408 61.2914948,52.8738296 61.0816056,53.0102274 L52.2333848,58.7602993 C51.8759237,58.9925977 51.9648647,59.5089984 52.3283805,59.6469984 L64.548281,64.2859907 C64.7040578,64.3451276 64.8790574,64.3227794 65.0149731,64.226392 L71.8355945,59.3894087 C71.9201272,59.3294606 72.0211986,59.2972598 72.1248305,59.2972598 L77.9990904,59.2972598 L77.4119995,44.3806066 Z" id="rip"></path>
                <path d="M5.45116592,27.9828658 L8.15871516,35.9190558 L17.7022451,34.1635839 L19.4840439,23.4649173 C19.5530995,23.0502782 19.0937221,22.7321238 18.7285777,22.9570772 C14.685301,25.4617262 12.6281349,26.7276139 12.5570795,26.7547402 C12.486024,26.7818666 10.1173862,27.1912418 5.45116592,27.9828658 Z" id="rip"></path>
                <path d="M70.7515994,6.8678879 C68.327174,16.165725 60.7369147,22.5321508 51.2592813,22.5321508 C41.7794151,22.5321508 34.1954418,16.1651763 31.7725661,6.86736103 L38.5268773,5.10109844 C40.1744736,11.4237695 45.0746031,15.539242 51.2592813,15.539242 C57.4410121,15.539242 62.3485504,11.4246471 63.9975629,5.10057157 L70.7515994,6.8678879 Z" id="collar"></path>
                <path d="M70.2234185,78.5070912 C72.6752136,78.5070912 74.6731662,76.5358459 74.7104601,74.0800293 L75.3690212,30.7687397 C75.3690212,29.8855707 76.2701465,28.8640738 77.4036416,29.1201902 L90.7736789,32.1097218 C91.3072005,32.2294083 91.8374439,31.8964454 91.9624304,31.3632529 L94.7435652,19.4989296 C94.8545666,19.0253973 94.608971,18.5406064 94.1619123,18.3507818 L67.696877,7.11352304 C61.3561651,9.69768475 55.5908967,11.0563687 51,11.0889061 C46.4091033,11.1214435 40.8551919,9.78382348 34.303123,7.11352304 L7.83808774,18.3507818 C7.39102901,18.5406064 7.1454334,19.0253973 7.25643485,19.4989296 L10.0375696,31.3632529 C10.1625561,31.8964454 10.6927995,32.2294083 11.2263211,32.1097218 L24.5963584,29.1201902 C25.7298535,28.8640738 26.6309788,29.8855707 26.6309788,30.7687397 L27.2895399,74.0800293 C27.3268338,76.5358459 29.3247864,78.5070912 31.7765815,78.5070912 L70.2234185,78.5070912 Z M31.7765815,85.5 C25.5108829,85.5 20.405004,80.462373 20.3096975,74.1863973 L19.7505086,37.3635724 L11.307099,39.2577083 C7.83920844,40.0356709 4.39262656,37.8714118 3.58021429,34.4056604 L0.172452974,19.8681482 C-0.549073192,16.790117 1.04738913,13.6389129 3.95327904,12.4051521 L32.1439986,0.435154628 C33.4954091,-0.138405394 35.0199157,-0.145457347 36.3796517,0.41685786 C42.2055393,2.83268859 46.7504825,4.03365734 51,4.09482309 C55.2495175,4.15598885 59.7944607,2.83268859 65.6203483,0.41685786 C66.9800843,-0.145457347 68.5045909,-0.138405394 69.8560014,0.435154628 L98.046721,12.4051521 C100.952611,13.6389129 102.549073,16.790117 101.827547,19.8681482 L98.4197857,34.4056604 C97.6073734,37.8714118 94.1607916,40.0356709 90.692901,39.2577083 L82.2494914,37.3635724 L81.6903025,74.1863973 C81.594996,80.462373 76.4891171,85.5 70.2234185,85.5 L31.7765815,85.5 Z" id="shirt" fill-rule="nonzero"></path>
            </g>
            <g id="Ultralight-S" transform="translate(178.786, 4.2021)">
                <path d="M78.8577213,43.7963766 L66.2943021,47.102811 C66.0613632,47.1611781 65.9666346,47.3955817 66.0613632,47.5956441 L67.0561537,49.6965952 C67.1316825,49.8561087 67.0776155,50.046894 66.9296279,50.1430647 L60.6909697,54.1972959 C60.4389328,54.3610837 60.5016429,54.7251848 60.7579488,54.8224852 L69.3738936,58.0933221 C69.4837279,58.1350181 69.6071157,58.1192609 69.7029464,58.0513006 L74.5119953,54.6408651 C74.5715972,54.5985972 74.6428601,54.5758933 74.7159283,54.5758933 L78.8577213,54.5758933 L78.8577213,43.7963766 Z" id="rip"></path>
                <path d="M6.30979691,29.453628 L8.44310612,35.7066434 L15.9625632,34.3234869 L17.3664629,25.8938844 C17.4208727,25.5671854 17.0589239,25.3165079 16.7712225,25.4937513 C13.5854782,27.4671931 11.9646134,28.4646005 11.908628,28.4859737 C11.8526426,28.5073469 9.98636555,28.8298984 6.30979691,29.453628 Z" id="rip"></path>
                <path d="M69.3853658,4.02784745 C66.864741,13.3350912 59.616209,17.8425873 52.26,17.8425873 C44.903791,17.8425873 37.6294026,13.2978119 35.1402527,4.02784745 L37.0754052,3.52727021 C38.6529261,9.85551586 44.0022736,15.8425873 52.2628092,15.8425873 C60.5233449,15.8425873 65.8473541,9.90353284 67.450292,3.52268926 L69.3853658,4.02784745 Z" id="collar"></path>
                <path d="M71.127903,80.7915932 C74.50036,80.7915932 78.04198,78.1950605 78.1071204,73.9053233 L78.7314314,32.7921234 C78.7314314,31.877941 79.1149691,31.6143294 79.9524409,31.803568 L92.5761195,34.6597671 C93.5337629,34.874609 94.6796741,34.3347024 94.9534096,33.166888 L98.3608657,18.6299475 C98.5786062,17.7010198 98.0975991,16.7158806 97.1976093,16.3337188 L68.6224304,4.20420979 C62.2804216,6.83700315 56.5680336,8.34802386 51.8613336,8.38138368 C47.1546335,8.41474351 41.7433908,6.92476293 35.1899817,4.20420979 L6.61480281,16.3337188 C5.714813,16.7158806 5.2338059,17.7010198 5.45154636,18.6299475 L8.85900251,33.166888 C9.13273797,34.3347024 10.2786492,34.874609 11.2362926,34.6597671 L23.8599712,31.803568 C24.6974429,31.6143294 25.0809807,31.877941 25.0809807,32.7921234 L25.7052916,73.9053233 C25.770432,78.1950605 29.3120521,80.7915932 32.684509,80.7915932 L71.127903,80.7915932 Z M32.684509,82.7894885 C27.2063494,82.7894885 23.7759085,78.1950605 23.7112295,73.9357129 L23.1054726,34.0443626 L11.6721001,36.6093749 C9.28635572,37.1446032 7.34747627,35.4579027 6.91751999,33.6236167 L3.51006385,19.0866762 C3.08503214,17.2733996 3.9849036,15.2804277 5.83654933,14.4942305 L34.0243716,2.52486202 C34.7975922,2.19667848 35.631361,2.22571858 36.3546843,2.52486202 C42.1981187,4.94152009 47.8229933,6.32091294 51.8613336,6.38214583 C55.8996739,6.44337872 61.6142934,4.94152009 67.4577278,2.52486202 C68.181051,2.22571858 69.0148199,2.19667848 69.7880405,2.52486202 L97.9758628,14.4942305 C99.8275085,15.2804277 100.72738,17.2733996 100.302348,19.0866762 L96.8948921,33.6236167 C96.4649358,35.4579027 94.5260564,37.1446032 92.1403119,36.6093749 L80.7069395,34.0443626 L80.1011825,73.9357129 C80.0365036,78.1950605 76.6060626,82.7894885 71.127903,82.7894885 L32.684509,82.7894885 Z" id="shirt" fill-rule="nonzero"></path>
            </g>
        </g>
    </g>
</svg>

shirt.ripped-sfsymbol-solved.svg