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

In your frame SVG images are blurry, what should I do to keep them blurry #701

Open
xcfdszzr opened this issue Jul 1, 2022 · 3 comments

Comments

@xcfdszzr
Copy link

xcfdszzr commented Jul 1, 2022

              <?xml version="1.0" encoding="UTF-8"?>
              <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>添加_7_</title>
                  <g id="设计稿-1.0.1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g id="RPA规范-按钮" transform="translate(-916.000000, -525.000000)" fill-rule="nonzero">
                          <g id="组_262" transform="translate(878.000000, 517.000000)">
                              <g id="添加_7_" transform="translate(38.000000, 8.000000)">
                                  <circle id="椭圆_51" fill="#FFFFFF" cx="6" cy="6" r="6"></circle>
                                  <path d="M6.409,5.591 L6.409,3.136 C6.409,2.91011554 6.22588446,2.727 6,2.727 C5.77411554,2.727 5.591,2.91011554 5.591,3.136 L5.591,5.591 L3.136,5.591 C2.91011554,5.591 2.727,5.77411554 2.727,6 C2.727,6.22588446 2.91011554,6.409 3.136,6.409 L5.591,6.409 L5.591,8.864 C5.591,9.08988446 5.77411554,9.273 6,9.273 C6.22588446,9.273 6.409,9.08988446 6.409,8.864 L6.409,6.409 L8.864,6.409 C9.08988446,6.409 9.273,6.22588446 9.273,6 C9.273,5.77411554 9.08988446,5.591 8.864,5.591 L6.409,5.591 Z M6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 Z" fill="#5764FF"></path>
                              </g>
                          </g>
                      </g>
                  </g>
              </svg>

image

image

SVG images are blurred in label and button

How can I make SVG images in high definition without blurring。

@mgarin
Copy link
Owner

mgarin commented Jul 1, 2022

It depends on how you're using it. Whenever you're using an SVG image in Swing you still need to specify its desired size in pixels, because that's what all Swing component use as coordinates for display. The benefit of using SVG images is that you can scale them to any size without any loss of quality.

Although I think the problem you're encountering is that the SVG image on your screenshot is being rendered as 16x16 px, but then upscaled by either the system, native window or JDK (Swing framework) to 32x32. I'm not exactly sure from this screenshot alone though whether the whole UI is being upscaled or just the icon. If it is the whole UI - which is a higher possibility - this is a general problem that stems from UI upscaling on high resolution screens.

Overall - there are multiple issues with high-res screens that I haven't solved yet as the support in the earlier JDKs for high-resolution screens was pretty poor (or non-existent). I'll have to take a proper look at it at some point and see how it can be properly supported (and if it can be in earlier JDK versions).

@mgarin
Copy link
Owner

mgarin commented Jul 1, 2022

I've added a high resolution tag to group all the issues related to the topic.
Main one will probably be #352 under which I'll be posting updates on any changes made.

Although for now, unfortunately, I can't really offer any immediate solution as this will most probably involve pretty big changes within the library and might even require transition to later Java version support in the first place (currently WebLaF supports Java 6u30+).

@xcfdszzr
Copy link
Author

xcfdszzr commented Jul 2, 2022

Dear author, I see in other frameworks they handle SVG images in HD. This framework is flatLAf.

image

You integrate the principles of image processing within their framework. To manipulate the images in your frame.

Look forward to your release soon. Or publish SNAPSHOT

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants