У мене є файл SVG з viewBox = "- 155.7 -99 510 510". Я вважаю, що це компенсує шляхи в попередньому перегляді Mac OS X на -155,7 -99. коли я відкриваю SVG в Illustrator, контури взагалі не зміщуються. як я експортую цей svg таким чином:
Я спробував змінити позицію монтажної області, але походження вікна вікна ніколи не дорівнює 0,0.
Відповіді:
Я трохи провів дослідження SVG, і, мабуть, вікно перегляду не є елементом, який можна експортувати через Illustrator. Елемент viewbox сумісний лише з певними програмами, які вирішили використовувати цей елемент або маніпулювати ним. На жаль, Illustrator не один із них.
Якщо ви зберегли SVG з Illustrator без "Зберегти можливості редагування ілюстратора", ви можете змінити процес. Незалежні зміни, внесені у дані файлу SVG, будуть відображені в Illustrator, але шляхом перестановки та зміни розміру як «Artboard», так і «Layers», щоб створити вікно перегляду псевдо.
На даний момент все, що ви можете зробити, - це проектні роботи в Illustrator та весь додатковий код для зміщення та розміщення вікна перегляду у файлових даних. Ви можете створити поле псевдо-огляду, просто змінивши положення Ширина модних панелей + Висота / Х + Y, а потім змінивши також атрибути Розмір і Позиція об'єктів. Але справжній атрибут viewbox ніколи не буде, якщо вони не випустять оновлення для Illustrator з редагованими функціями viewbox.
Деякі читання у форматі SVG у Illustrator: Adobe Illustrator Зберегти у форматі SVG
Я кілька разів стикався з цією проблемою, і єдине, що коли-небудь працювало для мене, щоб надійно скинути вікно SVG точно до 0, 0 при експорті з Illustrator - це створити новий порожній документ і скопіювати та вставити в нього ілюстрацію. .
У верхньому лівому куті цього недоторканого аркуша за замовчуванням буде експортовано як 0, 0 вікна перегляду. Скористайтеся розумними путівниками ( cmd-u) або встановленим alignвікном, Align to Artboardякщо вам потрібні твори мистецтва, щоб почати рівно 0, 0.
Ви можете безпечно змінити розмір аркуша в правому нижньому куті, але все почне йти не так, якщо перемістити верхній лівий кут. Переміщення верхнього лівого кута архівних майданчиків або імпорт файлів SVG до AI, здається, спричиняє якийсь дивний внутрішній розрив між лінійками, аркушами та якоюсь невидимою початковою точкою секретного огляду, відомою лише Illustrator.
AFAICT, як і більшість справ, що стосуються Інтернету чи нових технологій, підхід Adobe до SVG полягає в тому, щоб кинути щось брутально разом, щоб вони могли похвалитися цим у прес-релізі, а потім залишити його глючним, незавершеним і нелюбимим, роблячи вигляд, що це не так існують і продовжують так, як це був 1998 рік.
viewboxщо змінюються при експорті до SVG. Ви абсолютно правильні у створенні нового документа та копіюванні всіх творів мистецтва. Ваша відповідь має бути позначена як правильна +1.
Preserve Illustrator Editing Capabilitiesперший час, коли я зберігаю, на випадок, якщо мені доведеться зробити більше коригувань, а потім, коли я думаю, що все досить добре, я зберігаю його без нього (збільшення розміру файлу є досить значним, тому ви хочете зробити це)
Я знаю, що це дуже пізно до теми, але у мене був цей самий випуск і я зробив наступне.
Сподіваюсь, це допомагає комусь іншому.
width="<W>" height="<H>"у вашому улюбленому текстовому редакторі до тегу SVG також допомагає (де <W>та <H>десяткові числа).
У мене була дуже схожа проблема з тим, що мій створений AI SVG не був зосереджений і розширений до повного вікна браузера, тому що AI продовжує змінювати розмір аркуша і забуває про центрування.
Єдиний спосіб виправити це - зробити останній крок ручної обробки в Inkscape.
Нарешті, вам потрібно знову зберегти SVG, але використовувати формат "Оптимізований SVG" у діалоговому вікні "Зберегти як". Буде діалогове вікно для параметрів SVG, і ви повинні ввімкнути "Увімкнути перегляд вікон".
Оскільки всі мої SVG - це значки однакового розміру, цей крок обробки займає лише 1 хвилину, оскільки у мене завжди однакове полотно та розмір об'єкта. Але так, прикро, що цей крок взагалі потрібен і його слід фіксувати в ШІ.
Я зрозумів це. Нарешті! Існує простий спосіб зробити це. Так:
<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і дозволити автоматичній обчисленні ширини на основі співвідношення сторін. Потім я вставляю аркуш до логотипу, щоб видалити невикористаний простір.
Я вибрав прямокутник і повернув заливку та обведення, і я впевнився, що це точно такий же розмір, як і обкладинка. Помістіть цей порожній предмет іззаду. Тепер, коли ви експортуєте шлях, буде база для роботи над розрахунками.
Для цього в коді з'являється, ви можете обернути контури в a rectі встановити його ширину і висоту, а потім ви можете встановити viewBoxтой самий (зберегти співвідношення сторін однаковим). Як показано в прикладі вище. Я насправді цього не перевіряв, але тестую та оновлюю.
Мені вдалося виправити це за допомогою Inkscape . Схоже, Illustrator має слабку підтримку файлів SVG.
