How prepare bitmap images and SVG for custom buttons

Dancer18

Pawel has shown in this blog very nicely and understandably how we can create and place custom buttons for workspaces.

I was able to implement all this very well up to the point where it is about the desired size of the button. Without editing the image files in a special way, you will probably get buttons that are too large, beyond the 28 x 28 px frame.

Here I describe on one example each, how the editing of a SVG and a bitmap-image succeeds.

DISCLAIMER: I'm not an expert for editing and creating SVGs. @luetage warned about it in his feedback below, that my approach is not a standard one.
So I followed his recommendation to change the procedure and I also have checked it in Inkscape forum.
Now it works quite well. You are free to check it out.

1. SVG
On this page there are "material design" - icons, e.g. a shopping cart icon for the corresponding workspace "Shopping". Before downloading as SVG you can still make various settings. The file has this code (as it appears in a text editor):

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M280 976q-33 0-56.5-23.5T200 896q0-33 23.5-56.5T280 816q33 0 56.5 23.5T360 896q0 33-23.5 56.5T280 976Zm400 0q-33 0-56.5-23.5T600 896q0-33 23.5-56.5T680 816q33 0 56.5 23.5T760 896q0 33-23.5 56.5T680 976ZM246 336l96 200h280l110-200H246Zm34 440q-45 0-68-39.5t-2-78.5l54-98-144-304H79q-17 0-28-11.5T40 216q0-17 11.5-28.5T80 176h65q11 0 21 6t15 17l27 57h590q27 0 37 20t-1 42L692 574q-11 20-29 31t-41 11H324l-44 80h441q17 0 28 11.5t11 28.5q0 17-11.5 28.5T720 776H280Zm62-240h280-280Z"/></svg>

This downloaded SVG is to replace the default icon. The next screenshot of the Settings (Themes >Editor >Icons) is showing where the default icon is to be replaced by a custom button. The dashed line shows where the icon should go:

If we use the downloaded SVG as is, it will be too big no matter what size (in px) we put in. You can see this clearly in the screenshot below:

After editing the SVG it looks quite different:

@luetage gave me important advice, especially that the SVG is to be edited with Inkscape. Inkscape or an equivalent program is required to edit SVG.

Once the program is installed, just click on the SVG to open it in Inkscape or similar program:

First open "Document Properties" and set height and width from (in this case 24) to 28 px. (lower red frame)
Close "Document Properties".
Change both values within the upper red frames. First hit the lock button between them (green frame) to preserve the aspect ratio, then change the larger value (if they are different) to 16 px.
At last make sure to have the symbol centered. You can do it with mouse or by setting the values for "X" and "Y" (left of upper red frames) more or less equal. If there is more than 1 path (part of image) you have to select all and group them with "Strg+G".
Finally, just save it and now you can drag it into the Settings box. See third screenshot above. Pawel has shown in his blog how to change the color of the button in the active workspace. I will not repeat that here. Note to place the additional code in the right place (SVG opened in text-editor).

2. Bitmap images
Bitmap images are of various formats, as @Pathduck wrote in his feedback below this article:
"Vivaldi supports bitmap images in BMP, GIF, JPG, JPEG, PNG, and WEBP format". PNG is recommended.
They must be prepared in a similar way. The outer frame has the size 28 x 28 px. This means that the icons must be much smaller in order not to extend over the dashed line. As an example, I choose an image for the email button:

.

This is a PNG file. The size doesn't matter here either, except that too small files may become too pixelated. Open it in your image editor (Gimp or Photoshop). This tutorial is based on Gimp.

In the menu go to Tools, then to Select tools > Select by color. Then click on the dark background. Then click Delete key. The background changes to green. In the menu go to Layer, then to Transparency > Add alpha channel. Click again Delete.
If you did everything right, the background is now transparent.

Now - as above with the SVG - you have to scale down the symbol. Go in the menu again to Tools, then to Transform > Scale. Similar to SVG you pull the symbol together with the mouse and click on Scale. Finally you have to center the symbol again. This is also done under Tools > Transformation with Move.

In Gimp you can't save it directly. Instead you have to export it. In menu go to Files, Export to... and chose destination and format (PNG).
Klick on export. Now you can insert the saved PNG-image as custom button in the settings.

Done.

If you are an expert I'd like you to comment this little tutorial to clean out any mistakes or make it more understandable. Thank you.

Pathduck

@Dancer18 Really good guide, and might help explain the complexities of SVG files to those who struggle - like me

Just one clarification:

chose destination and format (BMP).

Vivaldi's Help says:
"Vivaldi supports bitmap images in BMP, GIF, JPG, JPEG, PNG, and WEBP format."
https://help.vivaldi.com/desktop/appearance-customization/creating-custom-icon-set/#Bitmap_resources

These formats are all bitmapped images. It does not have to be saved in the BMP format - in fact I wouldn't recommend using BMP as they are generally much larger on disk while PNG/WEBP are compressed. I would say PNG is recommended to use - all the other Vivaldi icons are using PNGs if they're not SVGs.

Dancer18

@Pathduck Thank you for your feedback.
Concerning BMP format I rely on the notice in the settings (red-marked by me) that I translated in "only bmp and svg":

However, I believe you're right, quoting Vivaldi's help.
I've updated the tutorial already.

luetage

@Dancer18 png and jpeg are bitmap formats too, they are just compressed. I wouldn’t mess around with bmp in the first place. Anyway, using an image is not recommended, use SVGs to stay compatible with all themes, or you will always run into background/contrast issues.

About your guide, you should rather point people to official resources, you’re arguably doing it wrong (concerning the svg part) and writing a guide after playing around with it for a couple of minutes. You are changing the image size to 13px but Vivaldi clearly states the image size should be 28px. When you have changed that to 28px you can then change the size of the SVG path itself to around 13 to 16px and afterwards center it horizontally and vertically, finally export.

Dancer18

@luetage I would like to use official ressouces as a basis and orient readers to them. Do you have a link?

In my other post you wrote this:

You are mixing up the container and the visible outline/image. You have to have a transparent background, this one is 28px. The drawing/outline is 13 to 16px at most, or you end up filling the whole container with the outline, as is apparent in your screenshot.

From your post above I learned that there is standard approach to get the result that is preferable.

I'll do my best to check it out and then edit my tutorial.
Keep in mind that up to now there isn't any other tutorial and everybody who wants to set custom buttons has to find out him(her)self.
And my approach is working at least.
All given feedbacks on this topic will improve it.

So thank you for all of your proposals and feedbacks. I appreciate it very much!
And I can even bear some harsh statements in your post.

BTW: An optimal solution would be that Vivaldi is providing a set of buttons that fits to the existing ones and can be used easily for workspaces, all of them created with standard approach and paths.

luetage

@Dancer18 It’s not about workspaces. Icon themes can only provide icons for existing UI elements. I have previously suggested to open up the format to allow theme creators to provide additional generic icon designs for command chains. This might happen, but it’s not a given.

You can only help/inform users about SVGs when you have understood them yourself. At this point you have made no effort to do so, you just started up a program and played around with it until you reached a result that was acceptable.

A few years ago I was new to SVG icons too. Vivaldi introduced this approach and I found a method to replace existing icons with CSS, that’s when we started modding them in the community. I didn’t know about Inkscape back then, the first icon I created I did the following: I read all the documentation I could find, then I drew a design/outline on graph paper and then I opened a text editor and wrote the code for the design down, no specific application needed. Maybe that’s what you should try too. After you grasped the concept you can switch over to using dedicated applications, creating dozens of icons and only then write a guide for it.

Pesala

Animated PNG images can also be used, but make the frame rate at five or ten seconds.

I have one for Capture Selection/Page, which flips between two icons, and another for show/hide/cached images that flips between three icons.

Dancer18

@luetage Thank you again. And yes: It is not a given. And it could be a feature request. We'll see.
Now I wrote a disclaimer and paste it into the thread above.

Update: I have checked the procedure in Inkscape forum and then updated the little tutorial.

Gregor

Is it possible to resize the svg icon in some online editor?
I tried a few and the most advanced I found is boxy-svg.com, but even there I can't resize the icon that is correctly displayed by Vivaldi.

Dancer18

@Gregor Unfortunately I can't help you there. I am also quite a newbie and am happy to get it done with Inkscape.

Basically it should also work online. Maybe you can find suitable tutorials.

legobuilder26

@Dancer18 said in How prepare bitmap images and SVG for custom buttons:

Then set both values within the upper red frames to 16 px.

To keep the height/width ratio of the svg the same and avoid stretching, I'd recommend clicking the lock icon and then set the larger of the two values to 16.

Dancer18

@legobuilder26 Yes, I agree with you.

Regarding the .png format, I found out that there is no need for a 28x28 px (or 16x16 px for the icon) limit at all, since these images fit automatically. The only important thing is the proportional difference between frame size and icon size as it is with svg too.

nomadic

These are the steps I would follow to convert a found SVG to one that would work in Vivaldi using Inkscape.

Screen recording: https://ttm.sh/Wak.webm

Steps:
(0.) If the SVG has this attribute set: xml:space="preserve" on the root SVG tag, it will often crash Inkscape. Using a text editor like Notepad, you can safely delete that attribute to prevent the crashing

Open Document Properties from the File menu
Set the document to use px as units and change the dimensions to 28 x 28 pixels
Close the Document Properties window
Select everything in the SVG (You can use Ctrl+A), if there is more than one item, group them with Ctrl+G
Then as @legobuilder26 said, hit the lock button in the top bar between the height and width values to preserve the aspect ratio
Change either the height or width (whichever is larger) to 16 pixels, but you can adjust is larger or smaller if the icon's shape requires it. 16 is the value you want for an icon that is basically a square, but plenty of icons will need to be adjusted to look right
Open the Align and Distribute menu and center the icon relative to the page. This is also something you will need to adjust on an icon to icon basis. A lopsided design should be shifted slightly out of center toward the lighter side
Then save the icon
If you want the icons to follow the theme's foreground color setting, you should change all set fill and stroke attributes from the paths and make them to currentColor. A text editor program with find and replace can help with this
(Optional) You can also run the SVG through an optimizer like SVGO, but it isn't strictly necessary. This site is good if you just want to do a few icons: https://jakearchibald.github.io/svgomg/
If you are doing several, doing it with a script is probably better. I actually used scour rather than SVGO while I made my icon set with a Python script

Dancer18

@nomadic Great! Thank you. I've updated the tutorial with your improvements.
However, I left it how it was concerning how to center the symbol, thinking that a description of your procedure exceeds the comprehension of all steps.

onisohelio

This post is deleted!