FYI, if you are using the rendering API in SDL2, there is a function SDL_RenderSetLogicalSize which allows you to program to a fixed resolution no matter the resolution of the display window. The entire output is scaled by the hardware (assuming the D3D or OpenGL renderer). This is a painless alternative to handling SVGs. I'm using it to good effect in a game I'm working on right now. It's a low-res game, so I'm rendering to an 800x600 logical size. For high-res graphics, you'd want to render to a higher logical resolution that would then be scaled down. I don't know for sure what sort of effect it would have on quality in that case, but it would certainly be worth looking into before going all SVG and scaling individual images.
I'm not familiar with SDL2, but SFML has something similar (using 'views'), and is an awesome by-product of the nature of the 3D APIs which SDL2 and SFML are built upon.
While nice and useful for most things (the game content itself)... if you use it with your GUI, still have to take into account the *ratio* of the resolution, or your GUI can get stretched in ways you don't want.
SDL2 isn't ready yet there is some better stuff in it, but I would still like to avoid it until it is officially released. I can scale my sprites using streching which appears to have good effect when downscaling. So, any advice on how can I calculate how much I should resize the sprite depending on screen resolution, so it covers 'the same' amount of screen? The problem that I currently see is that I can't exactly tell if the sprite is scaled up enough. I am currently testing with 640x480 and 800x600 resolutions.
The cheap and easy way is to use percentages (well, 0.0 to 1.0). If the GUI element is 20 pixels of a 800 pixel wide screen, that's 0.025f the screen. So for a 1024 wide screen, you might resize it to 26 pixels wide (1024 * 0.025 = 25.6). Bu you also want to keep the the element from being stretched out of it's shape, so you need to calculate the width of the element relative to it's height, then multiply.
float guiElementRatio = (NormalElementHeight / NormalElementWidth); float elementRelativeWidth = (NormalElementWidth / NormalScreenWidth); int currentElementWidth = (CurrentScreenWidth * elementRelativeWidth); int currentElementHeight = (currentElementWidth * guiElementRatio);
I was resizing the elements based on the width of the screen - in retrospect, resizing the elements based off of the height of the screen is a better solution.
Anyway, you can do the same with the element's position. As mentioned, this is the cheap and easy way - a more difficult but superior solutions also have the elements morphing in the content they show, as more screen space becomes available or scarcer.