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.

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

Bad quality when using Svg.Save with scale below certain threshold #246

Open
jpodpro opened this issue Oct 29, 2024 · 1 comment
Open

Bad quality when using Svg.Save with scale below certain threshold #246

jpodpro opened this issue Oct 29, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@jpodpro
Copy link

jpodpro commented Oct 29, 2024

I'm generating svg code for some icons and using this library to dynamically convert them to png. Scaling works fine to a certain point but using smaller values beyond that point results in an image that is substantially worse in quality and ultimately appears wrong. I have tried starting with a smaller SVG image but it doesn't seem to help. Something fundamentally changes when trying to render my icons below 39 pixels.

Scaling to 39 pixels high:
image

Scaling to 38 pixels high:
image

The white border is clearly getting lost at this size which is unexpected.

Here is the SVG code without the inner icon graphic as that part is not the problem.

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 609" width="500" height="609">
    <defs>
        <filter id="shadow" style="color-interpolation-filters:sRGB;" x="-100%" y="-100%" width="300%" height="400%">
            <feFlood flood-opacity="1" flood-color="rgb(31 40 50 / 1)" result="flood" />
            <feComposite in="flood" in2="SourceGraphic" operator="in" result="comp" />
            <feOffset dx="3" dy="15" result="offset" />
            <feGaussianBlur in="offset" stdDeviation="20" result="blur" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
        <filter id="stroke-inside" x='-50%' y='-50%' width='200%' height='200%'>            
            <feFlood flood-color="#FFF" result="inside-color"/>
            <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>            
            <feMorphology in="SourceAlpha" radius="8" />

            <feComposite in="SourceGraphic" operator="in" result="fill-area"/>

            <feMerge>
              <feMergeNode in="inside-stroke"/>
              <feMergeNode in="fill-area"/>
            </feMerge>
        </filter>
    </defs>
    <style>
        .marker{ fill:#000000; fill-opacity:1; filter:url(#stroke-inside); } 
        .marker-shadow{ filter:url(#shadow); stroke:#444; stroke-width:12px; } 
    </style>
    <path class="marker-shadow" d="m228 91.1c-2.5 0.5-8.3 1.6-13 2.5-4.7 0.9-13.8 3.3-20.3 5.5-6.4 2.1-16.5 6.3-22.5 9.3-5.9 3-14.6 8-19.4 11.3-4.8 3.2-12.6 9.2-17.4 13.3-4.9 4.1-12.1 11.3-16.2 16-4.1 4.7-10.7 13.4-14.8 19.5-4 6-9.3 15.3-11.8 20.5-2.5 5.2-6.1 14.2-8 20-2 5.8-4.4 14.8-5.5 20-1.1 5.2-2.5 13.9-3 19.2-0.6 5.4-1.1 12.9-1.1 16.8 0 3.8 0.7 11.6 1.5 17.2 0.9 5.7 2.7 14.8 4.2 20.3 1.4 5.5 4.4 14.7 6.6 20.5 2.2 5.8 7 16.3 10.7 23.5 3.6 7.1 10.2 18.6 14.5 25.5 4.4 6.9 12.7 18.8 18.5 26.5 5.7 7.7 14.9 19.2 20.3 25.5 5.5 6.3 15.1 17.1 21.6 23.9 6.4 6.9 19 19.4 28.1 27.9 9.1 8.5 23.1 21 31.2 27.8 10.3 8.6 15.6 12.4 17.3 12.4 1.4 0 4-1 5.7-2.3 1.8-1.2 8-6.2 13.8-11 5.8-4.9 18.1-15.9 27.4-24.5 9.3-8.7 22.8-22 30-29.7 7.2-7.7 16.9-18.5 21.7-24 4.7-5.5 11.8-14.3 15.9-19.5 4.1-5.2 11.6-15.6 16.6-23 5-7.4 12.2-18.9 15.9-25.5 3.7-6.6 8.6-16.3 11-21.5 2.3-5.2 5.7-13.6 7.4-18.5 1.8-5 4.1-12.6 5.2-17 1.1-4.4 2.7-12.5 3.5-18 0.7-5.5 1.4-13.5 1.4-17.8 0-4.2-0.7-13-1.5-19.5-0.9-6.4-2.7-16.2-4.1-21.7-1.4-5.5-4.1-14.3-6.1-19.5-1.9-5.2-5.7-13.8-8.5-19-2.8-5.2-7.8-13.5-11.2-18.4-3.3-4.9-9.5-12.8-13.6-17.5-4.1-4.7-11.1-11.6-15.5-15.4-4.4-3.7-12.1-9.5-17-12.9-5-3.3-13.7-8.4-19.5-11.3-5.8-2.9-14.6-6.7-19.5-8.4-5-1.8-11.5-3.8-14.5-4.6-3-0.8-10.8-2.3-17.3-3.5-8.8-1.5-15.7-2-28-1.9-8.9 0.1-18.2 0.5-20.7 1z"/>
    <path class="marker" d="m228 91.1c-2.5 0.5-8.3 1.6-13 2.5-4.7 0.9-13.8 3.3-20.3 5.5-6.4 2.1-16.5 6.3-22.5 9.3-5.9 3-14.6 8-19.4 11.3-4.8 3.2-12.6 9.2-17.4 13.3-4.9 4.1-12.1 11.3-16.2 16-4.1 4.7-10.7 13.4-14.8 19.5-4 6-9.3 15.3-11.8 20.5-2.5 5.2-6.1 14.2-8 20-2 5.8-4.4 14.8-5.5 20-1.1 5.2-2.5 13.9-3 19.2-0.6 5.4-1.1 12.9-1.1 16.8 0 3.8 0.7 11.6 1.5 17.2 0.9 5.7 2.7 14.8 4.2 20.3 1.4 5.5 4.4 14.7 6.6 20.5 2.2 5.8 7 16.3 10.7 23.5 3.6 7.1 10.2 18.6 14.5 25.5 4.4 6.9 12.7 18.8 18.5 26.5 5.7 7.7 14.9 19.2 20.3 25.5 5.5 6.3 15.1 17.1 21.6 23.9 6.4 6.9 19 19.4 28.1 27.9 9.1 8.5 23.1 21 31.2 27.8 10.3 8.6 15.6 12.4 17.3 12.4 1.4 0 4-1 5.7-2.3 1.8-1.2 8-6.2 13.8-11 5.8-4.9 18.1-15.9 27.4-24.5 9.3-8.7 22.8-22 30-29.7 7.2-7.7 16.9-18.5 21.7-24 4.7-5.5 11.8-14.3 15.9-19.5 4.1-5.2 11.6-15.6 16.6-23 5-7.4 12.2-18.9 15.9-25.5 3.7-6.6 8.6-16.3 11-21.5 2.3-5.2 5.7-13.6 7.4-18.5 1.8-5 4.1-12.6 5.2-17 1.1-4.4 2.7-12.5 3.5-18 0.7-5.5 1.4-13.5 1.4-17.8 0-4.2-0.7-13-1.5-19.5-0.9-6.4-2.7-16.2-4.1-21.7-1.4-5.5-4.1-14.3-6.1-19.5-1.9-5.2-5.7-13.8-8.5-19-2.8-5.2-7.8-13.5-11.2-18.4-3.3-4.9-9.5-12.8-13.6-17.5-4.1-4.7-11.1-11.6-15.5-15.4-4.4-3.7-12.1-9.5-17-12.9-5-3.3-13.7-8.4-19.5-11.3-5.8-2.9-14.6-6.7-19.5-8.4-5-1.8-11.5-3.8-14.5-4.6-3-0.8-10.8-2.3-17.3-3.5-8.8-1.5-15.7-2-28-1.9-8.9 0.1-18.2 0.5-20.7 1z"/>
</svg>
@jpodpro
Copy link
Author

jpodpro commented Oct 29, 2024

Note that, like increasing the scale, increasing the feMorphology radius within the stroke-inside filter above a certain threshold also reaches a point where the issue stops happening. However this isn't exactly a fix as that increases the thickness of the stroke beyond where I would prefer it to be. At a certain thickness and scale the resize begins to become problematic.

@wieslawsoltes wieslawsoltes added the bug Something isn't working label Nov 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants