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

SVGs with light or white fill not working #45

Closed
Jaimish00 opened this issue May 14, 2021 · 7 comments · Fixed by #46
Closed

SVGs with light or white fill not working #45

Jaimish00 opened this issue May 14, 2021 · 7 comments · Fixed by #46
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@Jaimish00
Copy link

  1. Here is the SVG of a star
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M20.9369 8.94814L15.2816 8.47436L13.0733 3.45452C12.676 2.5408 11.3206 2.5408 10.9233 3.45452L8.71497 8.48564L3.07141 8.94814C2.04318 9.02711 1.62254 10.268 2.4054 10.9222L6.69357 14.5094L5.40829 19.8339C5.1746 20.804 6.26125 21.5711 7.14926 21.0522L11.9983 18.232L16.8473 21.0634C17.7353 21.5823 18.822 20.8153 18.5883 19.8451L17.303 14.5094L21.5912 10.9222C22.374 10.268 21.9651 9.02711 20.9369 8.94814Z"
    fill="#E7E7E7" />
</svg>

Preview, ic-star-blank

After fixing up this SVG, it is generating this,

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="" stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>
  1. If I just change the fill color to darker color, like this
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M20.9369 8.94814L15.2816 8.47436L13.0733 3.45452C12.676 2.5408 11.3206 2.5408 10.9233 3.45452L8.71497 8.48564L3.07141 8.94814C2.04318 9.02711 1.62254 10.268 2.4054 10.9222L6.69357 14.5094L5.40829 19.8339C5.1746 20.804 6.26125 21.5711 7.14926 21.0522L11.9983 18.232L16.8473 21.0634C17.7353 21.5823 18.822 20.8153 18.5883 19.8451L17.303 14.5094L21.5912 10.9222C22.374 10.268 21.9651 9.02711 20.9369 8.94814Z"
    fill="#1900f5" />
</svg>

Preview, ic-star-blue

It is working fine with this SVG, the output is this

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M11.672 2.814 C 11.409 2.888,11.175 3.054,11.045 3.259 C 10.984 3.355,10.443 4.555,9.842 5.927 C 9.241 7.298,8.735 8.436,8.718 8.455 C 8.700 8.474,7.402 8.595,5.833 8.723 C 4.001 8.872,2.908 8.978,2.778 9.017 C 2.518 9.097,2.266 9.314,2.129 9.574 C 2.041 9.744,2.022 9.832,2.022 10.080 C 2.022 10.401,2.094 10.594,2.291 10.802 C 2.345 10.858,3.354 11.712,4.534 12.699 C 5.714 13.687,6.680 14.513,6.680 14.535 C 6.680 14.557,6.390 15.773,6.035 17.237 C 5.593 19.067,5.391 19.970,5.391 20.125 C 5.392 20.724,5.902 21.199,6.546 21.200 C 6.912 21.200,6.830 21.242,9.711 19.565 L 12.002 18.230 14.491 19.684 C 17.272 21.309,17.249 21.299,17.705 21.186 C 18.032 21.105,18.300 20.919,18.459 20.661 C 18.557 20.503,18.581 20.416,18.592 20.184 C 18.603 19.931,18.535 19.614,17.962 17.246 C 17.609 15.786,17.320 14.570,17.320 14.543 C 17.320 14.517,18.233 13.731,19.350 12.798 C 20.466 11.865,21.483 11.005,21.609 10.886 C 21.967 10.548,22.073 10.179,21.940 9.733 C 21.869 9.494,21.617 9.191,21.395 9.077 C 21.185 8.970,21.018 8.952,17.960 8.698 C 16.497 8.576,15.290 8.464,15.276 8.448 C 15.263 8.433,14.770 7.322,14.181 5.980 C 13.593 4.638,13.065 3.453,13.008 3.347 C 12.771 2.906,12.182 2.671,11.672 2.814 "
    stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>
  1. Same case with an SVG with Gradient fill
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
    <path fill-rule="evenodd" clip-rule="evenodd"
      d="M21.9478 9.55776C21.8169 9.13517 21.4577 8.83502 21.0327 8.79506L15.2602 8.24811L12.9776 2.67306C12.8093 2.26448 12.426 2 12.0001 2C11.5742 2 11.1909 2.26448 11.0226 2.67401L8.73996 8.24811L2.96651 8.79506C2.54231 8.83598 2.18402 9.13517 2.05234 9.55776C1.92065 9.98035 2.04227 10.4439 2.36317 10.736L6.72652 14.7292L5.43987 20.6434C5.34572 21.0782 5.50746 21.5277 5.85324 21.7885C6.03909 21.9287 6.25654 22 6.47581 22C6.66487 22 6.85241 21.9468 7.02071 21.8417L12.0001 18.7363L16.9776 21.8417C17.3418 22.0704 17.801 22.0495 18.146 21.7885C18.4919 21.5269 18.6535 21.0773 18.5594 20.6434L17.2727 14.7292L21.6361 10.7368C21.957 10.4439 22.0795 9.98115 21.9478 9.55776V9.55776Z"
      fill="url(#paint0_linear)" />
  </g>
  <defs>
    <linearGradient id="paint0_linear" x1="12" y1="19.5" x2="12" y2="1.16667" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5B4308" />
      <stop offset="1" stop-color="#E5A40A" />
    </linearGradient>
    <clipPath id="clip0">
      <rect width="20" height="20" fill="white" transform="translate(2 2)" />
    </clipPath>
  </defs>
</svg>

Preview, ic-star-gradient

The output, in this case,

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M5.614 8.560 C 3.136 8.798,2.786 8.840,2.625 8.917 C 2.095 9.174,1.876 9.852,2.147 10.394 C 2.247 10.593,2.524 10.862,4.480 12.658 C 6.645 14.645,6.700 14.699,6.694 14.838 C 6.691 14.916,6.408 16.260,6.064 17.825 C 5.619 19.855,5.440 20.745,5.440 20.928 C 5.440 21.707,6.245 22.224,6.921 21.879 C 7.010 21.834,8.181 21.112,9.524 20.275 C 10.986 19.363,11.992 18.759,12.033 18.770 C 12.070 18.780,13.228 19.492,14.607 20.354 C 16.502 21.538,17.163 21.931,17.316 21.967 C 17.730 22.062,18.172 21.862,18.415 21.468 C 18.508 21.317,18.536 21.220,18.550 20.990 C 18.566 20.728,18.504 20.411,17.921 17.747 C 17.566 16.123,17.281 14.771,17.288 14.743 C 17.294 14.714,18.299 13.775,19.520 12.656 C 21.478 10.860,21.753 10.593,21.853 10.394 C 22.124 9.852,21.905 9.174,21.375 8.918 C 21.215 8.840,20.858 8.798,18.307 8.556 L 15.420 8.281 11.920 8.285 L 8.420 8.290 5.614 8.560 "
    stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

Preview, ic-star-gradient-out

I am not able to understand why it is happening, Can anyone help me out with this?
@Ghustavh97 Ghustavh97 added bug Something isn't working good first issue Good for newcomers labels May 14, 2021
@Ghustavh97
Copy link
Contributor

@Jaimish00 Interesting issue, thanks for the detailed post.

So right now the package does not support gradient svgs (I did not have this in mind when I created it). This due to the way it works under the hood. It takes the svg and puts it in front of a white canvas then uses an algorithm to trace the svg from scratch using the proper technique so that it has fills instead of strokes.

That's why this doesn't work

And this does

The algorithm cannot 'see' the svg because of the white canvas (or background) so it outputs an empty svg.

I think I can fix this but I will need more info first.

  1. Where is the original svg failing? as in, why is it needing to get fixed?
  2. Is the gradient svg the original svg? if not which one is it (with the code).
  3. Test so see if the below svg with gradient was fixed
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.672 2.814 C 11.409 2.888,11.175 3.054,11.045 3.259 C 10.984 3.355,10.443 4.555,9.842 5.927 C 9.241 7.298,8.735 8.436,8.718 8.455 C 8.700 8.474,7.402 8.595,5.833 8.723 C 4.001 8.872,2.908 8.978,2.778 9.017 C 2.518 9.097,2.266 9.314,2.129 9.574 C 2.041 9.744,2.022 9.832,2.022 10.080 C 2.022 10.401,2.094 10.594,2.291 10.802 C 2.345 10.858,3.354 11.712,4.534 12.699 C 5.714 13.687,6.680 14.513,6.680 14.535 C 6.680 14.557,6.390 15.773,6.035 17.237 C 5.593 19.067,5.391 19.970,5.391 20.125 C 5.392 20.724,5.902 21.199,6.546 21.200 C 6.912 21.200,6.830 21.242,9.711 19.565 L 12.002 18.230 14.491 19.684 C 17.272 21.309,17.249 21.299,17.705 21.186 C 18.032 21.105,18.300 20.919,18.459 20.661 C 18.557 20.503,18.581 20.416,18.592 20.184 C 18.603 19.931,18.535 19.614,17.962 17.246 C 17.609 15.786,17.320 14.570,17.320 14.543 C 17.320 14.517,18.233 13.731,19.350 12.798 C 20.466 11.865,21.483 11.005,21.609 10.886 C 21.967 10.548,22.073 10.179,21.940 9.733 C 21.869 9.494,21.617 9.191,21.395 9.077 C 21.185 8.970,21.018 8.952,17.960 8.698 C 16.497 8.576,15.290 8.464,15.276 8.448 C 15.263 8.433,14.770 7.322,14.181 5.980 C 13.593 4.638,13.065 3.453,13.008 3.347 C 12.771 2.906,12.182 2.671,11.672 2.814 " fill="url(#paint0_linear)" />
  </g>
  <defs>
    <linearGradient id="paint0_linear" x1="12" y1="19.5" x2="12" y2="1.16667" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5B4308" />
      <stop offset="1" stop-color="#E5A40A" />
    </linearGradient>
    <clipPath id="clip0">
      <rect width="20" height="20" fill="white" transform="translate(2 2)" />
    </clipPath>
  </defs>
</svg>

@Ghustavh97 Ghustavh97 added the needs more info Needs more information label May 14, 2021
@Jaimish00
Copy link
Author

Actually, I am using the webfont package to generate the icon fonts. In that package, while creating the icons, some of the icon portions were getting removed in the final .ttf file. So I tried this package and it worked perfectly. We were getting all the icons perfectly, except some of these icons that I've mentioned above.

Regarding the Gradient icon, this SVG code that I've put is the original one! For the time being, the Gradient icons are not the priority. I've tested them just to debug this issue.

@Ghustavh97
Copy link
Contributor

@Jaimish00 ohh ok, so you just want white/light svgs to work correct?

@Jaimish00
Copy link
Author

Jaimish00 commented May 14, 2021 •
edited
Loading

@Ghustavh97 Yes, exactly. I've not found any other issues with the package.

@Ghustavh97 Ghustavh97 changed the title Fixer is emptying out 'd' attribute of the path where the path has light color fill SVGs with light or white fill not working May 14, 2021
@Ghustavh97 Ghustavh97 removed the needs more info Needs more information label May 14, 2021
Ghustavh97 added a commit that referenced this issue May 15, 2021
@Ghustavh97
feat: add support for svgs with light colored fill (#45)
47aa95d
@Ghustavh97 Ghustavh97 linked a pull request May 15, 2021 that will close this issue
feat: add support for svgs with light colored fill (#45) #46
Merged
Ghustavh97 added a commit that referenced this issue May 15, 2021
@Ghustavh97
Merge pull request #46 from oslllo/fix-45
d35ed88 
feat: add support for svgs with light colored fill (#45)
@Ghustavh97
Copy link
Contributor

@Jaimish00 try out v1.3.0

@Jaimish00
Copy link
Author

@Ghustavh97 It worked. Thanks a lot 😁.

@Ghustavh97
Copy link
Contributor

@Jaimish00 no problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add support for svgs with light colored fill (#45) oslllo/svg-fixer
2 participants
@Ghustavh97 @Jaimish00