Почему размеры SVG слетают, если открыть файл с другого компьютера?

Question

[Тостерянка]

Допустим, есть две иконки - 15х18 и 18х15, я создаю артбоарды 18х18, вставляю иконки, сохраняю в svg, поставив галочку use artboard, т.к. нужно, чтобы обе располагались одинаково посередине. Вроде сохраняет всё как надо. Но открываю иконки с домашнего компьютера - и там иконки с совсем другим размером артбоарда и вообще гигантстких размеров около 1000px.

Answer 1

[Дима Паутов]

Потому что в вашем коде svg не указаны размеры иконки. Поэтому, когда вы её открываете в браузере, она растягивается на всю страницу пропорционально. В этом нет никакой проблемы. Когда она будет вставлена на сайт, то верстальщик спокойно укажет её размеры в css. Но, если вам лично, для каких-то своих нужд нужно сделать её нужных размеров, то просто в коде svg добавьте атрибуты width="18px" и height="18px" или сделайте это в самом илюстраторе

Comments

[Тостерянка]

Да, я понимаю. Тут вопрос уже скорее почему иллюстратор при сохранении не записывает эти атрибуты. Хотя вот с домашнего компа сохранила, и атрибуты width/height есть. Хрень какая-то...

[Дима Паутов]

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

Answer 2

[Максим Тимофеев]

1. ADOBE ILLUSTRATOR - не предназначен для работы с svg. Поэтому чудеса возможны.
2. Без кода svg можно только в магический шар заглянуть, а у нас его нет. Так что хотите ответа - дайте код svg.

Comments

[Тостерянка]

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#DBF5FC;stroke:#149FCF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path id="hairstyle_5_" class="st0" d="M8.4,28c-1.2,0-2.3-0.7-3.2-2.2C2.6,21.4,1.7,13.6,5.8,6.6C6.9,4.7,10,2,13.9,2
	c1.4,0,2.7,0.3,4,1c0.3-0.1,0.6-0.1,0.9-0.1c1.5,0,4.4,0.8,6.2,6.1l0,0c1.2,3.5,3.7,10.7-0.2,15.9c-0.5,0.6-1.9,2.5-4,2.5
	c-0.9,0-1.8-0.3-2.7-1c-0.2-0.1-0.3-0.3-0.3-0.5s0.1-0.4,0.3-0.5c0,0,2.1-1.6,3.1-5.6c0.3-1.3,0.3-4,0.2-6.2h-7.9
	c-0.3,0.9-0.2,0.7-0.3,0.5l-0.7-3.5l-1,4c-0.1,0.3-0.7-0.9-1-1h-2c-0.2,0.8-0.3,3.2-0.1,4.8c0.5,3.3,2.8,6.1,3.4,6.4
	c0.2,0.1,0.3,0.2,0.3,0.4c0.1,0.2,0,0.4-0.1,0.5C11.9,25.8,10.4,28,8.4,28z"/>
</svg>

[Максим Тимофеев]

1. код нормальный
2. дома Вы в чем открываете? Если в illustrator - то странно. Если в браузере, то это совсем другая история и тут нет ничего странного. Добавьте к svg style="wifdth:10px; height:10px;" будет 10px, смените на 100% будет во весь экран, в этом и смысл svg
3. xml:space - надо убирать, это свойство убрали из стандарта и постепенно браузеры уберают его поддержку:
https://developer.mozilla.org/ru/docs/Web/SVG/Attr...