The big advantage of Windows Calculator is providing special-made images of doors and windows which aren’t squeezing while changing their size. Namely, frame proportion of the image isn’t distorted while making the product larger or smaller. That represents a real life behavior when you need to choose a specific size for your window opening, but the frame itself will keep the same space whatever glass size is selected.
A good example demonstration is lower:
As you can notice bottom windows have different widths, however the left one frame isn’t squeezed, while the right one isn’t stretched. The frame always takes the same size for the windows cause it will be the same for any glass size.
Is that some magic? Let’s find this out.
How it’s done?
These images are special-made SVGs available with the plugin. All of them can be imported into media-library while plugin demo-data generation process.
Unfortunately, SVG itself doesn’t allow to move its child lower a top-left zero coordinate for some value, and then use the same value to reduce the percentage width or height. Namely, to place an element lower coordinate, for example, at 5 pixels, then take the whole canvas size, but keep a 5 pixels space from the right-bottom side of the image.
Fortunately, modern CSS can provide a workaround. There is a calc() function to calculate an accurate size using percents and pixels together. This feature allows us to move a rectangle lower the zero coordinate, fill the available size, but reduce the size by some value.
Here how it looks for a plugin image:
As you can see this element is moved right-down at 7 pixels, but to keep 7 pixels from the right-bottom size its size reduced by 7 * 2 = 14 pixels. The element takes the 100% size of the image, but 14 pixel less whatever image size currently is.
And here we have the trick done!
Editing images
That’s good, but what if we want to modify or create own images? Should be code this all by hand?
If you’re a web-developer, then you probably can 🙂 But if it looks complicated for you, just use a special online visual editor made specially for the Windows Calculator plugin:
https://troll-winner.com/flexible-svg-editor/
Here how it looks like:
By default it has a window frame image with two glasses. You can upload another SVG using the input at the top of the page.
This tool provides a list of all SVG elements with possibility to change any property, change their position, clone and add new elements.
But what about the scalability of the images? The process keeping elements offset is much simplified with the available settings. First of all, you can place an element at the place you need using X/Y settings. They support percentage and pixels units to cover different use-cases.
Next, set the required element size using Width/Height settings. They also can have percents or pixels value.
And the most interesting part are Width/Height offset settings to keep some space. These settings just use the same calc() CSS-function. It will use a Width/Height value and reduce the offset value automatically.
You always can test the image scalability with the handle at the right-bottom corner of the canvas. Just resize it to see how the resized image will look like.
Then just download you SVG image to use it with the Windows Calculator plugin.
Conclusions
We have found a good way to provide a flexible SVG images on a page. Don’t forget about the main benefit of using such SVGs. As they are available right on the calculator page, that means it’s possible to affect them using custom CSS. For example, using calculator options.
Feel free to create good scalable images for your Windows Calculator! 🙂