Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG rendering incorrectly #53

Closed
nrempel opened this issue Sep 15, 2016 · 8 comments
Closed

SVG rendering incorrectly #53

nrempel opened this issue Sep 15, 2016 · 8 comments
Assignees
@kisenka

Comments

@nrempel
Copy link

nrempel commented Sep 15, 2016

Hi there,

I've been debugging this issue for a while and I'm having trouble tracking down the issue.

An SVG I'm loading in React using this library is not rendering correctly.

It looks like:

screenshot 2016-09-14 17 01 17

But it should look like:

screenshot 2016-09-14 17 03 31

Both of those screen shots are rendered in Chrome. The first one is using this library with the prescribed React method. The second one, I use raw-loader and dangerouslySetInnerHtml on an element and it works.

Does anyone know what might be causing this?

Are there any optimization steps that I can turn off that might be corrupting the image?

Thanks!
@princed
Copy link
Contributor

princed commented Sep 15, 2016 •
edited

Seems to be duplicate of #27, please check if you use fill via css.

@nrempel
Copy link
Author

nrempel commented Sep 15, 2016

Hi @princed, thanks for the quick response.

I discovered the issue. It turns out it was use of the mask attribute. Once I deleted any use of the mask attribute from the svg file, it worked.

I'm not sure if this is related directly to #27 but I've attached the original and modified svg files so you can use as a failing test case if you want.

Original:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>B7C0CE76-CB8B-4E18-9C80-10E37AB8944C</title>
    <desc>Created with sketchtool.</desc>
    <defs>
        <polygon id="path-1" points="1.91225309 1.87632334 1.91225309 0.0469396836 0.0674074074 0.0469396836 0.0674074074 1.87632334 1.91225309 1.87632334"></polygon>
        <polygon id="path-3" points="0 0.0652356625 0 6.58280323 3.21626235 6.58280323 3.21626235 0.0652356625 0 0.0652356625"></polygon>
        <polygon id="path-5" points="36.9777333 0.253376644 0.178733333 0.253376644 0.178733333 21.8656782 36.9777333 21.8656782 36.9777333 0.253376644"></polygon>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Positive-Review-Screen" transform="translate(-80.000000, -572.000000)">
            <g id="Tripadvisor" transform="translate(80.000000, 572.000000)">
                <rect id="Rectangle-9" fill="#07A54E" x="0" y="0" width="58.9900017" height="58.9900017" rx="10"></rect>
                <g id="Tripadvisor-Wordmark" transform="translate(6.000000, 40.000000)">
                    <path d="M47.4979383,3.64404087 C47.6364259,3.64404087 47.6573827,3.64404087 47.6919506,3.63225775 C47.7697284,3.60890574 47.7755617,3.55363217 47.7755617,3.4983586 C47.7755617,3.42808833 47.7511481,3.39466711 47.7029691,3.37795649 C47.6649444,3.36617337 47.6346975,3.36617337 47.4979383,3.36617337 L47.4979383,3.64404087 Z M47.4979383,4.21477258 L47.2566111,4.21477258 L47.2566111,3.20892221 L47.6161173,3.20892221 C47.7967346,3.20892221 48.026179,3.23056032 48.026179,3.50178642 C48.026179,3.62904417 47.9697901,3.72609426 47.8135864,3.7678708 L48.056642,4.21477258 L47.7906852,4.21477258 L47.579821,3.80471984 L47.4979383,3.80471984 L47.4979383,4.21477258 Z" id="Fill-12" fill="#FEFEFE"></path>
                    <g id="Group-16" transform="translate(46.666667, 2.785415)">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <g id="Clip-15"></g>
                        <path d="M0.989938272,1.70386124 C0.576419753,1.70386124 0.240462963,1.37072017 0.240462963,0.960667436 C0.240462963,0.5506147 0.576419753,0.217687871 0.989938272,0.217687871 C1.40345679,0.217687871 1.73941358,0.5506147 1.73941358,0.960667436 C1.73941358,1.37072017 1.40345679,1.70386124 0.989938272,1.70386124 M0.989938272,0.0469396836 C0.480277778,0.0469396836 0.0674074074,0.45527851 0.0674074074,0.960667436 C0.0674074074,1.4662706 0.480277778,1.87632334 0.989938272,1.87632334 C1.49959877,1.87632334 1.91246914,1.4662706 1.91246914,0.960667436 C1.91246914,0.45527851 1.49959877,0.0469396836 0.989938272,0.0469396836" id="Fill-14" fill="#FEFEFE" mask="url(#mask-2)"></path>
                    </g>
                    <g id="Group-19" transform="translate(0.000000, 1.928461)">
                        <mask id="mask-4" fill="white">
                            <use xlink:href="#path-3"></use>
                        </mask>
                        <g id="Clip-18"></g>
                        <path d="M3.21626235,2.13735168 L3.21626235,1.30717699 L1.85255864,1.30717699 L1.85255864,0.0652356625 L0.803854938,0.374810481 L0.803854938,1.30717699 L-6.48148149e-05,1.30717699 L-6.48148149e-05,2.13735168 L0.803854938,2.13735168 L0.803854938,4.79862393 C0.803854938,5.98186388 1.29126235,6.58280323 2.25333025,6.58280323 C2.59857716,6.58280323 2.8988858,6.53588497 3.14583025,6.4439766 L3.17586111,6.43219347 L3.1285463,5.61380191 L3.07626235,5.62879862 C2.9360463,5.66886124 2.75175617,5.68899967 2.52792901,5.68899967 C2.29049074,5.68899967 2.12262037,5.6187294 2.01567593,5.47476104 C1.90721914,5.3275791 1.85255864,5.07820534 1.85255864,4.73670897 L1.85255864,2.13735168 L3.21626235,2.13735168 Z" id="Fill-17" fill="#FEFEFE" mask="url(#mask-4)"></path>
                    </g>
                    <path d="M6.83889198,3.14190837 C6.72633025,3.12691167 6.63796605,3.12005603 6.56883025,3.12005603 C6.24691667,3.12005603 5.94466358,3.22396177 5.67092901,3.42813118 C5.44256481,3.59716546 5.26151543,3.82490112 5.13080556,4.1059822 L5.07636111,3.23553065 L4.12271914,3.23553065 L4.12552778,3.280735 C4.15383025,3.69764338 4.16787346,4.23988134 4.16787346,4.89266645 L4.16787346,8.39568227 L5.23753395,8.39568227 L5.23753395,5.66928148 C5.23753395,5.17224786 5.36284259,4.78554713 5.60978704,4.51774885 C5.85521914,4.25316414 6.15315123,4.11776533 6.49494136,4.11776533 C6.6211142,4.11776533 6.73216358,4.12783454 6.82420062,4.14775873 L6.87648457,4.15954186 L6.87648457,3.14683586 L6.83889198,3.14190837 Z" id="Fill-20" fill="#FEFEFE"></path>
                    <polygon id="Fill-22" fill="#FEFEFE" points="7.80608025 8.39568227 8.87574074 8.39568227 8.87574074 3.23553065 7.80608025 3.23553065"></polygon>
                    <path d="M8.33561728,2.39877884 C8.53740741,2.39877884 8.70225309,2.33343606 8.82626543,2.20789222 C8.95049383,2.08084871 9.0133642,1.92338332 9.0133642,1.73763843 C9.0133642,1.55510712 8.94919753,1.39956987 8.82345679,1.27402604 C8.69771605,1.15019611 8.53697531,1.08656724 8.3462037,1.08656724 C8.14830247,1.08656724 7.98410494,1.15019611 7.8583642,1.27402604 C7.73219136,1.39956987 7.66845679,1.55510712 7.66845679,1.73763843 C7.66845679,1.92338332 7.73132716,2.08084871 7.85533951,2.20789222 C7.9795679,2.33343606 8.14117284,2.39877884 8.33561728,2.39877884" id="Fill-24" fill="#FEFEFE"></path>
                    <path d="M11.4561049,4.25327126 C11.684037,4.09087838 11.9372469,4.00732531 12.2092531,4.00732531 C12.6394074,4.00732531 12.974716,4.16800428 13.2341914,4.49921721 C13.4947469,4.83235827 13.6267531,5.26083553 13.6267531,5.77308009 C13.6267531,6.34552571 13.4930185,6.80571028 13.2296543,7.13885135 C12.9662901,7.47177818 12.6195309,7.63417106 12.1688519,7.63417106 C11.8050247,7.63417106 11.4898086,7.50027192 11.2316296,7.23761536 C10.9730185,6.97474456 10.8416605,6.64503131 10.8416605,6.25683092 L10.8416605,5.43822512 C10.8416605,5.29275709 10.887679,5.09844265 10.9779877,4.85742419 C11.0665679,4.62154746 11.2273086,4.41887772 11.4561049,4.25327126 M14.0854259,3.83979071 C13.6680185,3.3461849 13.1384815,3.09509723 12.510642,3.09509723 C11.7501481,3.09509723 11.1555802,3.39138926 10.7407654,3.97540376 L10.6973395,3.21057185 L9.72468519,3.21057185 L9.72943827,3.28255603 C9.75601235,3.70931938 9.76940741,4.26826796 9.76940741,4.94611898 L9.76940741,10.4978988 L10.8416605,10.4978988 L10.8416605,7.856765 C10.9903025,8.04936552 11.1797778,8.20490277 11.4066296,8.32037739 C11.6915988,8.46434575 12.0089753,8.53632993 12.3499012,8.53632993 C13.0203025,8.53632993 13.5878642,8.27860086 14.0363827,7.77149802 C14.4829568,7.2661091 14.7091605,6.57968853 14.7091605,5.73108932 C14.7091605,4.96797132 14.4993765,4.33018293 14.0854259,3.83979071" id="Fill-25" fill="#FEFEFE"></path>
                    <path d="M17.994537,7.36977917 C17.7506173,7.5906592 17.4433951,7.70292024 17.0830247,7.70292024 C16.8311111,7.70292024 16.6269444,7.62922215 16.4754938,7.48525379 C16.3246914,7.34299934 16.2484259,7.14054384 16.2484259,6.88431444 C16.2484259,6.5563151 16.3990123,6.30351351 16.7092593,6.11455504 C17.0156173,5.92709624 17.5712963,5.82983191 18.3611728,5.82661833 L18.3611728,6.62337179 C18.3611728,6.89952538 18.2380247,7.15061305 17.994537,7.36977917 L17.994537,7.36977917 Z M19.4937037,8.34563612 C19.438179,8.0427027 19.4098765,7.63586355 19.4098765,7.13711602 L19.4098765,5.28095254 C19.4098765,4.58810481 19.2342284,4.04908042 18.8883333,3.67909031 C18.5409259,3.30760053 18.0224074,3.12014173 17.3472531,3.12014173 C16.6584877,3.12014173 16.0567901,3.27739288 15.5585802,3.58889585 L15.5294136,3.60560646 L15.780463,4.32866183 L15.8264815,4.30016809 C16.2263889,4.04736651 16.6880864,3.9186091 17.1990432,3.9186091 C17.5766975,3.9186091 17.8640432,4.0156592 18.0535185,4.20804548 C18.243858,4.3989321 18.340216,4.67165788 18.340216,5.01808174 L18.340216,5.07014173 C17.3219753,5.07506922 16.5336111,5.24067568 15.9978086,5.56374753 C15.4475309,5.89517469 15.168179,6.38235333 15.168179,7.01157218 C15.168179,7.42333883 15.3200617,7.77983191 15.6197222,8.0709822 C15.9193827,8.36406065 16.3227469,8.51124258 16.8185802,8.51124258 C17.4885494,8.51124258 18.0237037,8.27365194 18.4106481,7.80489782 L18.5160802,8.39576796 L19.5029938,8.39576796 L19.4937037,8.34563612 Z" id="Fill-26" fill="#FEFEFE"></path>
                    <path d="M23.7924383,5.36463415 L23.7924383,6.17145682 C23.7924383,6.60828939 23.6587037,6.96135465 23.3940432,7.22251154 C23.1291667,7.48195452 22.8236728,7.61413975 22.4855556,7.61413975 C22.0361728,7.61413975 21.6961111,7.45174687 21.446358,7.11710613 C21.1955247,6.78053724 21.0682716,6.35056032 21.0682716,5.83660185 C21.0682716,5.28922215 21.2028704,4.83910679 21.468179,4.49932432 C21.7328395,4.16125577 22.0724691,3.99714898 22.5058642,3.99714898 C22.8569444,3.99714898 23.1620062,4.12269281 23.4134877,4.37206658 C23.6649691,4.62144034 23.7924383,4.95629532 23.7924383,5.36463415 L23.7924383,5.36463415 Z M24.9107099,8.42096243 L24.9046605,8.34726434 C24.8785185,8.0276203 24.8651235,7.58243243 24.8651235,7.0215557 L24.8651235,0.81870468 L23.7924383,0.81870468 L23.7924383,3.72763678 C23.651142,3.56031641 23.4737654,3.42148978 23.2637654,3.31265656 C22.9852778,3.16697429 22.6657407,3.09499011 22.3146605,3.09499011 C21.6572222,3.09499011 21.0976543,3.35957482 20.6525926,3.88167436 C20.2099074,4.40056032 19.9858642,5.08012525 19.9858642,5.90023072 C19.9858642,6.65670732 20.1988889,7.29278181 20.6199691,7.78660185 C21.0432099,8.28363546 21.5800926,8.53643705 22.2141975,8.53643705 C22.6071914,8.53643705 22.9636728,8.44431444 23.2743519,8.26028345 C23.5210802,8.11460119 23.7241667,7.91878708 23.8801543,7.67948253 L23.9384877,8.42096243 L24.9107099,8.42096243 Z" id="Fill-27" fill="#FEFEFE"></path>
                    <path d="M29.3016975,3.23563777 C29.3016975,3.23563777 27.9665123,5.93868655 27.8712346,6.24333388 C27.750463,5.87677159 26.4230556,3.23563777 26.4230556,3.23563777 L25.2617901,3.23563777 L27.8762037,8.39578939 L30.4435185,3.23563777 L29.3016975,3.23563777 Z" id="Fill-28" fill="#FEFEFE"></path>
                    <polygon id="Fill-29" fill="#FEFEFE" points="30.961821 8.39568227 32.0319136 8.39568227 32.0319136 3.23553065 30.961821 3.23553065"></polygon>
                    <path d="M31.4917253,2.39877884 C31.6935154,2.39877884 31.8587932,2.33343606 31.9828056,2.20789222 C32.1061698,2.08084871 32.1694722,1.92338332 32.1694722,1.73763843 C32.1694722,1.55510712 32.1053056,1.39956987 31.9795648,1.27402604 C31.8538241,1.15019611 31.6926512,1.08656724 31.5018796,1.08656724 C31.3044105,1.08656724 31.1397809,1.15019611 31.0140401,1.27402604 C30.8882994,1.39956987 30.8249969,1.55510712 30.8249969,1.73763843 C30.8249969,1.92338332 30.8874352,2.08084871 31.0114475,2.20789222 C31.1356759,2.33343606 31.2968488,2.39877884 31.4917253,2.39877884" id="Fill-30" fill="#FEFEFE"></path>
                    <path d="M36.2515525,5.99899473 C36.0329105,5.75626236 35.6692994,5.54373764 35.1713056,5.36634806 C34.7737747,5.22580751 34.5088981,5.09512195 34.385534,4.97793342 C34.2649784,4.8624588 34.2057809,4.72534608 34.2057809,4.55781147 C34.2057809,4.37035267 34.2751327,4.21974291 34.4177253,4.0993408 C34.5611821,3.98043837 34.7595154,3.9185234 35.0084043,3.9185234 C35.3763364,3.9185234 35.7384352,4.01900132 36.0869228,4.21652933 L36.1316451,4.24330916 L36.4034352,3.45833883 L36.3729722,3.4399143 C36.0084969,3.22717535 35.5604105,3.12005603 35.0405957,3.12005603 C34.4784352,3.12005603 34.0219228,3.27088003 33.6816451,3.56545814 C33.3407191,3.86324984 33.1678796,4.23495386 33.1678796,4.67350033 C33.1678796,5.32949901 33.650534,5.82653263 34.6033117,6.14960448 C34.9517994,6.26679301 35.1983117,6.39062294 35.3359352,6.51959459 C35.470966,6.64835201 35.5357809,6.80731707 35.5357809,7.01170073 C35.5357809,7.22251154 35.4573549,7.38661833 35.2935895,7.51194792 C35.1300401,7.63749176 34.8910895,7.70283454 34.5855957,7.70283454 C34.1517685,7.70283454 33.7257191,7.57729071 33.318034,7.33134476 L33.2707191,7.30285102 L33.0108117,8.13302571 L33.0421389,8.14973632 C33.4867685,8.38904087 33.9990216,8.51137113 34.5644228,8.51137113 C35.1814599,8.51137113 35.6768611,8.36568886 36.0372315,8.07775214 C36.4008426,7.78660185 36.5849167,7.39990112 36.5849167,6.92793342 C36.5849167,6.55794331 36.472571,6.24665458 36.2515525,5.99899473" id="Fill-31" fill="#FEFEFE"></path>
                    <path d="M39.6264815,7.70285597 C39.2138272,7.70285597 38.8653395,7.52546638 38.5909568,7.1756147 C38.3133333,6.82404911 38.1731173,6.36879202 38.1731173,5.82655405 C38.1731173,5.28260218 38.3081481,4.82391727 38.5741049,4.46421061 C38.8366049,4.10943144 39.2010802,3.92861404 39.6569444,3.92861404 C40.1050309,3.92861404 40.464537,4.11093111 40.7235802,4.4691381 C40.9869444,4.83248682 41.1202469,5.27917436 41.1202469,5.79484674 C41.1202469,6.35550923 40.9750617,6.81912162 40.6898765,7.17218688 C40.4070679,7.52375247 40.0492901,7.70285597 39.6264815,7.70285597 M41.4916358,3.86005768 C41.0333951,3.36945122 40.4291049,3.12007746 39.6964815,3.12007746 C38.9614815,3.12007746 38.3437963,3.37116513 37.8600617,3.86498517 C37.3774074,4.35880521 37.1326235,5.02830092 37.1326235,5.85847561 C37.1326235,6.63830422 37.3698457,7.28102011 37.8373765,7.77141233 C38.3057716,8.26180455 38.9074691,8.51117831 39.6264815,8.51117831 C40.0873148,8.51117831 40.5220062,8.3974176 40.9184568,8.17482367 C41.3159877,7.95222973 41.6292593,7.62915788 41.8494136,7.21417765 C42.069784,6.8006971 42.1810494,6.3137327 42.1810494,5.76292518 C42.1810494,4.98973797 41.9490123,4.3504499 41.4916358,3.86005768" id="Fill-32" fill="#FEFEFE"></path>
                    <path d="M45.772071,3.14190837 C45.6597253,3.12691167 45.5711451,3.12005603 45.5020093,3.12005603 C45.1805278,3.12005603 44.8782747,3.22396177 44.604108,3.42813118 C44.3761759,3.59716546 44.1946944,3.82490112 44.0639846,4.1059822 L44.0099722,3.23553065 L43.0563302,3.23553065 L43.0589228,3.280735 C43.0865772,3.69764338 43.1010525,4.23988134 43.1010525,4.89266645 L43.1010525,8.39568227 L44.1711451,8.39568227 L44.1711451,5.66928148 C44.1711451,5.17224786 44.2960216,4.78554713 44.5433981,4.51774885 C44.7888302,4.25316414 45.0867623,4.11776533 45.4285525,4.11776533 C45.5542932,4.11776533 45.6657747,4.12783454 45.7578117,4.14775873 L45.8100957,4.15954186 L45.8100957,3.14683586 L45.772071,3.14190837 Z" id="Fill-33" fill="#FEFEFE"></path>
                </g>
                <g id="Tripadvisor-Logo" transform="translate(10.000000, 13.000000)">
                    <path d="M9.85455556,11.1905597 C9.02907407,11.1905597 8.36018519,11.8596608 8.36018519,12.6854041 C8.36018519,13.5119255 9.02907407,14.1805078 9.85455556,14.1805078 C10.680037,14.1805078 11.3489259,13.5119255 11.3489259,12.6854041 C11.3489259,11.8596608 10.680037,11.1905597 9.85455556,11.1905597 L9.85455556,11.1905597 Z" id="Fill-1" fill="#FEFEFE"></path>
                    <path d="M28.2781667,11.1697865 C27.4526852,11.1697865 26.7832778,11.8383688 26.7832778,12.6651495 C26.7832778,13.4916709 27.4526852,14.1602533 28.2781667,14.1602533 C29.1036481,14.1602533 29.7720185,13.4916709 29.7720185,12.6651495 C29.7720185,11.8383688 29.1036481,11.1697865 28.2781667,11.1697865" id="Fill-3" fill="#FEFEFE"></path>
                    <g id="Group-7" transform="translate(0.770370, 0.005965)">
                        <mask id="mask-6" fill="white">
                            <use xlink:href="#path-5"></use>
                        </mask>
                        <g id="Clip-6"></g>
                        <path d="M27.7356593,15.74081 C26.0344,15.74081 24.6548815,14.3611133 24.6548815,12.659055 C24.6548815,10.9562187 26.0344,9.57626262 27.7356593,9.57626262 C29.4369185,9.57626262 30.816437,10.9562187 30.816437,12.659055 C30.816437,14.3611133 29.4369185,15.74081 27.7356593,15.74081 M27.7356593,8.21134832 C25.2796963,8.21134832 23.2898815,10.2020537 23.2898815,12.659055 C23.2898815,15.1147597 25.2796963,17.1065024 27.7356593,17.1065024 C30.1905852,17.1065024 32.181437,15.1147597 32.181437,12.659055 C32.181437,10.2020537 30.1905852,8.21134832 27.7356593,8.21134832 M27.7387704,20.0788153 C23.6655481,20.0788153 20.3638815,16.7761013 20.3638815,12.701587 C20.3638815,8.62862879 23.6655481,5.32565547 27.7387704,5.32565547 C31.8109556,5.32565547 35.112363,8.62862879 35.112363,12.701587 C35.112363,16.7761013 31.8109556,20.0788153 27.7387704,20.0788153 M9.43247407,3.54008925 C12.0535852,2.39846798 15.3080667,1.78253192 18.5806963,1.78253192 C21.8587704,1.78253192 24.8291037,2.40054271 27.4530667,3.54657279 C22.5271407,3.69750954 18.5796593,7.73623469 18.5786222,12.6995123 C18.5775852,7.64546517 14.4841407,3.54709147 9.43247407,3.54008925 M9.41847407,20.0788153 C5.34577037,20.0788153 2.0441037,16.7761013 2.0441037,12.701587 C2.0441037,8.62862879 5.34577037,5.32565547 9.41847407,5.32565547 C13.4911778,5.32565547 16.7931037,8.62862879 16.7931037,12.701587 C16.7931037,16.7761013 13.4911778,20.0788153 9.41847407,20.0788153 M36.9777333,3.66768527 L30.8558444,3.66768527 C27.7335852,1.56624111 23.4700667,0.253195105 18.5806963,0.253195105 C13.6889926,0.253195105 9.13277037,1.56520374 6.01051111,3.66768527 L0.178733333,3.66768527 C1.1296963,4.78051964 1.83358519,6.28651572 2.00884444,7.32076961 C0.909325926,8.83169318 0.258325926,10.6901344 0.258325926,12.701587 C0.258325926,17.7628957 4.35928889,21.8656782 9.41847407,21.8656782 C12.2889926,21.8656782 14.8502148,20.5427772 16.5296963,18.4760848 C17.2149185,19.2764127 18.3486593,20.8871827 18.5786222,21.3550348 C18.5786222,21.3550348 19.8941037,19.3897449 20.6335111,18.4841244 C22.3124741,20.5466673 24.8716222,21.8656782 27.7387704,21.8656782 C32.7971778,21.8656782 36.8989185,17.7628957 36.8989185,12.701587 C36.8989185,10.6911717 36.2466222,8.83428659 35.1478815,7.32388171 C35.3221037,6.28962781 36.0259926,4.78207569 36.9777333,3.66768527 M9.31217778,15.7610387 C7.61065926,15.7610387 6.2314,14.3813419 6.2314,12.6792836 C6.2314,10.9769661 7.61065926,9.59726928 9.31217778,9.59726928 C11.0139556,9.59726928 12.3932148,10.9769661 12.3932148,12.6792836 C12.3932148,14.3813419 11.0139556,15.7610387 9.31217778,15.7610387 M9.31217778,8.23157695 C6.85673333,8.23157695 4.86614074,10.2233197 4.86614074,12.6792836 C4.86614074,15.137063 6.85673333,17.126731 9.31217778,17.126731 C11.7678815,17.126731 13.7584741,15.137063 13.7584741,12.6792836 C13.7584741,10.2233197 11.7678815,8.23157695 9.31217778,8.23157695" id="Fill-5" fill="#FEFEFE" mask="url(#mask-6)"></path>
                    </g>
                    <path d="M39.8081259,4.46541972 C39.9743111,4.46541972 39.9994593,4.46541972 40.0409407,4.4521933 C40.1342741,4.42236903 40.1412741,4.3559776 40.1412741,4.28958618 C40.1412741,4.20504085 40.1119778,4.16354621 40.054163,4.14383626 C40.0085333,4.12853511 39.972237,4.12853511 39.8081259,4.12853511 L39.8081259,4.46541972 Z M39.8081259,5.15734283 L39.5185333,5.15734283 L39.5185333,3.9397345 L39.9499407,3.9397345 C40.1666815,3.9397345 40.4420148,3.96592799 40.4420148,4.29269828 C40.4420148,4.44726581 40.3743481,4.56526619 40.1869037,4.61635647 L40.4785704,5.15734283 L40.1596815,5.15734283 L39.9063852,4.65940716 L39.8081259,4.65940716 L39.8081259,5.15734283 Z" id="Fill-8" fill="#FEFEFE"></path>
                    <path d="M39.9985259,5.48961116 C39.5023037,5.48961116 39.0991556,5.08685381 39.0991556,4.5899555 C39.0991556,4.09305719 39.5023037,3.69055919 39.9985259,3.69055919 C40.4947481,3.69055919 40.8978963,4.09305719 40.8978963,4.5899555 C40.8978963,5.08685381 40.4947481,5.48961116 39.9985259,5.48961116 M39.9985259,3.48282665 C39.3869333,3.48282665 38.8914889,3.97868759 38.8914889,4.5899555 C38.8914889,5.20148276 39.3869333,5.69682502 39.9985259,5.69682502 C40.6101185,5.69682502 41.105563,5.20148276 41.105563,4.5899555 C41.105563,3.97868759 40.6101185,3.48282665 39.9985259,3.48282665" id="Fill-10" fill="#FEFEFE"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Modified (working):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>B7C0CE76-CB8B-4E18-9C80-10E37AB8944C</title>
    <desc>Created with sketchtool.</desc>
    <defs>
        <polygon id="path-1" points="1.91225309 1.87632334 1.91225309 0.0469396836 0.0674074074 0.0469396836 0.0674074074 1.87632334 1.91225309 1.87632334"></polygon>
        <polygon id="path-3" points="0 0.0652356625 0 6.58280323 3.21626235 6.58280323 3.21626235 0.0652356625 0 0.0652356625"></polygon>
        <polygon id="path-5" points="36.9777333 0.253376644 0.178733333 0.253376644 0.178733333 21.8656782 36.9777333 21.8656782 36.9777333 0.253376644"></polygon>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Positive-Review-Screen" transform="translate(-80.000000, -572.000000)">
            <g id="Tripadvisor" transform="translate(80.000000, 572.000000)">
                <rect id="Rectangle-9" fill="#07A54E" x="0" y="0" width="58.9900017" height="58.9900017" rx="10"></rect>
                <g id="Tripadvisor-Wordmark" transform="translate(6.000000, 40.000000)">
                    <path d="M47.4979383,3.64404087 C47.6364259,3.64404087 47.6573827,3.64404087 47.6919506,3.63225775 C47.7697284,3.60890574 47.7755617,3.55363217 47.7755617,3.4983586 C47.7755617,3.42808833 47.7511481,3.39466711 47.7029691,3.37795649 C47.6649444,3.36617337 47.6346975,3.36617337 47.4979383,3.36617337 L47.4979383,3.64404087 Z M47.4979383,4.21477258 L47.2566111,4.21477258 L47.2566111,3.20892221 L47.6161173,3.20892221 C47.7967346,3.20892221 48.026179,3.23056032 48.026179,3.50178642 C48.026179,3.62904417 47.9697901,3.72609426 47.8135864,3.7678708 L48.056642,4.21477258 L47.7906852,4.21477258 L47.579821,3.80471984 L47.4979383,3.80471984 L47.4979383,4.21477258 Z" id="Fill-12" fill="#FEFEFE"></path>
                    <g id="Group-16" transform="translate(46.666667, 2.785415)">
                        <g id="Clip-15"></g>
                        <path d="M0.989938272,1.70386124 C0.576419753,1.70386124 0.240462963,1.37072017 0.240462963,0.960667436 C0.240462963,0.5506147 0.576419753,0.217687871 0.989938272,0.217687871 C1.40345679,0.217687871 1.73941358,0.5506147 1.73941358,0.960667436 C1.73941358,1.37072017 1.40345679,1.70386124 0.989938272,1.70386124 M0.989938272,0.0469396836 C0.480277778,0.0469396836 0.0674074074,0.45527851 0.0674074074,0.960667436 C0.0674074074,1.4662706 0.480277778,1.87632334 0.989938272,1.87632334 C1.49959877,1.87632334 1.91246914,1.4662706 1.91246914,0.960667436 C1.91246914,0.45527851 1.49959877,0.0469396836 0.989938272,0.0469396836" id="Fill-14" fill="#FEFEFE"></path>
                    </g>
                    <g id="Group-19" transform="translate(0.000000, 1.928461)">
                        <g id="Clip-18"></g>
                        <path d="M3.21626235,2.13735168 L3.21626235,1.30717699 L1.85255864,1.30717699 L1.85255864,0.0652356625 L0.803854938,0.374810481 L0.803854938,1.30717699 L-6.48148149e-05,1.30717699 L-6.48148149e-05,2.13735168 L0.803854938,2.13735168 L0.803854938,4.79862393 C0.803854938,5.98186388 1.29126235,6.58280323 2.25333025,6.58280323 C2.59857716,6.58280323 2.8988858,6.53588497 3.14583025,6.4439766 L3.17586111,6.43219347 L3.1285463,5.61380191 L3.07626235,5.62879862 C2.9360463,5.66886124 2.75175617,5.68899967 2.52792901,5.68899967 C2.29049074,5.68899967 2.12262037,5.6187294 2.01567593,5.47476104 C1.90721914,5.3275791 1.85255864,5.07820534 1.85255864,4.73670897 L1.85255864,2.13735168 L3.21626235,2.13735168 Z" id="Fill-17" fill="#FEFEFE"></path>
                    </g>
                    <path d="M6.83889198,3.14190837 C6.72633025,3.12691167 6.63796605,3.12005603 6.56883025,3.12005603 C6.24691667,3.12005603 5.94466358,3.22396177 5.67092901,3.42813118 C5.44256481,3.59716546 5.26151543,3.82490112 5.13080556,4.1059822 L5.07636111,3.23553065 L4.12271914,3.23553065 L4.12552778,3.280735 C4.15383025,3.69764338 4.16787346,4.23988134 4.16787346,4.89266645 L4.16787346,8.39568227 L5.23753395,8.39568227 L5.23753395,5.66928148 C5.23753395,5.17224786 5.36284259,4.78554713 5.60978704,4.51774885 C5.85521914,4.25316414 6.15315123,4.11776533 6.49494136,4.11776533 C6.6211142,4.11776533 6.73216358,4.12783454 6.82420062,4.14775873 L6.87648457,4.15954186 L6.87648457,3.14683586 L6.83889198,3.14190837 Z" id="Fill-20" fill="#FEFEFE"></path>
                    <polygon id="Fill-22" fill="#FEFEFE" points="7.80608025 8.39568227 8.87574074 8.39568227 8.87574074 3.23553065 7.80608025 3.23553065"></polygon>
                    <path d="M8.33561728,2.39877884 C8.53740741,2.39877884 8.70225309,2.33343606 8.82626543,2.20789222 C8.95049383,2.08084871 9.0133642,1.92338332 9.0133642,1.73763843 C9.0133642,1.55510712 8.94919753,1.39956987 8.82345679,1.27402604 C8.69771605,1.15019611 8.53697531,1.08656724 8.3462037,1.08656724 C8.14830247,1.08656724 7.98410494,1.15019611 7.8583642,1.27402604 C7.73219136,1.39956987 7.66845679,1.55510712 7.66845679,1.73763843 C7.66845679,1.92338332 7.73132716,2.08084871 7.85533951,2.20789222 C7.9795679,2.33343606 8.14117284,2.39877884 8.33561728,2.39877884" id="Fill-24" fill="#FEFEFE"></path>
                    <path d="M11.4561049,4.25327126 C11.684037,4.09087838 11.9372469,4.00732531 12.2092531,4.00732531 C12.6394074,4.00732531 12.974716,4.16800428 13.2341914,4.49921721 C13.4947469,4.83235827 13.6267531,5.26083553 13.6267531,5.77308009 C13.6267531,6.34552571 13.4930185,6.80571028 13.2296543,7.13885135 C12.9662901,7.47177818 12.6195309,7.63417106 12.1688519,7.63417106 C11.8050247,7.63417106 11.4898086,7.50027192 11.2316296,7.23761536 C10.9730185,6.97474456 10.8416605,6.64503131 10.8416605,6.25683092 L10.8416605,5.43822512 C10.8416605,5.29275709 10.887679,5.09844265 10.9779877,4.85742419 C11.0665679,4.62154746 11.2273086,4.41887772 11.4561049,4.25327126 M14.0854259,3.83979071 C13.6680185,3.3461849 13.1384815,3.09509723 12.510642,3.09509723 C11.7501481,3.09509723 11.1555802,3.39138926 10.7407654,3.97540376 L10.6973395,3.21057185 L9.72468519,3.21057185 L9.72943827,3.28255603 C9.75601235,3.70931938 9.76940741,4.26826796 9.76940741,4.94611898 L9.76940741,10.4978988 L10.8416605,10.4978988 L10.8416605,7.856765 C10.9903025,8.04936552 11.1797778,8.20490277 11.4066296,8.32037739 C11.6915988,8.46434575 12.0089753,8.53632993 12.3499012,8.53632993 C13.0203025,8.53632993 13.5878642,8.27860086 14.0363827,7.77149802 C14.4829568,7.2661091 14.7091605,6.57968853 14.7091605,5.73108932 C14.7091605,4.96797132 14.4993765,4.33018293 14.0854259,3.83979071" id="Fill-25" fill="#FEFEFE"></path>
                    <path d="M17.994537,7.36977917 C17.7506173,7.5906592 17.4433951,7.70292024 17.0830247,7.70292024 C16.8311111,7.70292024 16.6269444,7.62922215 16.4754938,7.48525379 C16.3246914,7.34299934 16.2484259,7.14054384 16.2484259,6.88431444 C16.2484259,6.5563151 16.3990123,6.30351351 16.7092593,6.11455504 C17.0156173,5.92709624 17.5712963,5.82983191 18.3611728,5.82661833 L18.3611728,6.62337179 C18.3611728,6.89952538 18.2380247,7.15061305 17.994537,7.36977917 L17.994537,7.36977917 Z M19.4937037,8.34563612 C19.438179,8.0427027 19.4098765,7.63586355 19.4098765,7.13711602 L19.4098765,5.28095254 C19.4098765,4.58810481 19.2342284,4.04908042 18.8883333,3.67909031 C18.5409259,3.30760053 18.0224074,3.12014173 17.3472531,3.12014173 C16.6584877,3.12014173 16.0567901,3.27739288 15.5585802,3.58889585 L15.5294136,3.60560646 L15.780463,4.32866183 L15.8264815,4.30016809 C16.2263889,4.04736651 16.6880864,3.9186091 17.1990432,3.9186091 C17.5766975,3.9186091 17.8640432,4.0156592 18.0535185,4.20804548 C18.243858,4.3989321 18.340216,4.67165788 18.340216,5.01808174 L18.340216,5.07014173 C17.3219753,5.07506922 16.5336111,5.24067568 15.9978086,5.56374753 C15.4475309,5.89517469 15.168179,6.38235333 15.168179,7.01157218 C15.168179,7.42333883 15.3200617,7.77983191 15.6197222,8.0709822 C15.9193827,8.36406065 16.3227469,8.51124258 16.8185802,8.51124258 C17.4885494,8.51124258 18.0237037,8.27365194 18.4106481,7.80489782 L18.5160802,8.39576796 L19.5029938,8.39576796 L19.4937037,8.34563612 Z" id="Fill-26" fill="#FEFEFE"></path>
                    <path d="M23.7924383,5.36463415 L23.7924383,6.17145682 C23.7924383,6.60828939 23.6587037,6.96135465 23.3940432,7.22251154 C23.1291667,7.48195452 22.8236728,7.61413975 22.4855556,7.61413975 C22.0361728,7.61413975 21.6961111,7.45174687 21.446358,7.11710613 C21.1955247,6.78053724 21.0682716,6.35056032 21.0682716,5.83660185 C21.0682716,5.28922215 21.2028704,4.83910679 21.468179,4.49932432 C21.7328395,4.16125577 22.0724691,3.99714898 22.5058642,3.99714898 C22.8569444,3.99714898 23.1620062,4.12269281 23.4134877,4.37206658 C23.6649691,4.62144034 23.7924383,4.95629532 23.7924383,5.36463415 L23.7924383,5.36463415 Z M24.9107099,8.42096243 L24.9046605,8.34726434 C24.8785185,8.0276203 24.8651235,7.58243243 24.8651235,7.0215557 L24.8651235,0.81870468 L23.7924383,0.81870468 L23.7924383,3.72763678 C23.651142,3.56031641 23.4737654,3.42148978 23.2637654,3.31265656 C22.9852778,3.16697429 22.6657407,3.09499011 22.3146605,3.09499011 C21.6572222,3.09499011 21.0976543,3.35957482 20.6525926,3.88167436 C20.2099074,4.40056032 19.9858642,5.08012525 19.9858642,5.90023072 C19.9858642,6.65670732 20.1988889,7.29278181 20.6199691,7.78660185 C21.0432099,8.28363546 21.5800926,8.53643705 22.2141975,8.53643705 C22.6071914,8.53643705 22.9636728,8.44431444 23.2743519,8.26028345 C23.5210802,8.11460119 23.7241667,7.91878708 23.8801543,7.67948253 L23.9384877,8.42096243 L24.9107099,8.42096243 Z" id="Fill-27" fill="#FEFEFE"></path>
                    <path d="M29.3016975,3.23563777 C29.3016975,3.23563777 27.9665123,5.93868655 27.8712346,6.24333388 C27.750463,5.87677159 26.4230556,3.23563777 26.4230556,3.23563777 L25.2617901,3.23563777 L27.8762037,8.39578939 L30.4435185,3.23563777 L29.3016975,3.23563777 Z" id="Fill-28" fill="#FEFEFE"></path>
                    <polygon id="Fill-29" fill="#FEFEFE" points="30.961821 8.39568227 32.0319136 8.39568227 32.0319136 3.23553065 30.961821 3.23553065"></polygon>
                    <path d="M31.4917253,2.39877884 C31.6935154,2.39877884 31.8587932,2.33343606 31.9828056,2.20789222 C32.1061698,2.08084871 32.1694722,1.92338332 32.1694722,1.73763843 C32.1694722,1.55510712 32.1053056,1.39956987 31.9795648,1.27402604 C31.8538241,1.15019611 31.6926512,1.08656724 31.5018796,1.08656724 C31.3044105,1.08656724 31.1397809,1.15019611 31.0140401,1.27402604 C30.8882994,1.39956987 30.8249969,1.55510712 30.8249969,1.73763843 C30.8249969,1.92338332 30.8874352,2.08084871 31.0114475,2.20789222 C31.1356759,2.33343606 31.2968488,2.39877884 31.4917253,2.39877884" id="Fill-30" fill="#FEFEFE"></path>
                    <path d="M36.2515525,5.99899473 C36.0329105,5.75626236 35.6692994,5.54373764 35.1713056,5.36634806 C34.7737747,5.22580751 34.5088981,5.09512195 34.385534,4.97793342 C34.2649784,4.8624588 34.2057809,4.72534608 34.2057809,4.55781147 C34.2057809,4.37035267 34.2751327,4.21974291 34.4177253,4.0993408 C34.5611821,3.98043837 34.7595154,3.9185234 35.0084043,3.9185234 C35.3763364,3.9185234 35.7384352,4.01900132 36.0869228,4.21652933 L36.1316451,4.24330916 L36.4034352,3.45833883 L36.3729722,3.4399143 C36.0084969,3.22717535 35.5604105,3.12005603 35.0405957,3.12005603 C34.4784352,3.12005603 34.0219228,3.27088003 33.6816451,3.56545814 C33.3407191,3.86324984 33.1678796,4.23495386 33.1678796,4.67350033 C33.1678796,5.32949901 33.650534,5.82653263 34.6033117,6.14960448 C34.9517994,6.26679301 35.1983117,6.39062294 35.3359352,6.51959459 C35.470966,6.64835201 35.5357809,6.80731707 35.5357809,7.01170073 C35.5357809,7.22251154 35.4573549,7.38661833 35.2935895,7.51194792 C35.1300401,7.63749176 34.8910895,7.70283454 34.5855957,7.70283454 C34.1517685,7.70283454 33.7257191,7.57729071 33.318034,7.33134476 L33.2707191,7.30285102 L33.0108117,8.13302571 L33.0421389,8.14973632 C33.4867685,8.38904087 33.9990216,8.51137113 34.5644228,8.51137113 C35.1814599,8.51137113 35.6768611,8.36568886 36.0372315,8.07775214 C36.4008426,7.78660185 36.5849167,7.39990112 36.5849167,6.92793342 C36.5849167,6.55794331 36.472571,6.24665458 36.2515525,5.99899473" id="Fill-31" fill="#FEFEFE"></path>
                    <path d="M39.6264815,7.70285597 C39.2138272,7.70285597 38.8653395,7.52546638 38.5909568,7.1756147 C38.3133333,6.82404911 38.1731173,6.36879202 38.1731173,5.82655405 C38.1731173,5.28260218 38.3081481,4.82391727 38.5741049,4.46421061 C38.8366049,4.10943144 39.2010802,3.92861404 39.6569444,3.92861404 C40.1050309,3.92861404 40.464537,4.11093111 40.7235802,4.4691381 C40.9869444,4.83248682 41.1202469,5.27917436 41.1202469,5.79484674 C41.1202469,6.35550923 40.9750617,6.81912162 40.6898765,7.17218688 C40.4070679,7.52375247 40.0492901,7.70285597 39.6264815,7.70285597 M41.4916358,3.86005768 C41.0333951,3.36945122 40.4291049,3.12007746 39.6964815,3.12007746 C38.9614815,3.12007746 38.3437963,3.37116513 37.8600617,3.86498517 C37.3774074,4.35880521 37.1326235,5.02830092 37.1326235,5.85847561 C37.1326235,6.63830422 37.3698457,7.28102011 37.8373765,7.77141233 C38.3057716,8.26180455 38.9074691,8.51117831 39.6264815,8.51117831 C40.0873148,8.51117831 40.5220062,8.3974176 40.9184568,8.17482367 C41.3159877,7.95222973 41.6292593,7.62915788 41.8494136,7.21417765 C42.069784,6.8006971 42.1810494,6.3137327 42.1810494,5.76292518 C42.1810494,4.98973797 41.9490123,4.3504499 41.4916358,3.86005768" id="Fill-32" fill="#FEFEFE"></path>
                    <path d="M45.772071,3.14190837 C45.6597253,3.12691167 45.5711451,3.12005603 45.5020093,3.12005603 C45.1805278,3.12005603 44.8782747,3.22396177 44.604108,3.42813118 C44.3761759,3.59716546 44.1946944,3.82490112 44.0639846,4.1059822 L44.0099722,3.23553065 L43.0563302,3.23553065 L43.0589228,3.280735 C43.0865772,3.69764338 43.1010525,4.23988134 43.1010525,4.89266645 L43.1010525,8.39568227 L44.1711451,8.39568227 L44.1711451,5.66928148 C44.1711451,5.17224786 44.2960216,4.78554713 44.5433981,4.51774885 C44.7888302,4.25316414 45.0867623,4.11776533 45.4285525,4.11776533 C45.5542932,4.11776533 45.6657747,4.12783454 45.7578117,4.14775873 L45.8100957,4.15954186 L45.8100957,3.14683586 L45.772071,3.14190837 Z" id="Fill-33" fill="#FEFEFE"></path>
                </g>
                <g id="Tripadvisor-Logo" transform="translate(10.000000, 13.000000)">
                    <path d="M9.85455556,11.1905597 C9.02907407,11.1905597 8.36018519,11.8596608 8.36018519,12.6854041 C8.36018519,13.5119255 9.02907407,14.1805078 9.85455556,14.1805078 C10.680037,14.1805078 11.3489259,13.5119255 11.3489259,12.6854041 C11.3489259,11.8596608 10.680037,11.1905597 9.85455556,11.1905597 L9.85455556,11.1905597 Z" id="Fill-1" fill="#FEFEFE"></path>
                    <path d="M28.2781667,11.1697865 C27.4526852,11.1697865 26.7832778,11.8383688 26.7832778,12.6651495 C26.7832778,13.4916709 27.4526852,14.1602533 28.2781667,14.1602533 C29.1036481,14.1602533 29.7720185,13.4916709 29.7720185,12.6651495 C29.7720185,11.8383688 29.1036481,11.1697865 28.2781667,11.1697865" id="Fill-3" fill="#FEFEFE"></path>
                    <g id="Group-7" transform="translate(0.770370, 0.005965)">
                        <g id="Clip-6"></g>
                        <path d="M27.7356593,15.74081 C26.0344,15.74081 24.6548815,14.3611133 24.6548815,12.659055 C24.6548815,10.9562187 26.0344,9.57626262 27.7356593,9.57626262 C29.4369185,9.57626262 30.816437,10.9562187 30.816437,12.659055 C30.816437,14.3611133 29.4369185,15.74081 27.7356593,15.74081 M27.7356593,8.21134832 C25.2796963,8.21134832 23.2898815,10.2020537 23.2898815,12.659055 C23.2898815,15.1147597 25.2796963,17.1065024 27.7356593,17.1065024 C30.1905852,17.1065024 32.181437,15.1147597 32.181437,12.659055 C32.181437,10.2020537 30.1905852,8.21134832 27.7356593,8.21134832 M27.7387704,20.0788153 C23.6655481,20.0788153 20.3638815,16.7761013 20.3638815,12.701587 C20.3638815,8.62862879 23.6655481,5.32565547 27.7387704,5.32565547 C31.8109556,5.32565547 35.112363,8.62862879 35.112363,12.701587 C35.112363,16.7761013 31.8109556,20.0788153 27.7387704,20.0788153 M9.43247407,3.54008925 C12.0535852,2.39846798 15.3080667,1.78253192 18.5806963,1.78253192 C21.8587704,1.78253192 24.8291037,2.40054271 27.4530667,3.54657279 C22.5271407,3.69750954 18.5796593,7.73623469 18.5786222,12.6995123 C18.5775852,7.64546517 14.4841407,3.54709147 9.43247407,3.54008925 M9.41847407,20.0788153 C5.34577037,20.0788153 2.0441037,16.7761013 2.0441037,12.701587 C2.0441037,8.62862879 5.34577037,5.32565547 9.41847407,5.32565547 C13.4911778,5.32565547 16.7931037,8.62862879 16.7931037,12.701587 C16.7931037,16.7761013 13.4911778,20.0788153 9.41847407,20.0788153 M36.9777333,3.66768527 L30.8558444,3.66768527 C27.7335852,1.56624111 23.4700667,0.253195105 18.5806963,0.253195105 C13.6889926,0.253195105 9.13277037,1.56520374 6.01051111,3.66768527 L0.178733333,3.66768527 C1.1296963,4.78051964 1.83358519,6.28651572 2.00884444,7.32076961 C0.909325926,8.83169318 0.258325926,10.6901344 0.258325926,12.701587 C0.258325926,17.7628957 4.35928889,21.8656782 9.41847407,21.8656782 C12.2889926,21.8656782 14.8502148,20.5427772 16.5296963,18.4760848 C17.2149185,19.2764127 18.3486593,20.8871827 18.5786222,21.3550348 C18.5786222,21.3550348 19.8941037,19.3897449 20.6335111,18.4841244 C22.3124741,20.5466673 24.8716222,21.8656782 27.7387704,21.8656782 C32.7971778,21.8656782 36.8989185,17.7628957 36.8989185,12.701587 C36.8989185,10.6911717 36.2466222,8.83428659 35.1478815,7.32388171 C35.3221037,6.28962781 36.0259926,4.78207569 36.9777333,3.66768527 M9.31217778,15.7610387 C7.61065926,15.7610387 6.2314,14.3813419 6.2314,12.6792836 C6.2314,10.9769661 7.61065926,9.59726928 9.31217778,9.59726928 C11.0139556,9.59726928 12.3932148,10.9769661 12.3932148,12.6792836 C12.3932148,14.3813419 11.0139556,15.7610387 9.31217778,15.7610387 M9.31217778,8.23157695 C6.85673333,8.23157695 4.86614074,10.2233197 4.86614074,12.6792836 C4.86614074,15.137063 6.85673333,17.126731 9.31217778,17.126731 C11.7678815,17.126731 13.7584741,15.137063 13.7584741,12.6792836 C13.7584741,10.2233197 11.7678815,8.23157695 9.31217778,8.23157695" id="Fill-5" fill="#FEFEFE"></path>
                    </g>
                    <path d="M39.8081259,4.46541972 C39.9743111,4.46541972 39.9994593,4.46541972 40.0409407,4.4521933 C40.1342741,4.42236903 40.1412741,4.3559776 40.1412741,4.28958618 C40.1412741,4.20504085 40.1119778,4.16354621 40.054163,4.14383626 C40.0085333,4.12853511 39.972237,4.12853511 39.8081259,4.12853511 L39.8081259,4.46541972 Z M39.8081259,5.15734283 L39.5185333,5.15734283 L39.5185333,3.9397345 L39.9499407,3.9397345 C40.1666815,3.9397345 40.4420148,3.96592799 40.4420148,4.29269828 C40.4420148,4.44726581 40.3743481,4.56526619 40.1869037,4.61635647 L40.4785704,5.15734283 L40.1596815,5.15734283 L39.9063852,4.65940716 L39.8081259,4.65940716 L39.8081259,5.15734283 Z" id="Fill-8" fill="#FEFEFE"></path>
                    <path d="M39.9985259,5.48961116 C39.5023037,5.48961116 39.0991556,5.08685381 39.0991556,4.5899555 C39.0991556,4.09305719 39.5023037,3.69055919 39.9985259,3.69055919 C40.4947481,3.69055919 40.8978963,4.09305719 40.8978963,4.5899555 C40.8978963,5.08685381 40.4947481,5.48961116 39.9985259,5.48961116 M39.9985259,3.48282665 C39.3869333,3.48282665 38.8914889,3.97868759 38.8914889,4.5899555 C38.8914889,5.20148276 39.3869333,5.69682502 39.9985259,5.69682502 C40.6101185,5.69682502 41.105563,5.20148276 41.105563,4.5899555 C41.105563,3.97868759 40.6101185,3.48282665 39.9985259,3.48282665" id="Fill-10" fill="#FEFEFE"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

@kisenka
Copy link
Contributor

kisenka commented Sep 15, 2016

@nrempel thanks! I'll investigate

@kisenka kisenka self-assigned this Sep 15, 2016
@NeXTs
Copy link

NeXTs commented Sep 23, 2016

I ran into the exact same problem.
Great catch with mask, @nrempel
I deleted mask from svg and it renders correctly, but it's huge hack.

How it's going, @kisenka ?

@NeXTs
Copy link

NeXTs commented Sep 23, 2016

My icon

with mask (renders incorrect)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="49.284941%" y1="0%" x2="49.284941%" y2="94.7936022%" id="linearGradient-1">
            <stop stop-color="#FF2D01" stop-opacity="0.0773607337" offset="0%"></stop>
            <stop stop-color="#FF3201" stop-opacity="0.409703351" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%" id="linearGradient-2">
            <stop stop-color="#FFA300" stop-opacity="0.698001585" offset="0%"></stop>
            <stop stop-color="#EF3152" stop-opacity="0.263983243" offset="100%"></stop>
        </linearGradient>
        <path d="M9.6,0 C4.298,0 0,4.298 0,9.6 C0,14.902 4.298,19.2 9.6,19.2 C14.901,19.2 19.2,14.902 19.2,9.599 C19.2,4.298 14.901,0 9.6,0 L9.6,0 Z" id="path-3"></path>
        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="19.2" height="19.2" fill="white">
            <use xlink:href="#path-3"></use>
        </mask>
        <linearGradient x1="50%" y1="-329.470348%" x2="50%" y2="100%" id="linearGradient-5">
            <stop stop-color="#B53D40" offset="0%"></stop>
            <stop stop-color="#F1883A" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Base" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Home" transform="translate(-659.000000, -41.000000)">
            <g id="Group-15" transform="translate(-20.000000, -23.000000)">
                <g id="Group-24">
                    <g id="-g-icon-3" transform="translate(679.000000, 64.000000)">
                        <use id="Shape" stroke="url(#linearGradient-2)" mask="url(#mask-4)" stroke-width="2" fill="url(#linearGradient-1)" opacity="0.54244403" xlink:href="#path-3"></use>
                        <path d="M9.47265003,14.3112181 L9.42831385,14.3112181 C8.74849243,14.2918646 8.26861849,13.8063461 8.28861324,13.1575855 C8.30773865,12.5197639 8.79891397,12.0561231 9.45613263,12.0561231 L9.49612212,12.057806 C10.195069,12.0771594 10.6697269,12.5576293 10.6497321,13.2249018 C10.6297374,13.8644063 10.1472554,14.3112181 9.47265003,14.3112181 L9.47265003,14.3112181 Z" id="Path" fill="url(#linearGradient-5)"></path>
                        <path d="M12.3336376,8.8156862 C12.1736796,9.03446407 11.8224675,9.30877787 11.3791057,9.64283485 L10.8905384,9.9684773 C10.6227827,10.1704261 10.461086,10.361436 10.4011018,10.5473972 C10.3524189,10.6938101 10.3298162,10.7333584 10.3254695,11.0320743 L10.3254695,11.1078051 L8.46074193,11.1078051 L8.46595796,10.9546606 C8.48943005,10.3286193 8.50507811,9.95837986 8.7737032,9.65293229 C9.19533157,9.17498678 10.125522,8.59438396 10.1646422,8.56998182 C10.29852,8.47321468 10.4106645,8.36298429 10.4941208,8.24433937 C10.6897216,7.98264737 10.775786,7.77733275 10.775786,7.57706686 C10.775786,7.29602143 10.690591,7.03601235 10.5210703,6.80629558 C10.3576349,6.58246899 10.0472817,6.47139714 9.59870387,6.47139714 C9.15360341,6.47139714 8.84846617,6.60771259 8.66677477,6.88875801 C8.47899801,7.1756936 8.38424029,7.47777536 8.38424029,7.78658874 L8.38424029,7.86400245 L6.46213651,7.86400245 L6.46561386,7.78322293 C6.51516606,6.64473654 6.9359251,5.82431951 7.71311224,5.34553255 C8.20254889,5.04176789 8.81195402,4.88778193 9.52220223,4.88778193 C10.450654,4.88778193 11.2365345,5.1065598 11.8537637,5.53738392 C12.4805555,5.97409821 12.7978635,6.62874892 12.7978635,7.48198263 C12.7969942,7.95908668 12.6413829,8.40758132 12.3336376,8.8156862 L12.3336376,8.8156862 Z" id="Path" fill="url(#linearGradient-5)"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

without mask (renders correct)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="49.284941%" y1="0%" x2="49.284941%" y2="94.7936022%" id="linearGradient-1">
            <stop stop-color="#FF2D01" stop-opacity="0.0773607337" offset="0%"></stop>
            <stop stop-color="#FF3201" stop-opacity="0.409703351" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%" id="linearGradient-2">
            <stop stop-color="#FFA300" stop-opacity="0.698001585" offset="0%"></stop>
            <stop stop-color="#EF3152" stop-opacity="0.263983243" offset="100%"></stop>
        </linearGradient>
        <path d="M9.6,0 C4.298,0 0,4.298 0,9.6 C0,14.902 4.298,19.2 9.6,19.2 C14.901,19.2 19.2,14.902 19.2,9.599 C19.2,4.298 14.901,0 9.6,0 L9.6,0 Z" id="path-3"></path>
        <linearGradient x1="50%" y1="-329.470348%" x2="50%" y2="100%" id="linearGradient-5">
            <stop stop-color="#B53D40" offset="0%"></stop>
            <stop stop-color="#F1883A" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Base" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Home" transform="translate(-659.000000, -41.000000)">
            <g id="Group-15" transform="translate(-20.000000, -23.000000)">
                <g id="Group-24">
                    <g id="-g-icon-3" transform="translate(679.000000, 64.000000)">
                        <use id="Shape" stroke="url(#linearGradient-2)" mask="url(#mask-4)" stroke-width="2" fill="url(#linearGradient-1)" opacity="0.54244403" xlink:href="#path-3"></use>
                        <path d="M9.47265003,14.3112181 L9.42831385,14.3112181 C8.74849243,14.2918646 8.26861849,13.8063461 8.28861324,13.1575855 C8.30773865,12.5197639 8.79891397,12.0561231 9.45613263,12.0561231 L9.49612212,12.057806 C10.195069,12.0771594 10.6697269,12.5576293 10.6497321,13.2249018 C10.6297374,13.8644063 10.1472554,14.3112181 9.47265003,14.3112181 L9.47265003,14.3112181 Z" id="Path" fill="url(#linearGradient-5)"></path>
                        <path d="M12.3336376,8.8156862 C12.1736796,9.03446407 11.8224675,9.30877787 11.3791057,9.64283485 L10.8905384,9.9684773 C10.6227827,10.1704261 10.461086,10.361436 10.4011018,10.5473972 C10.3524189,10.6938101 10.3298162,10.7333584 10.3254695,11.0320743 L10.3254695,11.1078051 L8.46074193,11.1078051 L8.46595796,10.9546606 C8.48943005,10.3286193 8.50507811,9.95837986 8.7737032,9.65293229 C9.19533157,9.17498678 10.125522,8.59438396 10.1646422,8.56998182 C10.29852,8.47321468 10.4106645,8.36298429 10.4941208,8.24433937 C10.6897216,7.98264737 10.775786,7.77733275 10.775786,7.57706686 C10.775786,7.29602143 10.690591,7.03601235 10.5210703,6.80629558 C10.3576349,6.58246899 10.0472817,6.47139714 9.59870387,6.47139714 C9.15360341,6.47139714 8.84846617,6.60771259 8.66677477,6.88875801 C8.47899801,7.1756936 8.38424029,7.47777536 8.38424029,7.78658874 L8.38424029,7.86400245 L6.46213651,7.86400245 L6.46561386,7.78322293 C6.51516606,6.64473654 6.9359251,5.82431951 7.71311224,5.34553255 C8.20254889,5.04176789 8.81195402,4.88778193 9.52220223,4.88778193 C10.450654,4.88778193 11.2365345,5.1065598 11.8537637,5.53738392 C12.4805555,5.97409821 12.7978635,6.62874892 12.7978635,7.48198263 C12.7969942,7.95908668 12.6413829,8.40758132 12.3336376,8.8156862 L12.3336376,8.8156862 Z" id="Path" fill="url(#linearGradient-5)"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

@NeXTs
Copy link

NeXTs commented Sep 23, 2016

damn, trick with removing mask don't always work :(

this icon looks ugly without mask

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="49.284941%" y1="0%" x2="49.284941%" y2="94.7936022%" id="linearGradient-1">
            <stop stop-color="#FF2D01" stop-opacity="0.0773607337" offset="0%"></stop>
            <stop stop-color="#FF3201" stop-opacity="0.409703351" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%" id="linearGradient-2">
            <stop stop-color="#FFA300" stop-opacity="0.698001585" offset="0%"></stop>
            <stop stop-color="#EF3152" stop-opacity="0.263983243" offset="100%"></stop>
        </linearGradient>
        <path d="M18,0 L9,0 C7.9,0 7,0.9 7,2 L7,10 L14,10 L17,13 L17,10 L18,10 C19.1,10 20,9.101 20,8 L20,2 C20,0.9 19.1,0 18,0 L18,0 Z" id="path-3"></path>
        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13" height="13" fill="white">
            <use xlink:href="#path-3"></use>
        </mask>
        <path d="M2,5.25 C0.9,5 0,5.9 0,7 L0,13 C0,14.1 0.9,15 2,15 L3,15 L3,18 L6,15 L11,15 C12.1,15 13,14.1 12.9000001,13 L12.9000001,11.18 C12.936,11.194 12.9000001,5.25 12.9000001,5.25 L2,5.25 Z" id="path-5"></path>
        <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12.9160001" height="12.7920713" fill="white">
            <use xlink:href="#path-5"></use>
        </mask>
    </defs>
    <g id="Base" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Home" transform="translate(-504.000000, -41.000000)" stroke-width="2" stroke="url(#linearGradient-2)" fill="url(#linearGradient-1)">
            <g id="Group-15" transform="translate(-20.000000, -23.000000)">
                <g id="Group-24">
                    <g id="-g-icon-2" transform="translate(524.000000, 64.000000)">
                        <use id="Shape" mask="url(#mask-4)" xlink:href="#path-3"></use>
                        <use id="Path" mask="url(#mask-6)" opacity="0.41301306" xlink:href="#path-5"></use>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

kisenka added a commit that referenced this issue Oct 14, 2016
@kisenka
Properly prefixize references in <style> tag (fixes #27 #50 #53)
a31ea7d
@kisenka
Copy link
Contributor

kisenka commented Oct 14, 2016

Shipped with 0.0.31

@kisenka kisenka closed this as completed Oct 14, 2016
@NeXTs
Copy link

NeXTs commented Nov 28, 2017 •
edited

Hello @kisenka

Please take a look how this SVG renders in FF without sprite and then with sprite using svg-sprite-loader (v3.4.1)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="9px" height="18px" viewBox="0 0 9 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="49.284941%" y1="0%" x2="49.284941%" y2="94.7936022%" id="linearGradient-1">
            <stop stop-color="#FF2D01" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#FF3201" stop-opacity="0.201200181" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%" id="linearGradient-2">
            <stop stop-color="#E77730" stop-opacity="0.698001585" offset="0%"></stop>
            <stop stop-color="#EF3152" stop-opacity="0.30395154" offset="100%"></stop>
        </linearGradient>
        <path d="M50.9963,17.9916 L46.9983,17.9916 L46.9983,9.4956 L45.0003,9.4956 L45.0003,6.2216 L46.9983,6.2216 L46.9983,4.2576 C46.9983,1.5886 48.1263,-0.0004 51.3303,-0.0004 L53.9993,-0.0004 L53.9993,3.2736 L52.3313,3.2736 C51.0843,3.2736 51.0013,3.7316 51.0013,4.5846 L50.9963,6.2216 L54.0183,6.2216 L53.6643,9.4956 L50.9963,9.4956 L50.9963,17.9916 Z" id="path-3"></path>
        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.018" height="17.992" fill="white">
            <use xlink:href="#path-3"></use>
        </mask>
    </defs>
    <g id="Base" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Home" transform="translate(-1211.000000, -3231.000000)" stroke="url(#linearGradient-2)" stroke-width="6" fill="url(#linearGradient-1)">
            <g id="Group-5" transform="translate(0.000000, 3195.000000)">
                <g id="Group-10" transform="translate(754.000000, 35.000000)">
                    <g id="Socials" transform="translate(412.000000, 1.000000)">
                        <use id="Facebook-Icon" mask="url(#mask-4)" xlink:href="#path-3"></use>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

that's how it looks for me in
Chrome (v62 on Mac) (even using svg-sprite-loader)
or in FF without using svg-sprite-loader
image
and in FF using svg-sprite-loader (v57.0 on Mac)
image

webpack 1

config: {
  ...,
  plugins: [
    ...,
    new SpriteLoaderPlugin()
  ],
  loaders: [
    ...,
    {
      test: /\.svg$/,
      loader: 'svg-sprite-loader'  // tried with ?runtimeCompat=true but it looks same
    }
  ]  
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kisenka kisenka

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@nrempel @princed @NeXTs @kisenka