Изменить атрибут viewbox в svg, экспортированном иллюстратором

38

У меня есть файл SVG с viewBox = "- 155,7 -99 510 510". Я считаю, что это компенсирует пути в Mac OS X предварительного просмотра на -155,7 -99. когда я открываю SVG в Illustrator, пути вообще не смещены. Как мне экспортировать этот SVG, что:

  1. viewBox = "0 0 510 510"
  2. и все пути сложены из -155,7 -99

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

user1109371
источник

Ответы:

6

Я провел небольшое исследование SVG и, видимо, окно просмотра не является элементом, который можно экспортировать через Illustrator. Элемент viewbox совместим только с определенными программами, которые решили использовать этот элемент или манипулировать им. К сожалению, Illustrator не является одним из них.

Если вы сохранили SVG из Illustrator без «Сохранить возможности редактирования Illustrator», вы можете отменить процесс. Любые изменения, внесенные вами в данные файла SVG, будут отражены в Illustrator, но путем изменения положения и изменения размера артборда и слоев для создания псевдо-окна просмотра.

На данный момент все, что вы можете сделать, это проектные работы в Illustrator и весь дополнительный код для смещения и позиционирования окна просмотра в данных файла. Вы можете создать псевдо-окно просмотра, просто изменив позицию Artboards Width + Height / X + Y, а затем изменив атрибуты объектов Size и Position. Но истинного атрибута viewbox никогда не будет, если они не выпустят обновление для Illustrator с редактируемыми функциями viewbox.

Некоторое чтение по формату SVG в Illustrator: Adobe Illustrator Сохранить в формате SVG

Mindsparks
источник
1
Illustrator действительно экспортирует атрибут viewbox из Illustrator CC (v 17.x).
Джейк Уилсон
33

Я сталкивался с этой проблемой несколько раз, и единственное, что мне когда-либо удавалось надежно сбросить SVG viewbox до точно 0, 0 при экспорте из Illustrator, - это создать новый пустой документ, скопировать и вставить в него иллюстрацию. ,

Верхний левый угол этой нетронутой артборда по умолчанию будет экспортироваться как точка 0, 0 поля просмотра. Используйте smart guides ( cmd-u) или alignокно, установленное на, Align to Artboardесли ваша работа должна начинаться с 0, 0.

Вы можете безопасно изменить размер артборда из нижнего правого угла, но если вы переместите верхний левый угол, все пойдет не так. Перемещение верхнего левого угла монтажных областей или импорт SVG-файлов в AI, кажется, вызывает какое-то странное внутреннее разъединение между линейками, монтажными областями и неким невидимым секретным исходным местом просмотра, известным только Illustrator.


AFAICT, как и большинство других вещей, связанных с сетью или новыми технологиями, подход Adobe к SVG заключался в том, чтобы собрать что-то грубо, чтобы они могли похвастаться этим в пресс-релизе, а затем оставить его глючным, незаконченным и нелюбимым, делая вид, что это не так. существует и продолжает, как будто это 1998 год.

user56reinstatemonica8
источник
1
Это не работает для меня, используя Illustrator CC. Я также попробовал Fit Artboard для Artwork нестандартного размера. Конечный SVG всегда имеет область просмотра с центром.
wprater
1
Странно - определенно может работать в CS6. Должно быть, что-то изменилось между CS6 и CC - кажется странным изменением.
user56reinstatemonica8
1
@ user568458 Это метод, который я тоже использую, не точный, но очень похожий. Любые преобразования в Artboard в Illustrator будут напрямую переводиться в значения, которые viewboxбудут изменены при экспорте в SVG. Вы совершенно правы в создании нового документа и копировании всей иллюстрации. Ваш ответ должен быть помечен как правильный +1.
Терри
2
Adobe была большим сторонником SVG, но именно тогда, когда svg появлялся, они не делали ничего на этом фронте в течение нескольких лет после приобретения Macromedia, потому что они хотели, чтобы flash был успешным.
joojaa
1
Я использую Adobe Illustrator CC 18.1.0 и создаю совершенно новый документ, копирую и вставляю свой svg, а затем, похоже, делает реставрацию. Я также проверяю, проверяю Preserve Illustrator Editing Capabilitiesли я в первый раз, только на тот случай, если мне нужно будет внести дополнительные изменения, а затем, когда я думаю, что все довольно хорошо, я сохраняю это без него (увеличение размера файла довольно значительно, так что вы захотите сделать это)
августа
7

Я знаю, что это очень поздно для темы, но у меня была такая же проблема и сделал следующее.

  1. Откройте SVG в текстовом редакторе и измените атрибут viewBox на 0 0 xy
  2. Сохраните его и снова откройте в Illustrator
  3. Произведение искусства теперь будет располагаться вне артборда - переместите его обратно на 0 0
  4. Сохраните и просмотрите, все должно работать нормально.

Надеюсь, это поможет кому-то еще.

отметка
источник
Привет Марк, добро пожаловать в GDSE и спасибо за ваш ответ. Если у вас есть какие-либо вопросы, обратитесь в справочный центр или позвоните одному из нас в чате, как только ваша репутация станет достаточной (20). Продолжайте вносить свой вклад и наслаждайтесь сайтом!
Зак Соусье
Я также обнаружил, что добавление width="<W>" height="<H>"в ваш любимый текстовый редактор тега SVG также помогает (где <W>и <H>будут десятичные числа).
Jtheletter
4

У меня была очень похожая проблема, что мой созданный ИИ SVG не был отцентрирован и расширен до полного окна браузера, потому что ИИ продолжает изменять размер монтажной области и забывает о центрировании.

Единственный способ исправить это - выполнить последний шаг ручной обработки в Inkscape.

  • откройте SVG в Inkscape
  • изменить размер холста в меню Файл -> Свойства документа
  • измените размер и переместите иллюстрацию, выбрав ее и введя w, h на панели инструментов.

Наконец, вам нужно снова сохранить SVG, но использовать формат «Оптимизированный SVG» в диалоговом окне «Сохранить как». Появится диалоговое окно для параметров SVG, и вы должны включить «Включить viewboxing».

Поскольку все мои SVG-файлы представляют собой значки одинакового размера, этот этап обработки занимает всего 1 минуту, поскольку у меня всегда одинаковый холст и размер объекта. Но да, обидно, что этот шаг вообще нужен и должен быть исправлен в AI.

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

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

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

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

BugHunterUK
источник
0

Мне удалось это исправить с помощью Inkscape . Похоже, Illustrator плохо поддерживает файлы SVG.

  1. Откройте файл SVG в Inkscape CTRL + O
  2. Затем создайте новый файл CTRL + N
  3. CTRL + SHIFT + D Свойства документа и настройте размер артборда. 3
  4. Выберите и скопируйте svg во вновь созданный файл.
  5. Теперь отрегулируйте актив, изменив значения позиции и размера. Как установка положения в качестве источника, а ширина и высота в качестве размера документа. 5
  6. Сохраните новый файл.
Фани Ритвий
источник