Как открыть svg в coreldraw

Обновлено: 07.07.2024

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

В чем работать с векторной графикой?

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

Подробонее про графические пакеты и js-библиотеки:

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

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

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

3. Оптимизируем вектор в иллюстраторе

Сливаем массу слоев в минимальное количество, убирая группы. Взаимосвязанные слои, представляющие собой единый объект, стремимся склеить, а при необходимости - вырезать друг из друга.

4. Сохраняем: File / Save As

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

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!

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

6. Иконка планеты

Открывает SVG файл для просмотра в браузере установленном основным по умолчанию.

7. На выходе получаем SVG или SVGZ файл

Формат:	Без оптимизации векторной формы в иллюстраторе *	С учетом оптимизации векторной формы в иллюстраторе *
SVG	36 813 bytes	35 941 bytes
SVGZ	15 310 bytes	15 214 bytes

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

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

Как открыть, редактировать и конвертировать файлы SVG

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

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

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

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

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

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

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

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

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

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

Как конвертировать файл SVG

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

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

9 отличных программ для преобразования изображений в другие форматы

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

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

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

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

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

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

Рис. 1. Фрагмент SVG-файла вместе
с соответствующим ему изображением

Технология SVG позволяет объединить в одном формате текст, графику, анимацию и интерактивные компоненты и базируется на трех типах графических изображений: векторных формах, рисунках и тексте. Формы, как это принято в векторной графике, представлены либо прямолинейными и криволинейными контурами, либо графическими примитивами (прямоугольниками, эллипсами и др.), а рисунки представляют собой импортированные растровые изображения. Помимо этого формат SVG поддерживает различные виды анимационных (напоминающих GIF- и flash-анимацию) и интерактивных объектов, таких как ролловеры, карты ссылок и прочие элементы навигации. А поскольку данный стандарт основан на языке XML, то SVG-файл наряду с элементами, предназначенными для визуального отображения, может содержать также различные метаданные.

Плюсы и минусы применения формата SVG

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

Но дело не только в этом. По сравнению с традиционными вариантами графического представления Сети применение SVG-формата имеет немало других неоспоримых преимуществ.

Так, для разработчиков важными плюсами являются:

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

Рис. 2. Просмотр SVG-графики при разном масштабировании

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

Плагины для просмотра SVG-графики

Adobe SVG Viewer

Разработчик: Adobe Systems, Inc.

Размер дистрибутива: 2,25 Мбайт

Цена: бесплатно

Работа под управлением: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

Поддержка браузеров: Internet Explorer версии 4.0 и выше, Netscape Navigator или Communicator версий от 4.5 до 4.78 (за исключением версий 6.x)

Corel SVG Viewer

Разработчик: Corel Corp

Размер дистрибутива: 4,9 Мбайт

Цена: бесплатно

Работа под управлением: Windows 98/NT/2000/Me/XP

Поддержка браузеров: Microsoft Internet Explorer 5.5 и выше, Netscape Navigator или Communicator версий 4.79, 7.02

Программы для создания SVG-графики

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

Полнофункциональные графические приложения, позволяющие создавать SVG-графику

Adobe Illustrator CS2

Разработчик: Adobe Systems, Inc.

Цена: 665 долл.

Работа под управлением: Windows 2000 с Service Pack 3 или Windows XP, Mac OS X версий от 10.2.4 до 10.2.7, Java Runtime Environment 1.4.1

Начиная с 9-й версии в Adobe Illustrator (рис. 3) реализованы импорт и экспорт SVG-файлов, причем на гораздо более высоком в сравнении с аналогичными графическими приложениями уровне. Пакет поддерживает все существующие SVG-спецификации, кодировки ISO 8859-1, UTF-8 и UTF-16, различные варианты экспорта текста и позволяет экспортировать изображения как в обычном формате SVG, так и в сжатом SVGZ.

Рис. 3. Создание интерактивного SVG-элемента в Adobe Illustrator

CorelDRAW Graphics Suite 12

Разработчик: Corel Corp.

Размер дистрибутива: 200 Мбайт

Работа под управлением: Windows NT/2000/XP

Известное приложение для разработки профессиональной векторной графики CorelDRAW (рис. 4), входящее в состав пакета CorelDRAW Graphics Suite 12, обеспечивает импорт и экспорт в форматах SVG и SVGZ на базовом уровне, а следовательно, может использоваться для создания статичной и интерактивной SVG-графики.

Рис. 4. Экспорт векторного изображения
в SVG-файл в CorelDRAW

В приложении реализована поддержка нераспознанных данных, атрибутов и метаданных, а также предусмотрена возможность предварительного просмотра SVG-файлов в браузере перед экспортом. Кроме того, возможна кодировка Unicode для методов кодирования UTF-8 и UTF-16 и различные варианты экспорта текста и bitmap-изображений. В последней версии значительно улучшена поддержка экспорта символов, текста, теней, контуров, слоев, внедренных двоичных изображений и пр.

Mayura Draw 4.3

Разработчик: Mayura Software

Размер дистрибутива: 1,3 Мбайт

Цена: 39 долл.

Работа под управлением: Windows 95/98/Me/NT/2000/XP

Рис. 5. Интерфейс программы Mayura Draw

Специализированные пакеты для создания SVG-графики

EvolGrafiX XStudio 6.1

Разработчик: EvolGrafiX

Размер дистрибутива: 7,25 Мбайт

Работа под управлением: Windows 2000/XP

Профессиональный пакет XStudio (рис. 6) представляет собой удобный инструмент для создания разноплановой SVG-графики для Сети и мобильных устройств и обеспечивает полный контроль как над SVG-проектом в целом, так и над векторными изображениями, анимацией, скриптами и пр. Приложение отличается удобным, интуитивно понятным и легко настраиваемым пользовательским интерфейсом, предоставляет широкий набор инструментальных средств, имеет высокую скорость работы, позволяет создавать SVG-графику всех существующих спецификаций и поддерживает все стилевые оформления Scalable Vector Graphics. Все это в сочетании с относительно невысокой для профессионального пакета ценой позволяет считать его лучшим профессиональным решением подобного плана. Пакет XStudio поставляется с подробной документацией, дополненной серией уроков, и прост в освоении.

Рис. 6. Совмещение визуального создания изображения с правкой исходного кода
в EvolGrafiX XStudio

Inkscape

Размер дистрибутива: 8,7 Мбайт

Цена: бесплатно

Работа под управлением: Windows 9x/NT/2000/XP, Mac OS X, Linux

Рис. 7. Правка исходного кода в окне
встроенного редактора Inkscape

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

Corel WebDraw

Разработчик: Corel Corp

Размер дистрибутива: 15,6 Мбайт

Работа под управлением: Windows 98/NT4/2000/Me/XP

Рис. 8. Интерфейс программы WebDraw

WebDraw оснащен универсальной линейкой раскадровки анимации Animation Timeline, которая построена на базе объектной модели SVG DOM (Document Object Model), что позволяет выбирать и анимировать практически любой атрибут или свойство объекта всех типов в любое время. Механизм перетаскивания позволяет редактировать непосредственно в монтажной линейке начальную и конечную точки анимации, а также продолжительность каждой фазы анимации. Поскольку ключевые точки анимации (keytime) вставляются каждый раз при установке параметров анимации для атрибута или свойства объекта, их можно переносить на другие участки раскадровки в целях автоматической настройки распределения эффектов анимации во времени.

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

Sketsa SVG Editor 3.2.3

Разработчик: KIYUT

Размер дистрибутива: 5,99 Мбайт

Цена: 49 долл.

Приложение Sketsa (рис. 9) относится к самым популярным из SVG-редакторов и позволяет создавать профессиональную SVG-графику, в том числе с оптимизацией в формате SVGZ. Пакет удачно сочетает в себе простоту и удобство работы с широким перечнем возможностей и совместим с Windows-, Mac- и Linux-системами.

Рис. 9. Визуальное редактирование изображения в Sketsa

Sketsa поддерживает классический набор характерных для любого векторного приложения инструментальных средств, позволяющих создавать и трансформировать любые векторные объекты на основе как контуров, так и графических примитивов и текста, которые при желании несложно дополнить растровыми изображениями. Возможно управление прозрачностью, использование градиентных заливок и фильтров. Все это удачно дополнено специализированными SVG-возможностями, благодаря которым любое изображение можно редактировать не только визуально, но и в текстовом режиме. Для редактирования SVG-кода в пакете предусмотрен встроенный текстовый редактор XML. В целях удобства управления объектами имеется встроенная инструментальная панель Document Object Model (DOM), представляющая собой иерархический древовидный набор объектов в документе SVG, что позволяет выбрать любой объект документа для редактирования его свойств.

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