[Changing an SVG's natural dimensions] #icons #github #artboard

changing-an-svgs-natural-dimensions.md

Changing an SVG's natural dimensions

Background

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.

Source images

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.

Scale the .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 viewbox to scale x-nodejs.svg to match x-mocha.svg
• use the viewbox to 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.07612416
• nodejsNewHeight = 192 (match x-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.

Scale the viewbox dimensions

<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 ) = 272
• nodejsViewportHeight (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.

Scale the viewbox position

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?

---

Links

• https://mochajs.org (Mocha SVG)
• Worldvectorlogo (Node.js SVG)
• Github Flavoured Markdown
• Using SVG
• SVG Viewport and viewBox (For Complete Beginners)
• How Do You Add Percentages?

x-mocha.svg

x-nodejs.svg