SVG files have same width and no viewbox but both look different sizes

Question

These 2 SVG images have the same widths, but the XBox logo, and the Amazon logo, look completely different width sizes when viewed on screen. Why is this?

Xbox:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="100px"><path d="M61.1,15.4l-3.7-5-3.6,5H52.3l4.4-6L52.7,4h1.5l3.2,4.4L60.7,4h1.5l-4,5.4,4.4,6Zm-28.4,0-4.4-6,4-5.4H30.8L27.5,8.4,24.3,4H22.8l4,5.4-4.4,6h1.5l3.6-5,3.7,5Z" transform="translate(0)" style="fill:#0f7c10"/><path d="M41,9.8l-.7-.5a2.6,2.6,0,0,0,1.4-2.2c0-.8-.3-3.1-3.8-3.1H33.3V8.9H31.8L30.9,10h2.4v5.4h4.6c2.6,0,4.1-1.3,4.1-3.4a2.7,2.7,0,0,0-1-2.2M34.6,5.1h3.3c1,0,2.5.3,2.5,1.9s-.9,1.9-2.5,1.9H34.6Zm3.3,9.1H34.6V10h3.3c1.3,0,2.8.4,2.8,2s-1.7,2.2-2.8,2.2M48,3.7c-3.2,0-5.4,2.4-5.4,6s2.2,5.9,5.4,5.9,5.5-2.4,5.5-5.9-2.3-6-5.5-6m0,10.7c-2.4,0-4.1-1.9-4.1-4.7S45.6,4.9,48,4.9s4.2,2,4.2,4.8-1.7,4.7-4.2,4.7M2.8,2.7h0A9.7,9.7,0,0,0,0,9.5a10.1,10.1,0,0,0,1.9,5.8H2C1.3,13,5,7.6,6.9,5.3h0C3.7,2,2.8,2.8,2.8,2.7m13.4,0h0A9.7,9.7,0,0,1,19,9.5a10.1,10.1,0,0,1-1.9,5.8H17c.7-2.2-3-7.6-4.9-9.9h0c3.2-3.2,4.1-2.4,4.1-2.5M9.5,0a9.4,9.4,0,0,1,5,1.4h0c0,.1,0,.1-.1.1-1.8-.4-4.6,1.1-4.9,1.3h0C8.8,2.4,6.2,1,4.6,1.5a.1.1,0,0,1-.1-.1h0A9.4,9.4,0,0,1,9.5,0m0,7.6h0c2.9,2.2,7.8,7.6,6.3,9.1h0a9.8,9.8,0,0,1-12.6,0h0C1.8,15.2,6.6,9.8,9.5,7.6h0" transform="translate(0)" style="fill:#0f7c10"/></svg>

Amazon

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="100px"><path d="M198.6 75.5c-18.6 13.7-45.5 21-68.8 21a124.2 124.2 0 0 1-84-32.1c-1.7-1.5-.2-3.7 1.9-2.5 23.9 14 53.5 22.3 84.1 22.3a165.9 165.9 0 0 0 64.1-13.1c3.2-1.3 5.8 2.1 2.7 4.4z" fill="#f49800" fill-rule="evenodd"/><path d="M206.4 66.6c-2.4-3-15.7-1.4-21.7-.7-1.9.2-2.1-1.4-.5-2.5 10.7-7.5 28.1-5.3 30.1-2.8s-.5 20-10.5 28.3c-1.5 1.3-3 .6-2.3-1.1 2.2-5.6 7.3-18.1 4.9-21.2z" fill="#f49800" fill-rule="evenodd"/><path d="M185.1 10.5V3.3a1.8 1.8 0 0 1 1.8-1.9h32.6a1.9 1.9 0 0 1 1.9 1.9v6.2c0 1-.9 2.4-2.5 4.6l-16.8 24.1c6.2-.2 12.8.8 18.5 4a3.2 3.2 0 0 1 1.8 2.8v7.7a1.8 1.8 0 0 1-2.4 1.7 37.8 37.8 0 0 0-34.5.1c-1.1.6-2.3-.6-2.3-1.7v-7.4a8.6 8.6 0 0 1 1.2-5l19.6-28h-17a1.8 1.8 0 0 1-1.9-1.9zM66.3 55.9h-10a1.7 1.7 0 0 1-1.7-1.6V3.4a1.8 1.8 0 0 1 1.9-1.8h9.2a1.7 1.7 0 0 1 1.8 1.7v6.6h.2c2.4-6.4 7-9.4 13.1-9.4s10 3 12.8 9.4a14.7 14.7 0 0 1 25.2-3.8c3.1 4.2 2.5 10.4 2.5 15.9v32.1a1.9 1.9 0 0 1-1.9 1.8h-9.9a1.8 1.8 0 0 1-1.8-1.8v-27c0-2.1.2-7.4-.3-9.5s-3-4.4-5.8-4.4a6.7 6.7 0 0 0-6 4.2c-1 2.6-.9 6.9-.9 9.7v27a1.8 1.8 0 0 1-1.9 1.8h-9.9a1.8 1.8 0 0 1-1.8-1.8v-27c0-5.6.9-14-6.1-14s-6.8 8.2-6.8 14v27a1.9 1.9 0 0 1-1.9 1.8zM249.5 10.9c-7.3 0-7.8 9.9-7.8 16.1s0 19.5 7.7 19.5 8.1-10.7 8.1-17.2c0-4.3-.2-9.4-1.5-13.5s-3.3-4.9-6.5-4.9zM249.4.5c14.7 0 22.7 12.6 22.7 28.7S263.3 57 249.4 57s-22.3-12.6-22.3-28.4S235.1.5 249.4.5zM291.2 55.9h-9.9a1.8 1.8 0 0 1-1.8-1.8V3.2a1.9 1.9 0 0 1 1.9-1.6h9.2a1.8 1.8 0 0 1 1.8 1.4v7.8h.1c2.8-7 6.7-10.3 13.5-10.3 4.5 0 8.8 1.6 11.6 6s2.6 10.9 2.6 15.8v32a1.9 1.9 0 0 1-1.9 1.6h-9.9a1.8 1.8 0 0 1-1.8-1.6V26.7c0-5.5.6-13.7-6.2-13.7a6.4 6.4 0 0 0-5.7 4.1c-1.4 3.1-1.6 6.2-1.6 9.6v27.4a1.9 1.9 0 0 1-1.9 1.8zM169.1 55.8a2 2 0 0 1-2.3.2c-3.3-2.7-3.9-4-5.7-6.6-5.5 5.6-9.3 7.2-16.4 7.2s-14.8-5.1-14.8-15.4A16.8 16.8 0 0 1 140.5 25c5.4-2.4 12.9-2.8 18.6-3.4v-1.3c0-2.4.2-5.2-1.2-7.2a6.7 6.7 0 0 0-5.6-2.6c-3.7 0-7.1 1.9-7.9 6a2.1 2.1 0 0 1-1.7 1.8l-9.6-1.1a1.6 1.6 0 0 1-1.5-2C133.8 3.5 144.3 0 153.7 0c4.9 0 11.2 1.3 15 4.9S173 15.4 173 22v15.4c0 4.7 2 6.7 3.8 9.2a1.9 1.9 0 0 1-.1 2.6l-7.6 6.6zm-10-24.2c0 3.9.1 7.1-1.8 10.6s-4.1 4.5-6.9 4.5-6-2.9-6-7.2c0-8.5 7.5-10 14.7-10v2.1zM39.2 55.8a2 2 0 0 1-2.3.2c-3.3-2.7-3.9-4-5.7-6.6-5.5 5.6-9.3 7.2-16.4 7.2S0 51.5 0 41.2A16.8 16.8 0 0 1 10.6 25c5.3-2.4 12.9-2.8 18.6-3.4v-1.3c0-2.4.2-5.2-1.2-7.2a6.7 6.7 0 0 0-5.6-2.6c-3.7 0-7.1 1.9-7.9 6a2.2 2.2 0 0 1-1.8 1.8l-9.6-1.1a1.6 1.6 0 0 1-1.4-2C3.9 3.5 14.4 0 23.8 0c4.8 0 11.2 1.3 15 4.9s4.3 10.5 4.3 17.1v15.4c0 4.7 1.9 6.7 3.7 9.2.7.9.8 2 0 2.6l-7.6 6.6zm-10-24.2c0 3.9.1 7.1-1.9 10.6a8 8 0 0 1-6.8 4.5c-3.8 0-6-2.9-6-7.2 0-8.5 7.5-10 14.7-10v2.1z" fill="#12100b" fill-rule="evenodd"/></svg>

Why is this?

Answer 1

I've figured this out. Finally! There's a simple way to do this. Like so:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

The problem was when you export an image from Illustrator (as many do) the artboard is not included in the exported SVG. The paths have nothing to base their calculations on.

In my case the max height for my images was 100px and I needed to base the CSS styles for these images based on their width and height. In CSS I use vw units, or just plain old 100% if the SVG is to fill block space. This scales nicely. That way you haven't go to mess about setting the width and height in CSS to ensure it displays correctly.

I went through each logo and set the height to 100px and let the width auto calculate based on the aspect ratio. I then fit the artboard to the logo to remove any unused space.

I selected a rectangle and turned fill and stroke off and I ensured it was the exact same size as the artboard. Place this blank object at the back. Now when you export the path will have a base to work the calculations on.

To do this in code it appears you can wrap the paths in a rect and set it's width and height, and then you can set the viewBox to the same (keep aspect ratios the same). As shown in the example above. I haven't actually tested this but I will test and update.

Answer 2

If you carefully inspect, you realize they have the same boundingClientRect, however it is the path elements that are different:

<path d="M41,9.8l-.7-.5a2.6,2.6,0,0,0,1.4-2.2c0-.8-.3-3.1-3.8-3.1H33.3V8.9H31.8L30.9,10h2.4v5.4h4.6c2.6,0,4.1-1.3,4.1-3.4a2.7,2.7,0,0,0-1-2.2M34.6,5.1h3.3c1,0,2.5.3,2.5,1.9s-.9,1.9-2.5,1.9H34.6Zm3.3,9.1H34.6V10h3.3c1.3,0,2.8.4,2.8,2s-1.7,2.2-2.8,2.2M48,3.7c-3.2,0-5.4,2.4-5.4,6s2.2,5.9,5.4,5.9,5.5-2.4,5.5-5.9-2.3-6-5.5-6m0,10.7c-2.4,0-4.1-1.9-4.1-4.7S45.6,4.9,48,4.9s4.2,2,4.2,4.8-1.7,4.7-4.2,4.7M2.8,2.7h0A9.7,9.7,0,0,0,0,9.5a10.1,10.1,0,0,0,1.9,5.8H2C1.3,13,5,7.6,6.9,5.3h0C3.7,2,2.8,2.8,2.8,2.7m13.4,0h0A9.7,9.7,0,0,1,19,9.5a10.1,10.1,0,0,1-1.9,5.8H17c.7-2.2-3-7.6-4.9-9.9h0c3.2-3.2,4.1-2.4,4.1-2.5M9.5,0a9.4,9.4,0,0,1,5,1.4h0c0,.1,0,.1-.1.1-1.8-.4-4.6,1.1-4.9,1.3h0C8.8,2.4,6.2,1,4.6,1.5a.1.1,0,0,1-.1-.1h0A9.4,9.4,0,0,1,9.5,0m0,7.6h0c2.9,2.2,7.8,7.6,6.3,9.1h0a9.8,9.8,0,0,1-12.6,0h0C1.8,15.2,6.6,9.8,9.5,7.6h0" transform="translate(0)" style="fill:#0f7c10"></path>

way smaller than:

<path d="M185.1 10.5V3.3a1.8 1.8 0 0 1 1.8-1.9h32.6a1.9 1.9 0 0 1 1.9 1.9v6.2c0 1-.9 2.4-2.5 4.6l-16.8 24.1c6.2-.2 12.8.8 18.5 4a3.2 3.2 0 0 1 1.8 2.8v7.7a1.8 1.8 0 0 1-2.4 1.7 37.8 37.8 0 0 0-34.5.1c-1.1.6-2.3-.6-2.3-1.7v-7.4a8.6 8.6 0 0 1 1.2-5l19.6-28h-17a1.8 1.8 0 0 1-1.9-1.9zM66.3 55.9h-10a1.7 1.7 0 0 1-1.7-1.6V3.4a1.8 1.8 0 0 1 1.9-1.8h9.2a1.7 1.7 0 0 1 1.8 1.7v6.6h.2c2.4-6.4 7-9.4 13.1-9.4s10 3 12.8 9.4a14.7 14.7 0 0 1 25.2-3.8c3.1 4.2 2.5 10.4 2.5 15.9v32.1a1.9 1.9 0 0 1-1.9 1.8h-9.9a1.8 1.8 0 0 1-1.8-1.8v-27c0-2.1.2-7.4-.3-9.5s-3-4.4-5.8-4.4a6.7 6.7 0 0 0-6 4.2c-1 2.6-.9 6.9-.9 9.7v27a1.8 1.8 0 0 1-1.9 1.8h-9.9a1.8 1.8 0 0 1-1.8-1.8v-27c0-5.6.9-14-6.1-14s-6.8 8.2-6.8 14v27a1.9 1.9 0 0 1-1.9 1.8zM249.5 10.9c-7.3 0-7.8 9.9-7.8 16.1s0 19.5 7.7 19.5 8.1-10.7 8.1-17.2c0-4.3-.2-9.4-1.5-13.5s-3.3-4.9-6.5-4.9zM249.4.5c14.7 0 22.7 12.6 22.7 28.7S263.3 57 249.4 57s-22.3-12.6-22.3-28.4S235.1.5 249.4.5zM291.2 55.9h-9.9a1.8 1.8 0 0 1-1.8-1.8V3.2a1.9 1.9 0 0 1 1.9-1.6h9.2a1.8 1.8 0 0 1 1.8 1.4v7.8h.1c2.8-7 6.7-10.3 13.5-10.3 4.5 0 8.8 1.6 11.6 6s2.6 10.9 2.6 15.8v32a1.9 1.9 0 0 1-1.9 1.6h-9.9a1.8 1.8 0 0 1-1.8-1.6V26.7c0-5.5.6-13.7-6.2-13.7a6.4 6.4 0 0 0-5.7 4.1c-1.4 3.1-1.6 6.2-1.6 9.6v27.4a1.9 1.9 0 0 1-1.9 1.8zM169.1 55.8a2 2 0 0 1-2.3.2c-3.3-2.7-3.9-4-5.7-6.6-5.5 5.6-9.3 7.2-16.4 7.2s-14.8-5.1-14.8-15.4A16.8 16.8 0 0 1 140.5 25c5.4-2.4 12.9-2.8 18.6-3.4v-1.3c0-2.4.2-5.2-1.2-7.2a6.7 6.7 0 0 0-5.6-2.6c-3.7 0-7.1 1.9-7.9 6a2.1 2.1 0 0 1-1.7 1.8l-9.6-1.1a1.6 1.6 0 0 1-1.5-2C133.8 3.5 144.3 0 153.7 0c4.9 0 11.2 1.3 15 4.9S173 15.4 173 22v15.4c0 4.7 2 6.7 3.8 9.2a1.9 1.9 0 0 1-.1 2.6l-7.6 6.6zm-10-24.2c0 3.9.1 7.1-1.8 10.6s-4.1 4.5-6.9 4.5-6-2.9-6-7.2c0-8.5 7.5-10 14.7-10v2.1zM39.2 55.8a2 2 0 0 1-2.3.2c-3.3-2.7-3.9-4-5.7-6.6-5.5 5.6-9.3 7.2-16.4 7.2S0 51.5 0 41.2A16.8 16.8 0 0 1 10.6 25c5.3-2.4 12.9-2.8 18.6-3.4v-1.3c0-2.4.2-5.2-1.2-7.2a6.7 6.7 0 0 0-5.6-2.6c-3.7 0-7.1 1.9-7.9 6a2.2 2.2 0 0 1-1.8 1.8l-9.6-1.1a1.6 1.6 0 0 1-1.4-2C3.9 3.5 14.4 0 23.8 0c4.8 0 11.2 1.3 15 4.9s4.3 10.5 4.3 17.1v15.4c0 4.7 1.9 6.7 3.7 9.2.7.9.8 2 0 2.6l-7.6 6.6zm-10-24.2c0 3.9.1 7.1-1.9 10.6a8 8 0 0 1-6.8 4.5c-3.8 0-6-2.9-6-7.2 0-8.5 7.5-10 14.7-10v2.1z" fill="#12100b" fill-rule="evenodd"></path>

http://jsfiddle.net/ibowankenobi/4d968ta0/1/

SOLUTION:

readjust the viewBox attribute on the Xbox figure so that the paths fills it nicely, you might not get the scale perfect so to make sure disable preserveAspectRatio:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 20" preserveAspectRatio="none">

Lastly, get rid of width and height attributes and define them in the css, like here:

http://jsfiddle.net/ibowankenobi/4d968ta0/5/