Файлы svg имеют одинаковую ширину и не имеют окна просмотра, но оба выглядят разного размера.

Эти 2 изображения 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>

Почему это?

Почему голосование "против" - это настоящий вопрос, его легко понять, а XML - это код?

BugHunterUK 10.08.2018 15:57

не мне, приятель, не мне

ibrahim tanyalcin 10.08.2018 15:58
0
2
177
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если вы внимательно посмотрите, то поймете, что у них одинаковый 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/

РЕШЕНИЕ:

отрегулируйте атрибут viewBox на фигуре Xbox, чтобы пути хорошо заполняли его, вы можете не получить идеальный масштаб, поэтому обязательно отключите preserveAspectRatio:

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

Наконец, избавьтесь от атрибутов ширины и высоты и определите их в CSS, как здесь:

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

Ах я вижу. Я не знал об этом. Думаю, я собираюсь взять SVG Essentials. Итак, что мне нужно сделать, чтобы эти изображения были одинакового размера / пропорции?

BugHunterUK 10.08.2018 15:58

Подожди, я пытаюсь это сделать

ibrahim tanyalcin 10.08.2018 15:58

Вот и ты, посмотри на скрипку

ibrahim tanyalcin 10.08.2018 16:03

Как вы получили эти ценности? Есть формула или просто бездельничать, пока не получится?

BugHunterUK 10.08.2018 16:07

Вы можете вызвать getBBox для элементов пути, чтобы увидеть границы. Затем вы можете объединить прямоугольники, чтобы найти прямоугольник с минимальным объединением и т. д. Затем установите viewBox на этот прямоугольник, для этого вам понадобится js, я сделал это вручную.

ibrahim tanyalcin 10.08.2018 16:19

Решил другим способом, см. Мой ответ. Вы видите какие-нибудь проблемы с этим? Похоже на более чистое решение.

BugHunterUK 10.08.2018 17:15

Я понял это. Наконец! Есть простой способ сделать это. Вот так:

<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 или просто старый добрый 100%, если SVG должен заполнить пространство блока. Это хорошо масштабируется. Таким образом, вам не придется возиться с настройкой ширины и высоты в CSS, чтобы обеспечить правильное отображение.

Я просмотрел каждый логотип, установил высоту на 100px и позволил ширине автоматически вычисляться в зависимости от соотношения сторон. Затем я подгоняю артборд к логотипу, чтобы удалить неиспользуемое пространство.

Я выделил прямоугольник, отключил заливку и обводку и убедился, что он того же размера, что и монтажная область. Поместите этот пустой объект сзади. Теперь, когда вы экспортируете путь, он будет иметь основу для расчетов.

Чтобы сделать это в коде, похоже, вы можете обернуть пути в rect и установить его ширину и высоту, а затем вы можете установить для viewBox то же самое (сохраните пропорции одинаковыми). Как показано в примере выше. Я на самом деле не тестировал это, но я буду тестировать и обновлять.

Это идентично, значение по умолчанию для preserveAspectRatio - «xMidYMid». Браузер автоматически масштабируется в любом случае, если вы устанавливаете только ширину или высоту при условии, что установлен viewBox. Единственная причина, по которой я установил preserveAspectRatio none, - убедиться, что никакая часть svg не выходит за пределы. И это может произойти в зависимости от того, над каким программным обеспечением вы работаете. Смотрите здесь: jsfiddle.net/ibowankenobi/4d968ta0/11

ibrahim tanyalcin 10.08.2018 17:47

Ха! Сегодня я узнал. Спасибо за ваш вклад и помощь в понимании этого.

BugHunterUK 10.08.2018 17:59

Другие вопросы по теме