Проблемы с экспортом ресурсов SVG из Illustrator

Мой рабочий процесс обычно выглядит следующим образом: создайте значок в Illustrator, вставьте значок и измените его размер для дизайна. Поскольку нашей команде разработчиков нужны SVG-иконки, а не только типичные ресурсы 1x, 2x, 3x, мне нужно создать монтажную область и экспортировать их.

Я получил свой значок из Illustrator, а затем вставил ресурс в Photoshop в качестве смарт-объекта, который будет использоваться, и поэтому, хотя я изменяю размер значка, чтобы он подходил и хорошо смотрелся с другими значками вокруг него, он больше не исходный размер при первой вставке. из иллюстратора.

Во-первых, мне нужно экспортировать активы в фиксированных отдельных артбордах 64x64 в Illustrator как SVG, что я и сделал. Размер всех этих ресурсов соответствует размеру холста монтажной области 64x64. Когда разработчики используют эти SVG, которые я предоставил, некоторые ресурсы получаются слишком большими.

Я зашел в свой PSD, где значки имеют правильный размер при просмотре, но понял, что, поскольку я изменил их размер, % W и H различаются для всех значков в моем PSD. (Некоторые из них составляют 40% исходного вставленного актива, некоторые — 35%).

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

Итак, мой вопрос: как правильно экспортировать значок SVG? А также, есть ли способ для дизайнеров просматривать ресурс SVG, а не версию дизайна PNG на телефоне)?

Все активы в приложении используют заданный холст монтажной области, поэтому я не могу индивидуально создавать монтажные области разных размеров.

Спасибо.

Привет, Хелен, просто хотел уточнить, экспортируются ли файлы значков в формате png или файлы svg при просмотре на мобильном устройстве? Если вы используете значки SVG, почему вы сохраняете их в формате PNG?
@AndrewH Привет, Эндрю, я экспортирую SVG из иллюстратора для команды разработчиков, но я просто сохраняю свой дизайн из Photoshop в формате PNG, чтобы просмотреть его на своем устройстве. Значки в моем PSD выглядят идеально, но я не знаю, как экспортировать SVG, чтобы они выглядели так. Мне просто любопытно узнать, есть ли у меня способ проверить SVG самостоятельно, прежде чем отправлять его команде разработчиков и тратить их время, и каков правильный процесс экспорта значков SVG из иллюстратора (если мне действительно нужно вручную изменить размер их в фотошопе) есть. Спасибо!
Я весьма озадачен. Если бы я не был модом, я бы проголосовал, чтобы закрыть это как неясное. Я вообще не понимаю, как Photoshop подходит к этому вопросу. Вы можете экспортировать как SVG, так и PNG из Illustrator. Кажется совершенно ненужным шагом, который также вызывает у вас проблемы.
@Ryan Мои извинения, я пытаюсь сформулировать это лучше. Моя проблема в том, что я использую SVG, скопированный из Illustrator, в свой PSD, и мне нужно экспортировать тот же актив Illustrator в фиксированный размер монтажной области. Поскольку монтажная область имеет размер 64x64, а мои активы в Photoshop отличаются, я хочу знать, как правильно экспортировать активы, чтобы они были точно такими же, как в Photoshop.

Ответы (1)

Вы можете сделать файл SVG любого размера с помощью CSS. Если вы добавили класс в SVG

HTML

<img class="icon" src="my-svg-file.svg">

CSS

.icon {
   width: 50px;
}

Теперь значок будет шириной 50 пикселей.

Это довольно подробное руководство CSS Tricks — Using SVG .

Важно помнить

Обратите внимание, что монтажная область обрезана прямо по краям дизайна. Холст имеет такое же значение в SVG, как и в PNG или JPG. - CSS-трюки

Вот рабочий пример из статьи CSS Tricks . Вы увидите, как один и тот же SVG используется в CSS для получения 3 разных размеров.

Вы также можете просмотреть вывод SVG в Интернете. В Illustrator для этого есть диалоговое окно. Как только вы закончите со своей иконкой, перейдите в файл — сохраните как и сохраните как SVG. Появится диалоговое окно.

Параметры иллюстратора SVG

Щелкните значок мира, чтобы просмотреть SVG в браузере.

Привет, Эндрю, спасибо, но я не думаю, что это то, что я ищу. Если мне приходится использовать монтажные области 64x64 для всех значков, а все значки создаются в иллюстраторе для изменения размера в Photoshop с моим дизайном, как мне стандартизировать этот процесс и убедиться, что все мои значки одинакового размера и размещены прямо в SVG, чтобы их можно было использовать? экспортируется? Я хотел бы сделать его последовательным и просто использовать один файл, чтобы все мои значки в иллюстраторе были ТОЧНО того же размера, что и значки при вставке в Photoshop, но поскольку мне говорят растянуть значки на доске 64x64, я запутался, как на то, что я могу сделать сейчас.
@Helen Вы можете сделать это. В Illustrator создайте артборд размером 64х64. Создайте свою графику и увеличьте ее размер до края монтажной области. После того, как вы экспортируете SVG, разработчики будут использовать CSS для изменения размера SVG до 64 пикселей.
спасибо, что вернулись ко мне. Мне сказали изменить размер значков таким образом (круг, будет постоянный зазор вокруг него, а не до края монтажной области, более широкие/высокие объекты будут касаться краев). Я просто сбит с толку, если все мои активы имеют разные размеры и не должны быть 64x64, как разработчик узнает, как изменить размер этих активов, если они касаются края? Кроме того, когда я экспортировал свой ресурс в формате SVG на холст 64x64 и щелкнул SVG для предварительного просмотра, холст не имеет размера 64x64.
@Helen Это потому, что вам нужно указать размер SVG в коде SVG. Посмотрите этот пример, который я только что сделал jsfiddle.net/msn4vdtr . Вы можете указать размер SVG inline width="64" height="64" или использовать CSS, как я написал в ответе выше.
Проблемы с экспортом ресурсов SVG из Illustrator
СпросиСетьПолитика конфиденциальности1y, 0v