Как сохранить файл в формате svg

Обновлено: 21.11.2024

Тим Фишер имеет более чем 30-летний опыт работы в сфере технологий. Он пишет о технологиях более двух десятилетий и является вице-президентом и генеральным директором Lifewire.

Райан Периан — сертифицированный ИТ-специалист, обладатель множества сертификатов в области ИТ и более 12 лет опыта работы на должностях поддержки и управления в сфере ИТ.

Что нужно знать

Файл SVG — это файл масштабируемой векторной графики.
Откройте его в любом браузере или графическом редакторе, таком как Photoshop, Illustrator или GIMP.
Преобразование в PNG или JPG с помощью нашего инструмента (ниже) или в другие форматы с помощью графического редактора.

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

Что такое файл SVG?

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

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

Если файл SVG сжат с помощью сжатия GZIP, файл будет заканчиваться расширением .SVGZ и может быть на 50–80 % меньше по размеру.

Другие файлы с расширением .SVG, не относящиеся к графическому формату, могут вместо этого быть файлами сохраненной игры. Такие игры, как Return to Castle Wolfenstein и Grand Theft Auto, сохраняют ход игры в файл SVG.

Как открыть файл SVG

Самый простой и быстрый способ открыть SVG-файл для просмотра (а не для редактирования) – использовать современный веб-браузер, такой как Chrome, Firefox, Edge или Internet Explorer (почти все из них). должен обеспечивать некоторую поддержку рендеринга для формата SVG. Это означает, что вы можете открывать онлайн-файлы SVG без предварительной загрузки.

Если у вас есть уже есть файл SVG на вашем компьютере, веб-браузер также можно использовать в качестве автономного средства просмотра SVG. Откройте эти SVG-файлы с помощью параметра «Открыть» веб-браузера (сочетание клавиш Ctrl+O).

Файлы SVG можно создавать с помощью Adobe Illustrator, поэтому вы можете использовать эту программу для открытия файла. Некоторые другие программы Adobe, поддерживающие файлы SVG (если установлен подключаемый модуль SVG Kit для Adobe CS), включают программы Adobe Photoshop, Photoshop Elements и InDesign. Adobe Animate также работает с файлами SVG.

Некоторые программы сторонних разработчиков, которые могут открывать файлы SVG, включают Microsoft Visio, CorelDRAW, Corel PaintShop Pro и CADSoftTools ABViewer.

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

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

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

Если сама игра не открывает файл SVG, попробуйте редактор сохраненных игр GTA2 или откройте файл SVG в текстовом редакторе, чтобы посмотреть, есть ли там что-то полезное.

Как преобразовать файл SVG

Самый простой способ конвертировать SVG-файл в PNG или JPG, два наиболее распространенных формата изображений, — использовать наш собственный конвертер файлов SVG:

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

Если вам нужно преобразовать его в другой формат, например PDF или GIF, а размер SVG довольно мал, вам поможет сторонний онлайн-инструмент, например Zamzar.

Autotracer — это еще один онлайн-конвертер SVG, который позволяет конвертировать SVG (с вашего устройства или через его URL-адрес) в некоторые другие форматы, такие как EPS, файл Adobe Illustrator (AI), DXF, PDF, SK и т. д.

Если у вас есть файл SVG большего размера, любые программы, упомянутые выше в разделе Как открыть файл SVG, также должны иметь возможность сохранять/экспортировать файл SVG в новый формат.< /p>

Например, если вы используете Inkscape, после открытия/редактирования файла SVG вы можете сохранить его обратно в SVG со всеми внесенными вами изменениями, но также можете сохранить его в другом формате файла, таком как PNG, PDF, DXF, ODG, EPS, TAR, PS, HPGL и многие другие.

Дополнительная информация о файлах SVG

Формат масштабируемой векторной графики был создан в 1999 году и до сих пор разрабатывается консорциумом World Wide Web Consortium (W3C).

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

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

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

Инструменты для создания файлов SVG

Графические редакторы

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

Inkscape бесплатен для использования и может быть достойным вариантом, если у вас нет доступа к Illustrator или Sketch. В Интернете есть подробное руководство по использованию Inkscape. Дополнительную информацию о создании файлов SVG в Adobe Illustrator см. в разделе ниже.

Текстовые редакторы и JavaScript

Вы также можете создавать и редактировать файлы SVG, просто открыв текстовый редактор и создав файлы.

Графика SVG должна начинаться с элемента svg:

Между элементом svg вы можете добавить другие формы или контуры svg, такие как круг, прямоугольник, эллипс или путь.

Для библиотек JavaScript доступно множество других возможностей для управления файлами SVG.

Создание файлов SVG в Adobe Illustrator

Возможно, самый простой способ создать сложные файлы SVG — использовать инструмент, с которым вы, вероятно, уже знакомы: Adobe Illustrator. Хотя уже довольно давно можно создавать файлы SVG в Illustrator, в Illustrator CC 2015 были добавлены и оптимизированы функции SVG. Эти изменения включают в себя различные параметры экспорта, более чистый код SVG и возможность копировать и вставлять файлы SVG в текстовый редактор.

SVG — это собственный формат файлов Adobe Illustrator. Начните с создания иллюстрации. Вот пример морды медведя:

Простая иллюстрация медвежьей морды в Illustrator.

Экспорт файла SVG

Вы можете использовать функцию "Сохранить как" для непосредственного сохранения в формате SVG. Выберите «Файл» > «Сохранить как» в строке меню.

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

В окне сохранения измените Формат на SVG (svg) и нажмите Сохранить.

Измените формат на SVG.

Параметры SVG

После нажатия кнопки «Сохранить» откроется окно параметров SVG. Это окно предлагает множество вариантов для возни. В большинстве случаев подходят параметры по умолчанию.

Профили SVG: оставьте выбранным SVG 1.1
Шрифты. Эти два параметра имеют значение только в том случае, если на графике есть текст. Как правило, вы должны оставить свой тип как SVG вместо того, чтобы преобразовывать его в контуры. Это улучшает доступность. Оставьте эти параметры по умолчанию.
Местоположения изображений. Это имеет значение только в том случае, если ваша графика содержит какие-либо файлы растровых изображений. Как правило, это неприменимо при создании графики для Интернета. Включение растровой графики в формат SVG полностью исключает цель их использования.
Сохранить возможности редактирования Illustrator. Не устанавливайте этот флажок. Вы всегда можете сохранить файл ai для последующего редактирования. Вы также сможете открыть SVG в Illustrator. Флажок Сохранение возможностей редактирования добавит в файл ненужную информацию, что затруднит работу с ним в редакторе и увеличит его размер.

Дополнительные параметры

Эта кнопка предоставляет несколько «расширенных» параметров для вашего SVG-файла.

Свойства CSS. Это повлияет на то, как стилизованные свойства будут записаны в файле SVG. Хотя все четыре варианта будут работать, обычно лучшими вариантами будут либо Элементы стиля, либо Атрибуты стиля. Полное сравнение параметров см. в разделе Демистификация дополнительных параметров Adobe Illustrator для работы с SVG
Включить неиспользуемые графические стили: не устанавливайте флажок.
Десятичные разряды. Это повлияет на точность чисел в вашей графике. Большее количество знаков после запятой приведет к немного большему размеру файла, а использование нескольких знаков после запятой может привести к потере деталей. Имейте в виду, что обычно эффект от этой настройки будет очень тонким.
Выводить меньше элементов: оставьте флажок.
Использовать

Кнопка кода SVG

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

Мы сохраним наше изображение морды медведя, используя параметр «Элементы стиля» в раскрывающемся списке «Свойства CSS». Все остальные параметры установлены по умолчанию.

Измените свойства CSS на элементы стиля.

Это даст нам следующий файл SVG, который мы можем открыть в текстовом редакторе.

Удаление объявления XML и комментариев

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

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

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

Эффективное использование слоев в Illustrator

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

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

Ни один из слоев не имеет имени или группы.

Теперь я дал каждому подслою имя. Каждое из имен будет переведено в атрибут id в нашем файле. Я также организовал слои в логические группы. Каждая группа будет преобразована в элемент g.

Теперь все наши слои имеют имена и логически сгруппированы.

Теперь наш экспортированный файл SVG стал более читабельным и готовым к стилю, если мы захотим.

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

Ресурсы по использованию слоев Illustrator

Как правило, слои работают так же, как и в Photoshop. Ниже приведены некоторые ресурсы:

Установка границ монтажной области

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

В строке меню выберите «Объект» > «Монтажные области» > «Подогнать к границам обложки».

После этого наш файл с медведем выглядит так:

Наша графика после того, как мы подогнали монтажную область к иллюстрации.

Это обзор того, как сделать SVG для Cricut, охватывающий несколько наиболее распространенных вариантов использования.

Начнем с основ...

Что такое файл SVG?

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

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

Почему для вырезания нельзя использовать обычные изображения JPG или PNG?

Большинство цифровых изображений, которые вы видите, представляют собой растровые изображения. Растровые изображения состоят из пикселей (или точек). Файл изображения записывает изображение с информацией о каждом пикселе.

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

К сожалению, лезвие Cricut нуждается в дополнительной информации. Ему нужна информация о направлении (или векторе). Он хочет знать, какой путь выбрать, чтобы сделать разрез.

Файлы SVG — это файлы изображений, которые содержат информацию о направлении или пути к изображению.

Как преобразовать файлы SVG из изображений JPEG или PNG

Так в чем же проблема, почему мы не можем просто преобразовать растровое изображение в векторное изображение?

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

То, что означает хорошая конверсия в разных контекстах, также субъективно.

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

Давайте рассмотрим некоторые из наиболее популярных сценариев.

Как создать SVG — простая аппроксимационная векторизация

Этот первый пример вы могли видеть на разных платформах. Это векторизация фотографий или детализированных изображений. Это, вероятно, наименее применимо к ремеслам Cricut, но это важный основополагающий компонент.

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

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

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

Как создавать файлы SVG для Cricut

Я считаю, что большинство мастеров Cricut хотят делать это только для виниловых проектов. У меня есть подробное руководство по векторизации фотографий в Design Space здесь.

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

На самом деле это один и тот же процесс, который вы использовали бы в обоих сценариях. В обоих этих сценариях векторизацию можно выполнить в Cricut Design Space.

Cricut Design Space имеет некоторые встроенные возможности векторизации. Они не очень хороши, но я считаю, что они охватывают множество вариантов использования для создателей Cricut.

Это упрощенный сценарий преобразования исходного JPEG в SVG в Design Space.

Вы просто загружаете изображение в формате JPEG. Поскольку контраст между цветами высокий, а задняя сторона однородная, в процессе загрузки можно выбрать «Простой».

Затем просто выберите и сотрите фон, щелкнув в любом месте фона. Затем выберите Сохранить как вырезанное изображение.

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

Есть сценарии, когда вы хотите сохранить информацию о пикселях в траекториях вырезания с помощью параметра «Печать и вырезание».

Обрезка фотографии в Cricut Design Space

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

Или, может быть, вы хотите просто импортировать его, а затем обрезать в другой форме. Это процесс, позволяющий сделать и то, и другое.

Чтобы обрезать фотографию в Cricut Design Space, начните с загрузки изображения.

После выбора изображения выберите «сложный», чтобы пространство дизайна знало, что нужно сохранить разрешение изображения.

Затем ничего не делайте на следующей странице, когда вас спросят, что вы хотите сохранить и стереть.

На следующем экране «Сохранить как вырезанное изображение».

Это не так уж плохо. Cricut Design Space просто делает его не очень интуитивным, когда они используют неточные термины, такие как простой, умеренный и сложный.

Если вы заинтересованы в вырезании различных фигур вокруг фотографии, ознакомьтесь с моим полным руководством Cricut Design Space для начинающих здесь.

Как сканировать и вырезать изображения в Cricut Design Space

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

Итак, у моих детей много вещей из "Щенячьего патруля". На самом деле я просто сфотографировал страницу в одной из их книг и использовал функцию печати и вырезания, чтобы сделать кучу наклеек, чтобы развлечь их. Пожалуйста, не делайте скриншоты изображений Щенячьего патруля в Интернете, а затем начинайте продавать футболки с изображением.

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

Как экспортировать дизайны из Cricut

Потратили ли вы полдня на разработку идеальной открытки, которой хотите поделиться со своими друзьями-рукодельницами из Cricut?

А потом вы понимаете, что Cricut на самом деле не позволяет вам экспортировать дизайны, которые вы создаете в приложении.

Ну, у меня есть небольшая хитрость, которой я делюсь со всеми своими людьми. Я включил это краткое руководство в свою библиотеку ресурсов.

Как превратить изображения в вырезанные файлы в Design Space

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

Минусы: имеет ограниченные фактические возможности векторизации и ужасен практически для любого другого варианта использования.

Это более сложный сценарий, чем мои изображения животных ранее, потому что «фон» не является единым непрерывным фрагментом.

Основной предпосылкой превращения изображений в файлы в Design Space является помощь в выборе «фона» и той части, которую вы хотите сохранить. Вы делаете это, вручную помечая «передний план» и «фон».

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

Чтобы преобразовать его в файл SVG в Design Space, необходимо сначала загрузить изображение с помощью инструмента «Загрузить».

Затем выберите файл. С помощью инструмента «Выбрать и стереть» в верхнем левом углу экрана. Затем отметьте фон.

(если вам нужен этот БЕСПЛАТНЫЙ набор графики, вдохновленной Гарри Поттером, она доступна в моей библиотеке ресурсов)

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

Вот что я имею в виду под ограниченными возможностями. Другое специализированное программное обеспечение для обработки изображений имеет больше возможностей для оценки «правильного» пути с ограниченным числом пикселей.

Как превратить более сложные фотографии в виниловые SVG-файлы для Cricut

Если вы заинтересованы в создании этих замысловатых виниловых наклеек, похожих на фотографии, это вполне выполнимо в Cricut Design Space. У меня есть полное руководство о том, как я превратил эту фотографию в вырезанный файл с помощью Cricut Design Space, здесь.

Скажем, вы хотите сделать отдельные вырезки Чейза из Paw Patrol на виниле. Для этого требуется гораздо более точная детальная аппроксимация пути, чем может обработать Cricut Design Space. Вам придется использовать более специальное программное обеспечение за пределами Design Space.

Как создавать файлы SVG для Cricut в Illustrator

Минусы: его не очень легко использовать, есть кривая обучения, и на самом деле он не самый «умный» в поиске пути, а это означает, что потребуется некоторое ручное редактирование.

Возможно, наиболее известным программным обеспечением для создания файлов SVG является Adobe Illustrator.

Функция создания файлов SVG из растровых изображений называется «Трассировка изображения». Вы можете получить доступ к панели инструментов, выбрав «Окно» > «Трассировка изображения».

Я могу написать целую книгу о других функциях редактирования, которые можно использовать после трассировки изображения, поэтому я остановлюсь здесь на Adobe Illustrator. На самом деле у меня есть:

Заинтересованы в создании собственных SVG?

Узнайте, как использовать Inkscape и Adobe Illustrator, из моей серии электронных книг Crafty Designs.

Как создавать файлы SVG в Inkscape

Подходит для... изображений средней сложности, требующих редактирования, и когда вы просто хотите что-то бесплатное.
Минусы: плохо находит путь и ужасно удобен в использовании. Но это бесплатно.

Из всех случаев, когда я использовал Inkscape, я рекомендую его только в одном случае. Это создание архимедовой спирали.

А что?! Зачем мне это вообще нужно?!

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

Тустая круговая спираль называется спиралью Архимеда. Базовый шаблон спирали в Inkscape — это спираль Архимеда. Базовый шаблон спирали в Adobe Illustrator представляет собой логарифмическую спираль. Эти два отличаются скоростью распада. Логарифмическая спираль имеет... логарифмическое затухание, она «раскручивается» намного быстрее.

Спасибо, что побаловали меня этим разглагольствованием…

Вернуться к пути трассировки путей Inkscape. (хе-хе, простите, я не мог удержаться)

Значит, у Inkscape есть применение за пределами спирали Архимеда.

Если вам нужны пошаговые инструкции о том, как векторизовать изображение в Inkscape, ознакомьтесь с моей статьей Inkscape Tutorial.

Если вы действительно хотите изучить это бесплатное программное обеспечение, ознакомьтесь с моей электронной книгой о том, как использовать Inkscape для создания дизайнов Cutting Craft Designs выше.

Лучший платный конвертер SVG — Vector Magic

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

Я использую Vector Magic примерно в 90 % случаев, потому что мне не требуется ручная маркировка с моей стороны и не нужно использовать учебник.

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

Давайте, например, воспользуемся моей графикой, вдохновленной Гарри Поттером. Я сделал скриншот изображения (Ctrl+Alt+PrintScreen).

Я вставил изображение в браузер (Ctrl + v).

Он автоматически начинает векторизацию. Затем я скачиваю.

ВОТ ЭТО. Я использовал 4 клавиши на клавиатуре. С моей стороны потребовалось около 3 секунд работы.

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

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

Бесплатные конвертеры SVG

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

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

Создание собственных файлов SVG

Есть несколько вариантов, если вы хотите создать свои собственные файлы SVG.

Во-первых, нужно приобрести Adobe Illustrator и научиться им пользоваться.

Если вы не намерены начинать вторую карьеру в области графического дизайна, я предлагаю использовать Google Slides. Это бесплатно, доступно в Интернете, поэтому не нужно ничего скачивать. Это бесплатная версия Microsoft PowerPoint для Google.

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

Примечание: есть возможность сохранить Google Slides в формате SVG, но не дайте себя обмануть. Это не настоящий файл SVG. Возможно, если бы у вас было всего несколько простых элементов (например, 1 круг и 1 треугольник), но даже в этом случае сохранение в виде файла SVG ненадежно.

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

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

Экспорт изображения в SVG

Чтобы сохранить обложку в формате SVG, выберите «Файл» > «Экспорт» > «SVG (svg)».

Отметьте «Использовать монтажные области», если хотите экспортировать содержимое монтажных областей в виде отдельных файлов SVG. Нажмите «Экспорт», чтобы открыть диалоговое окно «Параметры SVG».

Примечание. Если флажок «Использовать монтажные области» не установлен, область просмотра файла SVG будет установлена на основе объединенных границ всех объектов в документе.

Экспорт отдельных компонентов

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

Чтобы экспортировать раздел или компонент дизайна в формат SVG, выберите его, а затем выберите «Файл» > «Экспортировать выделенное» > «SVG (svg)».

Введите параметры SVG

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

Выберите «Свернуть», чтобы сгенерировать SVG-код с минимальными идентификаторами, отступами, линиями и пробелами.

Чтобы узнать больше о параметрах SVG, см. SVG.

Примечание. После экспорта кода SVG не открывайте его повторно в Illustrator для дальнейшего редактирования. Вместо этого откройте исходный документ Illustrator (.ai) и снова экспортируйте в SVG.

Читайте также: