I want to insert several 3rd party 'technology badges' into my Github README, with the following constraints:
- I want to use SVGs, so the images look crisp on all screens
- I'm limited to inserting the SVGs as
<img>s - Github Flavoured Markdown doesn't provide any controls to resize my
<img>s - I have no control over the page CSS
In this scenario, the SVGs will display at their natural dimensions, i.e. the size of the artboard that they were authored on.
The first technology badge, x-mocha.svg is perfectly square, and nicely sized to 192px * 192px:
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192">
The second technology badge, x-nodejs.svg, is larger, and isn't perfectly square:
<svg width="256px" height="289px" viewBox="0 0 256 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
I want to scale x-nodejs.svg down, so that it can sit next to x-mocha.svg.
In x-nodejs.svg, the height, 289px, is the larger of the two dimensions, so I'll use that to calculate the scale involved.
But first, let's inspect x-nodejs.svg, to see how it is positioned on its artboard:
[screenshot]
Ah, there's a 6px gutter around the outside. We need to take this into account when matching the image heights:
- match the SVG heights
- use the
viewboxto scale x-nodejs.svg to match x-mocha.svg - use the
viewboxto offset x-nodejs.svg to match x-mocha.svg
First, calculate the scale:
targetHeight (192) / nodejsHeight (289) = scale (0.66435986)
Then calculate the new image dimensions
nodejsNewWidth = nodeJsWidth (256) * scale (0.62283737) = 170.07612416nodejsNewHeight = 192(matchx-mocha.svg)
Open x-nodejs.svg in a text editor and update the dimensions (you can leave out the px):
<svg width="170.07612416" height="192" viewBox="0 0 256 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
The image heights now match, but x-nodejs.svg is displaying larger than x-mocha.svg.
<svg width="170.07612416" height="192" viewBox="0 0 256 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
The rule here, is that a larger width and height makes the image appear to be smaller / zoomed out:
First, get the 6px gutters (top/bottom and left/right) as a fraction of the artboard:
gutter (6 * 2) / 192 = 0.0625
Then scale up the viewbox by this amount:
nodejsViewportWidth (256) * ( 1 + 0.0625 ) = 272nodejsViewportHeight (289) * ( 1 + 0.0625 ) = 307.0625
Update the x-nodejs.svg:
<svg width="170.07612416" height="192" viewBox="0 0 272 307.0625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
The SVGs are now the same height, but are not aligned vertically due to the 6px gutter.
Working backwards, I can see that I need to pan left and up by 9.5 to create the visual gutter:
<svg width="170.07612416" height="192" viewBox="-9.5 -9.5 272 307.0625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
How do I calculate this?
