Command icon format is PDF

Hey, I just noticed SU2021+ use .pdf for the toolbar icon formats (and not a png).

ie a resolution independent representation of the icons. Neat. Did I miss the announcement? :slight_smile:

As developers, should we also be using pdf?

It was announced for SU2016 :sweat_smile:

Since SketchUp 2016 it is possible to provide vector images for the command. SVG format for Windows and PDF format for OS X. Since the vector images scale for both small and large icon sizes, you may choose to use only one vector image for both variants.

It’s not ideal that we’re using two different formats, one per platform - alas, that’s the current situation. (Which we’re planning on addressing.)

1 Like

Ha, yes I see its Mac only. :frowning:
I was just looking to refresh my toolbar icons - recommended icon size is (still) 48x48?

You use SVG format for Windows, and PDF for MAC.
You test which OS is being used and use the appropriate file-format, shipping both with the Extension.

if Sketchup.platform == :platform_osx
  ### use PDF for MAC
  ### use SVG for Windows

With Svg or pdf vector format, the icon size scales automatically as needed. No fixed size needed.

So taking this topic further. Say I have Inkscape (which I do) and I draw an SVG icon (which I have) … how I do save for PDF so an extension can support MacOS ?

I print from SVG [Inkscape], and choose a PDF writer from the available printers - Microsoft adds a shipped one… as do some of my other apps, and there are also several others freely available…

1 Like

No, never has been.

Icon sizes are 32x32 and 24x24 for large and small sizes respectively. (Described in the documentation.)

OK, documentation and implementation have diverged perhaps.

Toolbar on Mac using 24,32,64,48px

The 64x64 looks better.

Toolbar on Windows using 24,32,48,64px

Above 32x32 looks no better.

I think in 2023 and 4k displays etc, using 32x32 seems a bit last century…

Not sure what you mean by that, SU never expects icons in 48 or 64 sizes. SVG images are scaled to 24x24 and 32x32 logical pixels (multiplied by the UI scaling factor).

The point is that even when using vector images you are best of designing for the lowest denominator. Vector images has to be rasterized to be displayed and if the vertical and horizontal lines doesn’t line up with the pixel grid that’ll quickly become visible on low-DPI monitors. (And the majority of users still have low-DPI monitors according to our usage stats.)

To ensure an icon looks the best in all resolutions it’s best to design it against 24x24 and 32x32 grids. Then if the user has a higher DPI monitor that scales up easily without artifacts. But if you design them larger you’ll almost certainly run into issues with the icons appearing blurry on low DPIs.

Regardless of what is intended, the reality is as shown in the screenshots. On Mac, 64x64px looks better than 32x32px. (Not talking about SVG).

Is that bitmap of vector images used? (Looks like the screenshot is from a high DPI monitor, right?)

png bitmap

And what was display resolution set to ?
Was SU set for large or small toolbar buttons ?
Confirm it is also a 4K display ?

In the pics above regardless of platform, I see little if any difference in the 48 and 64 px images.

The 24 and 36 are definitely pixilated.