这两个SVG图像具有相同的宽度，但是在屏幕上查看时，XBox徽标和Amazon徽标看起来完全不同。为什么会这样？
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>
亚马逊
<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>
这是为什么？
答案 0 :(得分：1)
如果仔细检查，就会发现它们具有相同的boundingClientRect，但是路径元素不同：
<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>
小于：
<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/
解决方案：
重新调整Xbox插图上的viewBox属性，以使路径很好地填充它，您可能无法获得完美的缩放比例，因此请确保禁用keepAspectRatio：
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 20" preserveAspectRatio="none">
最后，摆脱width和height属性，并在CSS中对其进行定义，如下所示：
答案 1 :(得分：0)
我已经弄清楚了。最后！有一个简单的方法可以做到这一点。像这样：
<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>
问题是，当您从Illustrator导出图像时（很多），画板不包含在导出的SVG中。路径没有任何计算依据。
在我的情况下，图像的最大高度为100px，我需要根据这些图像的宽度和高度来确定CSS样式。在CSS中，我使用vw单位，或者如果SVG要填充块空间，则使用普通的100%单位。这样可以很好地扩展。这样一来，您就不会在CSS中设置宽度和高度以确保其正确显示。
我浏览了每个徽标，并将高度设置为100px，然后根据宽高比自动计算宽度。然后，我将画板贴到徽标上，以删除所有未使用的空间。
我选择了一个矩形，并关闭了填充和描边功能，并确保它与画板尺寸完全相同。将此空白对象放在后面。现在，当导出时，路径将具有进行计算的基础。
要在代码中执行此操作，您似乎可以将路径包裹在rect中并设置其宽度和高度，然后可以将viewBox设置为相同（保持相同的宽高比） 。如上例所示。我尚未实际测试过，但我会进行测试和更新。