Товаров: 0 (0р.)

Svg как сохранить: Работа с форматом SVG в Illustrator

Содержание

SVG

5. Знакомимся с диалоговым окном сохранения

  • SVG Profiles
    По умолчанию используется SVG 1.1
  • Fonts
    Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
    Type / SVG — Нужен в случае, если в SVG встраивается текст
    Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
  • Options
    Image Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файла
    Image Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
    Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
  • More options
    Трогать для решения наших задач необязательно.
  • SVG Code
    Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

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

Всё дело в том, что в SVG очень четко виден принцип описательной части векторной формы в XML формате. В то же время, код растрового изображения визуальному анализу никак не поддается.

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

Если в файле оказался растровый фрагмент, то его рекомендуется ликвидировать, перерисовав растровый слой в векторе. Это значительно уменьшит размер файла и позволит не потерять качества при масштабировании.

Как извлечь svg как файл с веб-страницы



Я хочу сохранить SVG как файл с этой страницы https://www.lightningdesignsystem.com/icons/ есть ли расширение Chrome или другой способ сделать это?

html svg
Поделиться Источник Vladyslav K     05 мая 2017 в 11:47

10 ответов

  • Хотите извлечь ссылку .js с веб-страницы

    Я хочу извлечь ссылку .js с веб-страницы . Как я могу найти ссылку на страницу javascript из исходного кода веб-страницы. Я хочу получить свой ответ в java году.

  • Как извлечь данные с веб-страницы?

    Я хочу получить текст и данные с веб-страницы. когда загрузка страницы завершается внутри элемента управления веб-браузером, я просто хочу извлечь текст со страницы по идентификатору элемента? пожалуйста, помогите мне, как я могу достичь этого, как html-ловкость & c#. Извините за мой бедный…


86

Когда SVG интегрируется как <svg ...></svg> markup непосредственно на страницу HTML.

  1. Щелкните правой кнопкой мыши на SVG, чтобы проверить его в инструментах разработчика
  2. Найдите корень элемента <svg> и щелкните правой кнопкой мыши на «Copy element»
  3. Перейдите к https://jakearchibald.github.io/svgomg/ и
    «Paste markup»
  4. Загрузите свой оптимизированный файл SVG и наслаждайтесь

Поделиться Em-AK     28 ноября 2019 в 18:34


22

Если я не ошибаюсь, это может быть так же просто, как проверить ( F12 ) значок на странице, чтобы показать путь к исходному файлу .svg, перейти непосредственно к этому пути ( пример), а затем просмотреть исходный код страницы с помощью Control + u . Тогда просто сохраните этот код.

Поделиться mayersdesign     05 мая 2017 в 11:51


19

Вот трехэтапное решение:

  1. Скопируйте фрагмент кода SVG и вставьте его на новую страницу HTML.
  2. Сохраните страницу HTML как (например) «logo.html»,, а затем откройте эту страницу HTML в Chrome, нажав > Файл > Печать > «Save как pdf»
  3. Этот PDF теперь можно открыть в Illustrator — извлечение векторного элемента.

Поделиться Pete Mandy     07 сентября 2018 в 07:35


14

Вы можете скопировать тег HTML svg с веб-сайта, затем вставить код в новый файл html и переименовать расширение в svg. Это сработало для меня. Надеюсь, это вам поможет.

Поделиться Abner Lima     04 сентября 2019 в 19:50


4

Все они зарегистрированы в разделе Элементы в инструментах разработчика Google chromes.

страница

<svg><path xmlns="http://www.w3.org/2000/svg" d="M18.6 6.8l-4.3-2.2a.8.8 0 0 0-.6 0l-4 2-4.1-2a.7.7 0 0 0-.7.1.7.7 0 0 0-.3.6v10.8a.7.7 0 0 0 .4.6l4.3 2.1a.8.8 0 0 0 .6 0l4-2 4 2a.6.6 0 0 0 .3.1.7.7 0 0 0 .4-.1.7.7 0 0 0 .4-.6V7.4a.7.7 0 0 0-.4-.6zm-1.1 1.4v5.7a.4.4 0 0 1-.6.4c-1.2-.4-.3-2.3-1.1-3.3-.7-.9-1.7 0-2.6-1.4-.9-1.4.3-2.5 1.4-3a.5.5 0 0 1 .4 0l2.2 1.1a.5.5 0 0 1 .3.5zm-6.1 8.3a.5.5 0 0 1-.5-.1 1.6 1.6 0 0 1-.6-1.1c0-.7-1.2-.4-1.2-1.9 0-1.2-1.3-1.5-2.5-1.3a.5.5 0 0 1-.5-.5V7.2a.4.4 0 0 1 .6-.4l2.6 1.3a.1.1 0 0 1 .1 0l.1.1c1.1.6.8 1.1.4 1.9-.5.9-.7 0-1.4-.3s-1.5.3-1.2.8.9 0 1.4.4.5 1.2 1.9.8 1.7-.3 2.2.2a1.5 1.5 0 0 1 0 2.2c-.4.4-.6 1.3-.8 1.9a.5.5 0 0 1-.2.3z"/></svg>

Поделиться Chris     05 мая 2017 в 12:04


2

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

ПОЛНЫЙ ПАКЕТ

Поделиться Syfer     05 мая 2017 в 11:59

  • Как извлечь содержимое с веб-страницы с определенными заголовками в bash?

    До сих пор я использую curl вместе w3m и sed чтобы извлечь фрагменты веб-страницы, как <body> ….содержание…. </body> . Я хочу игнорировать все остальные заголовки (например, <a></a> , <div></div> )., за исключением того, что я делаю это прямо сейчас очень…

  • Как извлечь гиперссылки с веб — страницы в javascript

    Как только загрузка веб-страницы завершится и всякий раз, когда курсор будет щелкать/наведен на любую гиперссылку на этой веб-странице, Я хочу извлечь ту конкретную ссылку, на которой находится моя мышь clicked/hover., так что же такое фрагмент кода JavaScript для этого ?


2

Для меня это очень просто просто установите следующий инструмент в chrome server :

svg-граббер

Как только вы окажетесь на веб-странице, щелкните значок расширения рядом с панелью URL, и откроется новая вкладка, показывающая вам все файлы SVG, найденные на этой странице. Вы можете скопировать файл SVG в буфер обмена, загрузить только те немногие файлы, которые вам нужны, или нажать кнопку «Загрузить все SVGs», чтобы добавить их все в сжатый файл и загрузить их.

Для получения более подробной информации проверьте здесь

Надеюсь, это будет полезно.

Поделиться Prabhu Nandan Kumar     06 августа 2019 в 11:37

Поделиться stan     13 августа 2019 в 21:10


0

Я не знаю, правильно ли на это уже ответили или нет. Хорошо. Загрузка файла из источника не является разрешением. Как захватить *.svg из URL.

Я установил дополнение ‘svg-grabber’ в Google Chrome. Это только частично решает мою проблему, так как в Google Chrome нет ярлыка для ‘Back’ одной страницы.

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

Папка в WordPress: …/static/img/icons/

Я добавил надстройку «Вернуться с помощью Backspace» в Chrome, так как мне пришлось нажимать на каждый файл отдельно, как будто это белые значки (которые я сейчас ищу), вы их не увидите. Вы должны нажать на файл. Потом обратно. Это заняло слишком много времени. Сейчас все в порядке. Есть софт для загрузки определенной папки, но я не хочу загружать половину интернета, чтобы просто получить белый .

Когда вы нажимаете на белый значок, открывается новая вкладка, но она вся белая. Затем вы нажимаете на значок svg-grabber в Chrome, и он откроет его в новом окне на черном фоне с кнопкой загрузить все svg.

Поделиться Luke Lozowski     02 февраля 2019 в 20:47


0

1. проверьте страницу с svg вкл.

2. Нажмите на ссылку, которая отображает изображение в полном разрешении.

3. Сделайте CMD/CTRL+S

4. Вы закончили!

Поделиться isXander     28 мая 2020 в 08:49

Похожие вопросы:


Используйте PhantomJS лом, чтобы извлечь D3-created SVG из веб-страницы на локальном webserver

Я пытаюсь извлечь SVG, созданный с помощью D3, с веб-страницы. Поскольку я использую d3.csv для чтения моих данных для изображения, я использую локальный веб-сервер. Я экспериментировал с…


Как извлечь изображение заголовка веб-страницы

Я хочу извлечь изображение заголовка веб-страницы, используя C# в ASP.NET. Я проверил объекты windows и document, но у них нет такого свойства, как title. Таким образом, поиск метода извлечения…


Как извлечь новостной контент с веб-страницы с помощью Boilerpipe?

Мне нужно извлечь основной новостной контент с веб-страницы. Я искал в интернете и нашел api имени Boilerpipe в свободном доступе для этой цели http://boilerpipe-web.appspot.com / но я не…


Хотите извлечь ссылку .js с веб-страницы

Я хочу извлечь ссылку .js с веб-страницы . Как я могу найти ссылку на страницу javascript из исходного кода веб-страницы. Я хочу получить свой ответ в java году.


Как извлечь данные с веб-страницы?

Я хочу получить текст и данные с веб-страницы. когда загрузка страницы завершается внутри элемента управления веб-браузером, я просто хочу извлечь текст со страницы по идентификатору элемента?…


Как извлечь содержимое с веб-страницы с определенными заголовками в bash?

До сих пор я использую curl вместе w3m и sed чтобы извлечь фрагменты веб-страницы, как <body> ….содержание…. </body> . Я хочу игнорировать все остальные заголовки (например,…


Как извлечь гиперссылки с веб — страницы в javascript

Как только загрузка веб-страницы завершится и всякий раз, когда курсор будет щелкать/наведен на любую гиперссылку на этой веб-странице, Я хочу извлечь ту конкретную ссылку, на которой находится моя…


Как скачать файл .svg с этой страницы?

Мне нужно загрузить файл Муниципалитеты в Боснии и Герцеговине (карта) с этой страницы , но я понятия не имею, как его загрузить, т. е. Найти ссылку на изображение на странице. Я нашел…


как загрузить файл excel с веб-страницы aspx

Я пытаюсь извлечь файл excel, хранящийся в байтах, из базы данных с веб-страницы aspx и загрузить и открыть в формате .xls, однако файл загружается как .aspx . Как решить эту проблему? Я пытался:…


Как вывести файл svg с веб-страницы?

<svg class=paint version=1.1 xmlns=http://www.w3.org/2000/svg> <rect class=svgobject x=458 y=165.28750610351562 width=142 height=56 fill=black stroke=black id=154…

Экспорт SVG в PNG в Inkscape

Inkscape по умолчанию использует тип файла .SVG, который обозначает Scalable Vector Graphics. Этот тип файла сохраняет редактируемые объекты и слои, которые вы создаете в своих композициях, что позволяет вам открыть файл позже и продолжить редактирование оригинальных элементов ваших композиций.

Однако во многих случаях вы хотите экспортировать файлы в другой тип файла, такой как PNG, чтобы сделать ваши композиции более доступными или проще открывать на устройстве (для людей, не использующих Inkscape). Вы также можете загрузить свой дизайн на веб-сайт, или ваш принтер может предпочесть файл PNG, а не файл SVG.

PNG означает «переносимая сетевая графика» и «содержит растровое изображение проиндексированных цветов и использует сжатие без потерь, аналогично файлу .GIF, но без ограничений авторских прав. Файлы PNG обычно используются для хранения графики для веб-изображений ». (согласно с FileInfo.com). PNG имеют тенденцию быть немного лучшего качества, чем JPEG, хотя в результате они часто немного больше по размеру файла. PNG также поддерживают графику с прозрачным фоном (тогда как JPEG не поддерживают).

Какой бы ни была причина, по которой вы хотите использовать PNG, Inkscape позволяет вам легко экспортировать в этот тип файла, если вам когда-нибудь понадобится. Вот как.

В этой статье я буду использовать свой Изометрический дизайн телефона, который я создал в недавнем видеоуроке Inkscape, Я скрыл свой фоновый слой на панели слоев (обозначен красной стрелкой на фотографии выше), а также сделал свой холст фоном шахматной доски, чтобы вы могли видеть, где композиция прозрачна (я рекомендую ознакомиться с моим уроком по Как сделать холст Inkscape похожим на артборд Adobe Illustratorгде я перехожу к настройке свойств вашего документа).

1. Экспорт страницы в изображение PNG

Когда все настроено и готово к экспорту, я могу перейти в меню «Файл»> «Экспорт изображения PNG» (красная стрелка на изображении выше).

Это вызовет диалоговое окно «Экспорт изображения PNG» в правой части моего холста (выделено красным на фотографии). Мой первый вариант — выбрать вкладку в разделе «Область экспорта» с четырьмя различными настройками на выбор. Если я хочу экспортировать все, что находится внутри границы моего холста (то есть, по сути, всю композицию), я выберу параметр «Область экспорта страницы» (зеленая стрелка). В этом разделе вы увидите два столбца и три строки с числовыми данными, а также раскрывающийся список для выбора единицы измерения (мое изображение / холст в настоящее время отображается в пикселях).

Первые два значения в верхней части этого раздела — «x0» и «y0» (выделены зеленым цветом выше). Эти значения представляют, где будет находиться нижняя левая граница или угол вашего изображения (другими словами, начальные координаты вашего изображения). Переменная X всегда представляет ширину, а Y всегда представляет высоту. Поскольку мы собираемся экспортировать всю страницу, наше изображение начинается с координат 0 для x и 0 для y.

Следующие значения — «x1» и «y1» (выделены зеленым цветом выше). Эти значения представляют, где будет расположена верхняя правая граница или угол вашего изображения (другими словами, конечные координаты вашего документа). Мой общий размер холста для этой композиции составлял 1920 пикселей на 1080 пикселей, поэтому моя координата x1 — 1920, а моя координата y1 — 1080 (помните, что единицы измерения страницы установлены в пикселях в раскрывающемся списке «Единицы» в этом разделе).

Последние два значения в этом разделе — это Ширина и Высота, и они отражают общий размер моей области экспорта. Моя Ширина отображается как 1920, а Мой Высота — 1080, потому что это размер всего моего холста. Таким образом, PNG при экспорте будет иметь такой же размер, как и мой холст.

Следующий раздел диалогового окна «Экспорт изображения PNG» — это «Размер изображения» (выделено зеленым цветом выше). Этот раздел позволяет вам настроить общую ширину и высоту вашего окончательного размера изображения в зависимости от общего разрешения изображения. Разрешение определяется тем, сколько пикселей или «точек» вы хотите отображать на каждом дюйме вашего изображения (пиксели и точки — это, по сути, одно и то же — они являются наименьшей единицей изображения. Хотя dpi или точек на дюйм, обычно используется при работе с принтерами, так как принтеры создают точки, а пиксели чаще используются при описании изображений, отображаемых на компьютере). Чем больше пикселей или точек вы отобразили в области, тем выше будет разрешение изображения. Однако есть компромисс с более высоким разрешением, поскольку он увеличивает общий размер файла. Вы можете настроить разрешение в поле, обозначенном красной стрелкой на фотографии выше.

Так, например, если я знаю, что мне нужно, чтобы мое изображение имело конечное разрешение 300 dpi (точек на дюйм), я могу установить разрешение, набрав «300» в поле dpi (красная стрелка). Если я нажму клавишу табуляции, вы заметите, что ширина и высота моего изображения внезапно изменятся (выделенная зеленая область). Поскольку я увеличил разрешение с 96 до 300, изображение теперь будет изображением с более высоким разрешением (больше точек отображается на каждом дюйме изображения). В результате мой общий размер изображения теперь намного больше (мои ширина и высота изменились с 1920 × 1080 до 6000 × 3375).

Если, с другой стороны, я уменьшу свое разрешение, набрав «72» в первом поле dpi, вы увидите, что размер моего изображения уменьшится до 1440 × 810. Это потому, что теперь у меня изображение с более низким разрешением, с меньшим количеством точек, отображаемых на каждый дюйм моего изображения.

Я вернусь к значению по умолчанию 96 dpi.

Под разделом «Размер изображения» находится опция, позволяющая задать имя файла, в который вы хотите экспортировать изображение, а также место на вашем компьютере, куда вы хотите его экспортировать (выделено зеленым). Он экспортирует ваш файл в последнее место, которое вы использовали для сохранения любого другого файла в Inkscape, или в любое другое местоположение по умолчанию, которое в настоящее время настроено на вашем Inkscape, если вы еще не сохранили файл.

Чтобы изменить имя файла или место, куда он экспортируется, нажмите кнопку «Экспортировать как» (красная стрелка на фотографии выше).

Здесь вы попадете в свой файловый проводник или окно поиска (в зависимости от того, какую операционную систему вы используете), где вы можете найти на своем компьютере местоположение файла для сохранения. В моем случае я нахожусь на моем диске (D :), в папке с названием «Фотографии» и в другой папке с названием «Inkscape Photos» (вы можете увидеть полное расположение папки в выделенной зеленой области на изображении выше).

Я экспортировал этот файл, прежде чем использовать имя «Phone Isometric Design Gen 3.png», поэтому мое имя файла по умолчанию отображается как это (красная стрелка). Я изменю название на «Изометрический дизайн телефона без фона».

Если я нажму на раскрывающееся меню «Сохранить как тип», «PNG» будет единственным доступным вариантом. Inkscape экспортирует только в PNG. Если вам нужно экспортировать что-то вроде файла JPEG или другого типа файла, вам нужно будет экспортировать свой файл в PNG из Inkscape, а затем открыть другую программу, например GIMP (еще одна потрясающая бесплатная программа, которая у меня есть сотни учебников для) и экспортируйте в любой тип файла, который вы хотите.

Когда я буду готов к экспорту, я нажимаю кнопку «Сохранить».

Но ждать! Вы еще не закончили — есть последний важный шаг, прежде чем ваше изображение будет фактически экспортировано. Вы должны нажать кнопку «Экспорт» с зеленой галочкой, чтобы экспортировать файл (красная стрелка на изображении выше). Если вы не нажмете эту кнопку, ваш файл не будет экспортирован., После того, как я нажал эту кнопку, мой SVG-файл теперь будет экспортирован в PNG-файл.

Примечание: Если вы отметите опцию «Закрыть по завершении» слева от кнопки «Экспорт» (обведена синим цветом на фотографии выше), диалоговое окно «Экспорт изображения PNG» закроется после завершения экспорта.

2. Экспорт чертежа в изображение PNG

В последнем разделе обсуждалась возможность экспорта всей страницы в файл PNG, но что, если вы хотите экспортировать только чертеж на странице, а не пустое пространство вокруг нее?

Что ж, вторая вкладка в разделе «Область экспорта» позволяет вам это сделать. После перехода в меню «Файл»> «Экспорт изображения PNG», чтобы открыть диалоговое окно «Экспорт изображения PNG» (при условии, что оно еще не открыто на предыдущем шаге), вы можете щелкнуть вкладку «Рисунок» в разделе «Область экспорта» (красный стрела).

Эта опция экспортирует только ту область нашего изображения, которая содержит рисунок. Таким образом, в этом случае он будет экспортировать только ту область, в которой находится дизайн телефона. Все пустое пространство между дизайном телефона и границей холста не попадет в окончательный экспортированный PNG. Это отражено в наших значениях координат изображения, которые теперь изменились по сравнению с тем, что они были при настройке «Страница».

Теперь мое значение x0 равно пикселям 317.278, а значение y0 — пикселям 121.273 (выделено зеленым цветом). Это новое место для левого нижнего угла моего изображения (или начальные координаты).

Кроме того, мое значение x1 теперь равно пикселям 1602.722, а значение y1 — 911.076. Это новое место для верхнего правого угла моего изображения (или конечные координаты).

Таким образом, область экспорта моего изображения больше не будет покрывать всю длину моего холста (1920 × 1080 пикселей). Он будет меньше, поскольку избавляется от пустого пространства вокруг рисунка. Это подтверждается новыми значениями ширины и высоты (обведены зеленым). Моя ширина теперь 1285.444, а моя новая высота теперь 789.803 (оба значения в пикселях).

В разделе «Размер изображения» (обведено зеленым на изображении выше) я могу еще раз изменить разрешение моего изображения, которое либо увеличит, либо уменьшит окончательную ширину и высоту экспортируемого PNG. Ширина и высота отображаются как 1285 × 790 пикселей, потому что значения из предыдущего раздела были округлены. Inkscape не может экспортировать доли пикселя, поэтому значения необходимо округлить до ближайшего целого числа.

Когда вы будете готовы экспортировать чертеж, вы можете еще раз щелкнуть опцию «Экспортировать как» (красная стрелка), чтобы изменить имя файла и местоположение (я изменил свое имя файла на «Изометрический рисунок телефона»), затем нажмите кнопку «Экспорт». чтобы экспортировать SVG в PNG (синяя стрелка).

Выше находится окончательный экспортированный чертеж. Если вы выделите фотографию с помощью мыши, вы заметите, что граница изображения заканчивается там, где заканчивается рисунок (примечание: для этой статьи она была несколько уменьшена).

3. Экспортировать выделение в PNG

Помимо экспорта всей композиции и экспорта только чертежа, вы также можете сузить область экспорта до просто выделенной области.

Итак, предположим гипотетически, что я хочу экспортировать только лицевую часть своего телефона. Я могу взять инструмент выделения из своего набора инструментов (красная стрелка на фото выше), затем щелкнуть с зажатой клавишей Shift по всем элементам, которые я хочу выбрать для экспорта (я щелкнул по всем фигурам, составляющим лицевую панель телефона) . Теперь, когда все эти элементы выбраны, вы увидите, что в диалоговом окне «Экспорт изображения PNG» вкладка «Область экспорта» автоматически изменилась на вкладку «Выбор» (зеленая стрелка на фотографии).

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

Я могу еще раз изменить разрешение своего изображения в разделе «Размер изображения» (выделено красным), что увеличит или уменьшит общий размер изображения в зависимости от установленного разрешения.

Я также могу изменить имя своего файла (на этот раз я изменил его на «Изометрическая лицевая сторона телефона») и место, где я хочу сохранить его, используя кнопку «Экспортировать как» в разделе «Имя файла» (обведено синим), затем нажмите «Экспорт» ”, Чтобы экспортировать выделенное в PNG. Здесь также есть несколько других вариантов, о которых стоит упомянуть. Во-первых, я могу «Пакетный экспорт» выбранных мной объектов, то есть каждый объект будет экспортирован как отдельный PNG. Ниже у меня есть опция «Скрыть все, кроме выбранного», что означает, что все, что я не выбрал, не будет отображаться в окончательной композиции. Если я не отмечу эту опцию, элементы, которые я не выбрал, будут по-прежнему отображаться, пока они помещаются в область фрейма, в которую я экспортирую.

Выше показаны два разных результата экспорта выделенного фрагмента — слева результат с отключенной опцией «Скрыть все, кроме выбора», а результат справа с отмеченной опцией.

 

4. Экспортировать пользовательскую область в PNG

В последнем разделе диалогового окна «Экспорт в PNG-изображение» можно экспортировать пользовательскую область композиции. Здесь все те же правила применяются из других настроек (x0 и y0 — ваши начальные координаты, x1 и y1 — ваши конечные координаты, а Width и Height — общий размер вашей композиции).

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

Чтобы продемонстрировать этот параметр в действии, я установлю значения x0 и y0 на 250, а мои значения x1 и y1 на 1250. Это создаст изображение с шириной и высотой 1000 пикселей. Я изменю имя изображения на «Изометрическая настраиваемая область телефона» и нажму «Экспорт».

Моей окончательной композицией будет квадрат пикселей 1000 x 1000 с частями обрезки дизайна, где бы дизайн не находился за пределами области экспорта.

Вот и все для этого урока! Если вам понравилось, вы можете проверить любой из моих других Статьи справки Inkscape, Видеоинструкции по Inkscape или Учебники по GIMP.

Page not found (404)

Toggle navigation
  • Packs
    • Значок пакеты недавно Загрузил
    • Самых популярных значок пакеты
    • Эксклюзивные наборы значков
  • категории
    • Сельское хозяйство Иконки
    • Животные Иконки
    • Аватар и смайлики Иконки
    • Красота и мода Иконки
    • Бизнес и финансы Иконки
    • Мультфильм Иконки
    • Кино, телевидение и фильмы Иконки
    • Одежда и аксессуары Иконки
    • Преступление и безопасность Иконки
    • Культура, религия и фестивали Иконки
    • Дизайн и разработка Иконки
    • Экология, окружающая среда и природа Иконки
    • Электронная торговля и покупки Иконки
    • Электронные устройства и оборудование Иконки
    • Файлы и папки Иконки
    • Флаги и карты Иконки
    • Дизайн и разработка Иконки
    • Экология, окружающая среда и природа Иконки
    • Gym и Fitness Иконки
    • Здравоохранение и медицина Иконки
    • Промышленность и инфраструктура Иконки
    • Инфографика Иконки
    • Дети Иконки
    • люблю Иконки
    • Разное Иконки
    • Музыка и мультимедиа Иконки
    • Сеть и связь Иконки
    • Недвижимость и строительство Иконки
    • Школа и образование Иконки
    • Наука и технологии Иконки
    • SEO и Web Иконки
    • Sign и Symbol Иконки
    • Социальные медиа и логотипы Иконки
    • Спорт и игры Иконки
    • Инструменты, строительство и оборудование Иконки
    • Транспорт и транспортные средства Иконки
    • Путешествия, отели и каникулы Иконки
    • Пользовательский интерфейс и жесты Иконки
    • Погода и сезоны Иконки
  • стили значков
    • 3D Иконки
    • Badge Иконки
    • Filled outline Иконки
    • Flat Иконки
    • Glyph Иконки
    • Handdrawn Иконки
    • Long shadow Иконки
    • Outline Иконки
    • Photorealistic Иконки
  • Популярные поиски
    • Instagram Иконки
    • Vk Иконки
    • телефон Иконки
    • Папки Иконки
    • деньги Иконки
    • Социальные Иконки
    • Facebook Иконки
    • Telegram Иконки
    • Viber Иконки
    • корзина Иконки
    • Whatsapp Иконки
    • стрелка Иконки
    • Youtube Иконки
    • дом Иконки
    • Phone Иконки
    • люди Иконки
    • почта Иконки
    • папки Иконки
    • человек Иконки
    • доставка Иконки
    • галочка Иконки
    • папка Иконки
    • музыка Иконки
    • Mail Иконки
    • компьютер Иконки
    • вк Иконки
    • Steam Иконки
    • Instagram Иконки
    • сайт Иконки
    • фото Иконки
  • Log in
  • Register
404 Icon by Laura Reen

форматы JPG, PNG, PDF, SVG, FIG

В этой инструкции вы узнаете, как сохранять проекты или отдельные части вашей работы в фигме на компьютер в следующих форматах:

  • JPG — самый популярный формат. Подходит для сохранения любых изображений, фотографий, макетов и т.д.
  • PNG — формат подходит для картинок с прозрачным фоном.
  • SVG — векторный формат. Подходит для экспорта иконок, иллюстраций, логотипов и т.д.
  • PDF — если нужно создать какой-либо документ или презентацию.
  • FIG — внутренний формат Figma, для сохранения на компьютер.
  • Массовый экспорт — подойдет, если нужно сохранить сразу много картинок, фото, иконок или других элементов в представленных форматах выше.

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

Быстрая инструкция по экспорту файлов в Фигме

Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.

Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».

Изменение масштаба экспортируемых файлов

Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.

Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.

Сохранить проект или картинку в Figma в формате JPG

Формат JPG — это растровый формат. Элементы сохраняются с расширением «.jpg».

Формат JPG подходит для сохранения:
  • Фото.
  • Картинок.
  • Изображений.
  • Дизайн макетов.
Инструкция по экспорту из Figma в JPG на компьютер:

Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.

Сохранение из фигмы файлов в формате PNG

Видео инструкция по экспорту фото в формате PNG из программы figma.

PNG — это растровый формат изображений. Отличие PNG от JPG состоит в том, что этот формат подходит для сохранения изображений с прозрачным фоном.

Инструкция как сохранять в фигме в PNG на компьютер:

Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.

Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.

Экспорт в формате SVG

SVG — это векторный формат изображений. Векторный формат отличается от растрового, тем, что в нем нет пикселей. Если вы увеличите JPG или PNG, то будет появляться зернистость в виде пикселей. С форматом SVG этого не происходит.

В дальнейшем вы сможете редактировать эти изображения в других графических редакторах, таких как Adobe Illustrator, Inkscape, Affinity Designer, Inscape и других.

Формат SVG подходит, если нужно сохранить:
  • Иконки.
  • Простые фигуры созданные в Figma с помощью инструментов «Shape tools» (прямоугольники, круги, линии, многоугольники)
  • Иллюстрации.
  • Элементы созданные с помощью пера или карандаша в фигме.
Как сохранять в фигме в SVG:

Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.

Как сохранить в Фигме в формате PDF

PDF подходит для экспорта различных документов или презентаций.

Чтобы сохранить элементы из фигмы в формате PDF есть 2 варианта — экспортировать каждый элемент отдельно, либо создать 1 файл с множеством страниц. Рассмотрим каждый из этих вариантов по отдельности.

Экспорт из фигмы в PDF с множеством страниц.

Формат PDF подходит если вы хотите создать:

  • Презентацию.
  • Какой-либо документ в формате A4.
  • Книгу.
  • Брошюру.
  • Маркетинг кит.
  • Коммерческое предложение.

Пошаговая инструкция по созданию PDF файлов:

Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).

  1. Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
  2. Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.

Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта.

Пример созданного PDF файла в Figma
Экспорт в PDF выбранных элементов:

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

Как сохранить проект в Фигме в формате FIG (внутренний формат)

Чтобы сохранить файл во внутреннем формате фигмы с расширением «.fig» сверху нажмите на вкладку «File» и выберите пункт «Save As .fig…».

Импорт файлов в Figma в формате «.fig»

Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.

Массовый экспорт из Figma

Если у многих элементов уже был нажат плюсик экспорта, то можно массово их экспортировать нажав на сочетание горячих 3 клавиш «Ctrl + Shift + E». Появится специальное окно экспорта.

Как называть файлы, чтобы сохранить их в разные папки при экспорте

Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.

Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:

  • 1/Wooman
  • 2/Landing Page
  • 3/Illustration

Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».

Далее поговорим о форматах и для каких элементов они подходят.

Важное дополнение:

Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).

Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»

P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.

Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.

Автор статьи: Владимир Чернышов

Как оптимизировать и экспортировать SVG в Adobe Illustrator

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

Однако, прежде чем мы начнем, вам нужно четко понять одну вещь. Оптимизация файла SVG начинается с его создания и продолжается до экспорта. Как и на любой HTML-странице, после исправления трудно исправить плохо построенный SVG-файл.

Наблюдайте за началом анимации с помощью HTML5 Canvas

Возможно, вы анимировали с помощью CSS, но пробовали ли вы HTML5?

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

Это именно то, что вы узнаете сегодня.

Создание SVG в Illustrator

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

Установите правильное цветовое пространство

Illustrator, как и большинство программ для векторной иллюстрации, изначально был разработан для печатной продукции, поэтому его цветовое пространство по умолчанию установлено в CMYK. RGB гораздо больше подходит для использования в Интернете и на экране и имеет более широкую гамму (диапазон цветов), чем CMYK. Поэтому, когда вы создаете новый документ, убедитесь, что цветовой режим установлен на RGB — как вы можете видеть на изображении ниже.

Дайте вашему рисунку правильную структуру

Файл SVG не похож на обычное растровое изображение — сетку пикселей. Это текстовый документ, имеющий определенную структуру.

Как и HTML-документ, вы можете выбирать отдельные элементы и управлять ими. Для этого вам нужно использовать их имена в качестве справочного материала. Я обнаружил, что всегда проще создавать эти ярлыки во время визуального редактирования в Illustrator, чем позже.

По этой причине важно дать осмысленное имя каждому графическому элементу при его создании. Вот что вам нужно знать при создании графики в Illustrator:

  • Слои Illustrator и имена групп слоев используются в качестве идентификаторов для групп SVG

  • Имена символов Illustrator используются в качестве идентификаторов для символов SVG

  • Имена графических стилей Illustrator используются в качестве классов CSS

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

Упростите ваши формы, когда это возможно

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

Чтобы решить эту проблему, вам нужно использовать как можно меньше точек, чтобы создать нужные фигуры. Это может быть достигнуто несколькими способами.

По возможности используйте основные формы SVG вместо путей SVG

Использование простых элементов, таких как line , rect и circle имеет ряд существенных преимуществ.

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

Во-вторых, простые формы почти всегда приводят к меньшим размерам файлов и меньшему количеству кода, что облегчает их поддержку и редактирование. Вы также можете легче управлять ими с помощью их прямых атрибутов, таких как x , y , cx , cy , вместо координат точек, как это происходит с путями.

Чтобы понять, что я имею в виду, на изображении ниже вы можете увидеть простую круглую форму, определенную один раз как элемент круга SVG и один раз как путь SVG. Хотя они визуализируются одинаково, ясно, что форма SVG меньше и более универсальна. Помните, что некоторые графические редакторы — например, расширение экспорта SVG в Fireworks — автоматически преобразуют фигуры SVG в контуры при экспорте. Очевидно, постарайтесь избежать этого.

Упростите свои пути

Путь — это не что иное, как массив координатных точек. Упростить путь означает вырезать некоторые из его точек, что приведет к уменьшению данных пути и уменьшению размера файла. Для этого вы можете использовать команду Object > Path > Simplify… или Warp Tool . В обоих случаях главное состоит в том, чтобы максимально уменьшить точки пути без потери качества визуального оформления.

На рисунках ниже вы можете видеть, как процесс упрощения Illustrator уменьшает точки пути с 32 до 23, что составляет около 25%, и как это отражается на коде. Данные пути уменьшаются, в то время как визуальное качество все еще остается на хорошем уровне.

Решите, следует ли преобразовывать текст в пути

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

Если точная отрисовка текста важнее, чем редактируемость, например, в логотипе, вы можете преобразовать его в контуры, используя команду «Текст» Type > Create Outlines или установив этот параметр на панели экспорта, как вы увидите позже.

Имейте в виду, что при преобразовании большого количества текста в пути размер файла может резко увеличиться, поэтому тщательно подумайте перед преобразованием.

Используйте «фильтры SVG» вместо эффектов фильтра Illustrator или Photoshop.

Illustrator предлагает набор фильтров SVG , которые применяются в реальном времени в браузере (« Effect > SVG Filters ). В то время как эффекты Illustrator или Photoshop всегда «запекаются» в ваших растровых изображениях, встроенных в SVG, фильтры SVG могут быть изменены или удалены в любое время с помощью нескольких нажатий клавиш.

Вы также можете создавать повторно используемые фильтры и / или редактировать их через диалоговое окно « Применить фильтр SVG ».

Подогнать артборд к рисунку

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

В зависимости от ситуации вы можете использовать команду « Object > Artboards > Fit to Artwork Bounds или « Object > Artboards > Fit to Selected Art

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

Экспорт SVG в Illustrator

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

Примечание. Для тех из вас, кто использует более старую версию Illustrator, здесь есть соответствующее руководство .

Когда ваша графика готова к производству, выберите « Файл»> «Экспорт»> «Экспортировать как…» , затем выберите SVG в качестве параметра для типа файла и нажмите кнопку « Экспорт» . Вы должны увидеть следующую панель:

Давайте рассмотрим варианты, представленные более подробно.

стайлинг

Есть три способа стилизовать ваш SVG, и они представлены в первом выпадающем списке.

  1. Первый заключается в использовании внутреннего CSS (т. <style> Блока <style> ), который обычно считается наилучшим вариантом в соответствии с принципом разделения проблем .
  2. Второй метод заключается в использовании встроенных стилей CSS (т.е. ).
  3. И третий способ заключается в использовании атрибутов представления SVG ,

На изображении ниже вы можете увидеть разницу между этими тремя вариантами.

Шрифт

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

Примечание. Шрифты SVG будут удалены из SVG 2 и считаются устаревшей функцией с удалением поддержки из браузеров.

Картинки

Здесь вы можете выбрать способ обработки любых растровых изображений в SVG. Вы можете сохранить их как внешние файлы или встроить их в SVG как DataURI . Часто Link — это полезный выбор, поскольку он значительно сокращает размер родительского файла SVG и, следовательно, делает его намного более управляемым в редакторе кода.

Тем не менее, опция Embed имеет одно большое преимущество: встроенные изображения никогда не могут быть связаны или отделены от своего «родительского SVG». SVG, использующие связанные ресурсы, покажут значок отсутствующего изображения при первой загрузке, загрузке или перемещении SVG без его «дочерних изображений».

Имейте это в виду, если вам требуется переносимость в SVG.

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

Идентификаторы объектов

Как правило, лучший вариант — выбрать имена слоев , потому что это даст вам значимые имена для ваших отдельных элементов SVG. Minimal использует случайные буквенные числа, а Unique использует большую случайную комбинацию символов.

Десятичная дробь

Эта опция определяет, сколько десятичных знаков будут заполнены вашими координатами после десятичной точки. Более высокие числа означают более точные пути, в то время как наименьшее число дает меньше подробного кода и небольшой размер файла.

Как видно из рисунка ниже, путь с 5 десятичными знаками, если он намного больше, чем тот же путь с 1 десятичным знаком, но визуально идентичен.

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

преуменьшать

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

отзывчивый

Теоретически, эта опция удаляет атрибуты width и height из вашего SVG-документа, что делает его более отзывчивым. Тем не менее, в большинстве случаев этого недостаточно для того, чтобы ваш SVG действительно отвечал всем браузерам и особенно IE. Мы рассмотрим решение этой проблемы в следующем уроке.

СОВЕТ : Всегда полезно сохранить исходный файл .ai качестве исходного, а затем экспортировать копии SVG с другими настройками из этого родительского файла.

Когда вы выбираете команду « Export As… , в появившемся диалоговом окне экспорта вы, возможно, заметили дополнительную опцию, которая называется Use Artboards . Это становится полезным, когда вы используете несколько монтажных областей — например, когда вы создаете набор значков — и хотите, чтобы каждая монтажная область экспортировалась как отдельный файл SVG.

Как вы видели выше, во время создания и экспорта вашей SVG происходит большая оптимизация. Однако вы можете дополнительно оптимизировать файл с помощью какого-либо специализированного инструмента, такого как SVGO или его версия SVGOMG с веб-интерфейсом.

Имейте в виду, что вы должны быть осторожны при использовании этих инструментов. Они могут легко нарушить функциональность вашего документа. Я советую использовать ручную оптимизацию, когда это возможно, и использовать инструмент автоматической оптимизации, только если это необходимо и с осторожностью.

Вывод

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

На горизонте появится SVG 2 с множеством новых мощных функций, которые можно поиграть. Впереди захватывающие времена.

Как экспортировать в Фигме — svgpng.ru

Фигма предусматривает по умолчанию экспорт в несколько форматов: PNG, SVG, JPG, PDF

Как экспортировать

Чтобы экспортировать элементы, выделите их в списке слоев и нажмите на «+» в разделе Export в правом окне инструментов. После этого появится окно с настройками экспорта, в котором вы можете выбрать размер, дополнение к названию  (Suffix) и формат файла. 

Панель экспорта

 

Выбор параметров экспорта

Видео: экспорт в Figma


Тег video не поддерживается вашим браузером

Как экспортировать элементы в один слой

За один слой Figma считает группу или фрейм. Если у вас есть несколько элементов и вы хотите, чтобы они экспортировались как одно изображение (например PNG), объедините их в одну группу (cmnd + G).

Если вы выделите несколько отдельных элементов, они экспортируются как разные файлы

 

Вы можете экспортировать элементы сразу в нескольких расширениях — для этого в разделе Export нажмите еще раз «+» и укажите дополнительные форматы. То есть вы можете выгрузить изображения сразу как svg и png, и в любых других комбинациях. 

Как указать разрешение

В окне разрешения вы можете либо указать кратность — 1X, 2X и т.п. Это значение, на которое будет умножено фактическое разрешение сторон экспортируемой группы/фрейма/элемента. 

Либо вы можете указать ширину стороны — высоты или длины. 512w — означает ширину 512 пикселей, 512h — высоту. Вы можете указывать свои значения, либо выбрать из предустановленных вариантов. 

Презентация

Вы можете демонстрировать результаты своей работы, используя режим презентации. Подробнее об этом читайте в этой статье. 

Экспорт области экрана

Если вам требуется экспортировать только часть вашего проекта (по действию похоже на «Ножницы» в Windows и скриншот части экрана в Mac), воспользуйтесь инструментом Slice. Подробнее читайте здесь. 

Сохранение файла проекта

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

Сохранение SVG с окном просмотра 0 0 в Illustrator

Сохранение SVG с окном просмотра 0 0 в Illustrator
Сеть обмена стеков

Сеть Stack Exchange состоит из 178 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange
  2. 0
  3. +0
  6. Авторизоваться Подписаться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил

Просмотрено 6к раз

У меня проблема с сохранением SVG в их правильном формате в Illustrator.Я хочу сохранить SVG для веб-разработки с окном просмотра как «0 0 100 100». Размеры, ширина 100 и высота, не проблема. Это правильно сохраняет. Но когда я проверяю код, я вижу, что окно просмотра представляет собой полностью случайные числа — это означает, что они не отображаются на веб-странице без редактирования кода.

Я установил оси X и Y на измерениях на 0. Я делаю это, перейдя в «Параметры документа» и «Редактировать монтажную область» и изменив размеры. Окно просмотра по-прежнему предлагает что-то нелепое, например «0.5 765,5 100 100 «.

Кто-нибудь знает, как сделать окно просмотра «0 0 100 100»? Заранее благодарю.

Создан 02 окт.

2

У меня была точно такая же проблема, но проверка «клипа на монтажную область» не работала, а прямая настройка XML нарушила положение моего изображения относительно окна просмотра.Я решил это, наложив фрагмент на границу артборда. После этого файл будет экспортирован в SVG с окном просмотра «0 0 …». Помимо добавления фрагмента, я не сделал ничего, отличного от обычного процесса, просто «Сохранить для Интернета и устройств» с обычными настройками.

Обновление

: я должен был убедиться, что срез был выбран, прежде чем проходить процесс сохранения.