Illustrator svg с изображением снимка экрана, большой размер файла

Illustrator и SVG обеспечивают качество и четкость только в том случае, если вы создаете документы с векторными фигурами, но храните в них растровые изображения.

Векторы похожи на рецепт, который можно увеличивать или уменьшать, чтобы накормить 2 или 200 человек, в то время как растровое изображение похоже на телевизионный обед на 1. Он никогда не накормит 200 человек. Вы не можете повысить его качество сверх того, что уже заморожено в нем.

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

Лучший способ улучшить представление растровых изображений — использовать HTML-редактор, а не Illustrator, и поместить растровые изображения PNG на HTML-страницу. Затем добавьте границы или другие атрибуты презентации к своим изображениям с помощью правил CSS.

Если вы хотите сделать презентацию максимально качественной, не используйте скриншоты. Вместо этого используйте инструмент, который может преобразовать веб-представление в растровое изображение с соотношением пикселей 1:1 (стандартное) и 2:1 (Retina). Тогда ваши изображения в формате PNG будут отображаться с гораздо более высоким качеством на дисплее Retina (при условии, что ваша работа готова к Retina, что и должно быть). Например, на Mac есть приложение под названием «Слои страницы» (доступно в Mac App Store), которое , с заданным URL-адресом, может полностью захватить веб-рендеринг этого URL-адреса в масштабе 1:1 или 2:1 и предоставить вам либо плоский PNG, либо многослойный документ Photoshop, где каждый элемент вашей работы находится на другом слое. Если вы не используете Mac, поищите подобный инструмент на своей платформе. Затем эти растровые снимки вашей работы можно превратить в портфолио с поддержкой Retina для просмотра в любом HTML-редакторе.

Тем не менее, следует учитывать одну вещь: показывать реальную веб-работу, а не изображения работы. Если работа предназначена для Интернета, то лучший способ представить ее — использовать веб-элементы. Таким образом, вместо того, чтобы создавать HTML-страницу с изображением таблицы, вы должны поместить настоящую таблицу. Вы можете преобразовать стили во встроенные стили с помощью инструмента, а затем просто скопировать/вставить HTML-пример своей работы в HTML-портфолио своей работы. Или вы можете использовать фреймы, чтобы показать реальную онлайн-работу в вашем портфолио без какой-либо конвертации.

Проблема в том, что SVG является текстовым форматом, и поэтому все изображения (афаик) встраиваются через строку base64. Обычно это довольно много.

Что вы можете сделать, так это попытаться максимально оптимизировать PNG (уменьшив цвета и т. Д.) С помощью инструмента, прежде чем помещать его в иллюстратор, и надеяться, что он не отменит все это.

Двоичные форматы (или, по крайней мере, сжатые форматы), вероятно, будут лучше, но нет гарантии, что вы получите файлы крошечного размера.

Проблем может быть несколько:

Сохраняемый PNG может иметь прозрачность, также называемую альфа-каналом. Если он смешивается с другими объектами или Illustrator считает, что это возможно, это может привести к увеличению размера файла. РЕШЕНИЕ: Убедитесь, что PNG не имеет прозрачности или, что еще лучше, сохраните как JPEG, у которого не может быть прозрачности.

В любом случае вы можете сохранить в формате jpeg, поскольку размеры файлов обычно меньше, чем png (поскольку он использует сжатие с потерями). Сохраняйте с высоким качеством (8 или 10), чтобы избежать артефактов сжатия.

Еще одна вещь может заключаться в том, что у вас установлен флажок «Сохранить возможности редактирования Illustrator», что может увеличить размер файла. Вам это нужно для редактирования в иллюстраторе, очевидно, но не для экспорта в Интернет.

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

Наконец, вы можете использовать настоящую векторную графику вместо снимка экрана. Вы можете сделать это, сохранив диаграмму в формате PDF, обычно это делается путем ее печати в файл PDF. Затем вы можете импортировать PDF в Illustrator, очистить его и сохранить векторную графику в формате svg. Я бы не рекомендовал это, поскольку PDF-файл может быть трудно очистить, и со всеми этими деталями размер файла может быть больше, чем снимок экрана.

Как уже указывал Джереми С., одним из способов является создание PDF-файла веб-сайта. Вот быстрый совет по конвертации веб-сайтов в PDF с помощью Paparazzi! и Эскиз .

• Трехэтапное руководство по преобразованию любой веб-страницы в Sketch | Взлом пользовательского интерфейса
  • Запустите Paparazzi, затем введите URL-адрес любого веб-сайта в адресную строку и нажмите «Ввод».
  • Подождите, пока загрузится снимок экрана, затем запустите Sketch и перетащите снимок экрана в любой открытый документ Sketch.
  • В Sketch — отфильтруйте панель слоев по слову «clip», затем выберите все слои и нажмите клавишу «Backspace» на клавиатуре, чтобы удалить все эти слои. (Это маски, которые не позволяют вам выбирать элементы в документе).

Затем вы можете экспортировать в PDF (или SVG) и продолжить редактирование в Illustrator. Это мой предпочтительный рабочий процесс для редизайна веб-сайта, когда мне приходится работать с множеством существующих элементов, которые необходимо реорганизовать.

Также папарацци захватывает всю высоту страницы, что обычно сложно сделать через обычные диалоги печати браузера.