Coreldraw сохранить в svg
Я соглашаюсь на сбор, хранение и обработку моих данных, полученных с помощью этой формы, в соответствии с Политикой конфиденциальности и Условиями использования.
Кликните здесь для выбора файлов
или перетащите файлы в эту область
Векторные форматы представления графики дают дизайнерам и художникам колоссальные возможности, однако наличие множества собственных форматов у различных графических редакторов создает серьезные трудности, возникающие при обмене файлами.
Для вас может стать настоящей проблемой перевести, например, формат SVG в AI или PDF в AI для того, чтобы иметь возможность работать в привычном формате. Возможен и другой вариант, когда вас попросят представить работу в формате, в который не умеет экспортировать ваш графический редактор, например, вам может понадобиться преобразовать формат AI в SVG вектор.
Но с нашим сервисом это не проблема и мы предлагаем вам онлайн конвертер, который умеет конвертировать векторную графику следующих форматов: AI, CDR, CDT, CCX, CMX, SVG, FIG, CGM, AFF, WMF, SK, SK1, PLT, DXF, DST, PES, EXP, PCS.
С нашим онлайн сервисом вы забудете о том, что задача перевести вектор в другой формат могла созвать какие-то трудности. Чтобы перевести, например, eps to ai вам достаточно просто выбрать файл на вашем компьютере или указать ссылку на него, затем выбрать требуемый формат и нажать кнопку «конвертировать». Через несколько секунд вы можете скачать вектор в требуемом формате с нашего сайта себе на компьютер.
Для конвертирования графических вектор файлов наш онлайн конвертер использует пакет UniConvertor, поддерживающий работу с большинством векторных форматов.
Конвертация файлов векторного формата пакета Corel Draw (CDR) реализована с помощью графического пакета LibreDraw, обеспечивающего качественную работу с форматом, и более подробно с ней вы сможете ознакомится, изучив наш материал «Конвертация из CDR (Corel Draw)».
Перед вами также может возникнуть задача преобразования растра в вектор, например, вам требуется преобразовать jpg to ai или png to ai, что вы можете также без труда сделать на нашем сервисе.
Вам достаточно в качестве исходного файла указать изображение в растровом формате, выбрать векторный формат, который вам требуется, и наш конвертер выполнит это преобразование для вас за несколько секунд.
В качестве программы трассировщика растровых изображений в векторные на нашем сервисе используется программный продукт Potrace. Более подробно ознакомиться с возможностями трассировщика Potrace вы сможете в нашей статье «Перевод графического изображения в векторный формат».
С нашим сервисом вы всегда сможете свободно конвертировать векторные изображения между форматами, не заботясь об установке дополнительного программного обеспечения на свой компьютер.
Подписаться на RSS
QR CODE для записи
В интернете полно руководств о том, как внедрить в HTML5 документ SVG графику. Ну конечно не только в HTML5. Во всех этих руководствах / статьях одно и тоже. Но реально они не рассказывают ни чего подробного. И большинство этих статей рассказывают о создание SVG объектов внутри кода страницы. И ни где нет подробного руководства о том, как подключить внешний файл на страницу. При этом чтобы он был как часть страницы, чтобы было полное взаимодействие с DOM, чтобы можно было манипулировать SVG файлом с помощью JS.
Долго изучал данный вопрос и вот моя статья, которая ни в коем случае не претендует на руководство, а просто рассказывает о моих экспериментах и поисках решения.
Свою сказку я пожалуй начну немного из далека
Оптимизация SVG файла и его сжатие
В принципе далее будет описана процедура сжатия, которую я уже описал в комментариях выше озвученной статьи. Но всё же повторю её здесь.
- Сохраняем SVG файл из Corel’а, но не забудьте настроить масштаб — Drawing Precision. Именно теперь она нам понадобиться и будет играть одну из ключевых ролей.
- Далее переходим на страницу оптимизатора:
- В поле «Исходный файл» выбираем созданный нами файл
- В поле «Точность чисел в атрибуте «d» тега «path»» ставим 0. Это нам позволит оптимизировать файл за счет удаления всех значений после точки. Именно для этого я советовал, выше в статье,отстроить масштаб (Drawing Precision).
- Поставьте галочку «Форматировать XML», а галочку с «Сжать gzip» снимите, если она стоит. Дело в том, что на момент написания статьи, оптимизатор работал некорректно. Возможно к моменту прочтения статьи оптимизатор уже будет исправлен (я автору сообщил в комментариях к его статьи об ошибках оптимизатора :-)) и тогда можете поставить галочку «Сжать gzip» и пропустить следующий пункт.
На этом всё — файл готов к употреблению. В случае правильно выполненных советов файл может потерять до 90% от своего веса 🙂
Пожертвовать
Спасибо за статью! Это мега вещь! Осталось научиться грамотно внедрять svg.
На здоровье 🙂
Хотел написать статью по «внедрению» и «укрощению» еще год назад, но так руки и не дошли.Добрый день. Подскажите, вы занимаетесь созданием кнопок в svg? Необходимы кнопки для скачивания файлов для нескольких ОС. Спасибо, жду ваш ответ.
Добрый!
Извиняюсь, что не ответил ранее, уведомления почему-то не приходили, после переезда на новый хостинг.Добрый день!
Нужно создать SVG-файл для сайта. Ранее никогда не сталкивался с анимированной векторной графикой, поэтому ищу инструменты для ее создания.
Поскольку немного знаю CorelDraw, то решил узнать, можно ли создать векторную анимацию полностью в CorelDraw?
Если возможно, то подскажите, пожалуйста, ссылочки на уроки или видеоматериалы.
Заранее спасибо всем, кто помог!BazzilioTheCat
Svg файл создать можно, только с анимацией у меня большие сомнения. В случае coreldraw, это вектор с функцией гиперссылок, и возможностью переходов по страницам. Работает с любым броузером через дополнительный плугин. Чаще используется для технической документации, с сылками на элементы детали. Можно иметь поля с массой детали стоимостью, и кучи других полей.
Arseniy
Участник
как я понял, принцип векторной анимации далек от растровой. В основе растровой анимации - кадр. В векторной же кадров нет, там, если я правильно понял, идет перемещение узлов и , соответственно, изменение вслед за ними кривых. Верно?
Arseniy
Участник
Svg файл создать можно, только с анимацией у меня большие сомнения. В случае coreldraw, это вектор с функцией гиперссылок, и возможностью переходов по страницам. Работает с любым броузером через дополнительный плугин. Чаще используется для технической документации, с сылками на элементы детали. Можно иметь поля с массой детали стоимостью, и кучи других полей.
Arseniy
Участник
Arseniy
Участник
почитал немного руководство. чешу репу. кажись, там не все так просто, как я думал. )
если я верно понял, то джава-скрипт и другие технологии кодинга рулят svg-файлами на сайте?Arseniy
Участник
Попробуй прочесть много.
Arseniy
Участник
qsedftghk
Кстати, клёвая статья. И svg достаточно богатый формат. Вот только ручками кодить это всё. Хотя, всё равно прикольно.
vovansky
Участник
Поскольку немного знаю CorelDraw, то решил узнать, можно ли создать векторную анимацию полностью в CorelDraw?
Если возможно, то подскажите, пожалуйста, ссылочкипомнится была у корела приблуда corel r.a.v.e. весила как паровоз, но тупорылая. вроде. корел на волне gif-анимации отказался от нее, вроде после 10 версии она уже не входила в пак. но если есть тяга освоить анимацию на базе корела (имхо это чистый мазохизм), то это то, что нужно
Люди, подскажите, при экспорте в svg все прекрасно получается, кроме одного - встроенное png-изображение экспортируется с белым фоном вместо прозрачного. Как сделать, чтобы оставался прозрачный фон.
Realalex
Кореловод
Модератор
Экспортировать встроенный битмап с прозрачностью отдельно и подменить тот, что создался при экспорте в svg.
Не надо благодарностей, жмите -Участник
Экспортировать встроенный битмап с прозрачностью отдельно и подменить тот, что создался при экспорте в svg.
Участник
Модератор
Ну так встройте его. Закодируйте в base64, например, с помощью Total Commander'a и подмените нужный кусок в svg. Если битмапов много и подменять затруднительно, то стоит попробовать другие софтины для создания svg.
Не надо благодарностей, жмите -Участник
Ну так встройте его. Закодируйте в base64, например, с помощью Total Commander'a и подмените нужный кусок в svg. Если битмапов много и подменять затруднительно, то стоит попробовать другие софтины для создания svg.
Не шарю. Это как? Битмап один, типа подложка, а на ней отрисовываются кривые в векторе. Стили css сохраняю в отдельный файл, а png-изображение встраиваю в svg. что мне надо закодировать и куда вставить?
Модератор
Экспортируете всё, что надо в svg с опцией Export bitmap - Embed Images
Экспортируете битмап отдельно в png с сохранением прозрачности (если вы не масштабировали в Corel'е импортированный png, то можно пропустить данный этап)
Пакуете png в base64. Например, в ТС - File - Encode Files (MIME, UUE, XXE) - MIME (base64)
Открываете оба файла текстовым редактором и подменяете закодированный кусок svg файла новым содержимым. Надеюсь разберётесь, что на что менять, и что копировать не надо. Сохраняете.
Не надо благодарностей, жмите -Пять лет работаю в Кореле, первый раз такое вижу. Принесли макет буклета на печать, а в нем все кривые, из которых построен логотип, имеют SVG-attributes. Что это такое? Стандартными средствами никак не разбивается. Можно ли печатать такие объекты? В принципе, есть вариант обвести все эти кривые (Create Boundary), а потом залить нужным цветом. Но просто хотелось бы узнать для чего это нужно и как и зачем оно делается?
Kuprianov
Ответ: Что такое SVG-attributes?
Что, ребят, никто не знает что это такое? Никто ничего не может сказать?
lunatik
Забанен
Ответ: Что такое SVG-attributes?
MrDesigner
Ответ: Что такое SVG-attributes?
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика)
Предположу, что вектор был представлен именно в этом формате.
Но в кореле он "представляется", как обычный набор кривых, в ргб, конечно.
ТС - скиньте ваш примерчик на всеобщее обозрение.
Kuprianov
Ответ: Что такое SVG-attributes?
Выкладываю в Кореле, в 9-ой версии.
Кстати, напечатался этот буклет. Все в порядке, так что эти аттрибуты ни на что не повляили.Вложения
lunatik
Забанен
Ответ: Что такое SVG-attributes?
Вероятно рисовали лого не в кореле. И даже скажу где В илле. Потом затащили. Атрибутик остался. Ну и фиг с ним.
Зачем неведомому иллофилу было сохранять лого как SVG - надо у него спрашивать. Может так гораздо кручеqsedftghk
Ответ: Что такое SVG-attributes?
Убрать атрибут можно тупо скопировав данную композицию в люстру, а потом из люстры обратно в корел.
Я думаю это обычный svg запихнут был в корел, а когда svg запихиваешь в корел, добавляется атрибут. Хотя, беспонятия почему именно таким образом. Я попробовал сделать svg в люстре и и запихнуть в корел. Так после данной операции, атрибуты есть но они легко удаляются как ненужный объект. Имхо, на печать и не должен влиять этот "атрибут", скорее всего это примочка формата svg. Так как-то..
Не по теме:
Зы. пока писал, Lunatik уже опередил.. гыExport Text
Далее нам предлагается выбрать, как мы желаем сохранить текст — Export Text
В моем примере текста нет, поэтому он меня не касается, но всё же поясню.Если у Вас в документе есть текст и он использует стандартные системные шрифты, то текст стоит сохранить «как текст» (As Text) со всеми снятыми галочками у этого параметра.
Если же вы используете не стандартные шрифты, то рекомендую сохранить текст в кривых (As Curves). Это позволит избавится от лишних файлов со шрифтами.
Export Bitmap
Следующим пунктом идёт Export Bitmap, в котором вы можете выбирать формат растровых изображений, если конечно они имеются. Здесь выбирайте на свой вкус. Моё мнение такое
- Если в файле много фотографий, то следует выбрать формат JPG. Хотя я не представлю зачем в SVG файле может быть использовано много фотографий. Если для галереи или чего то подобного, то это не оправдано, учитывая что сейчас для таких целей существует множество разных галерей на JS и фрейморках.
- Для остальных целей необходимо использовать PNG или GIF. Хотя такие картинки чаще проще отрисовать. Не спроста же мы решили использовать SVG.
- Если вы используете много эффектов, которые Corel будет растрировать при сохранение, то стоит выбрать PNG.
Так же выбирайте на своё усмотрение прикреплять файлами картинки или внедрять (Link Images / Embed Images). Если в файле много картинок и все они крупные, то лучше будет прикреплять их файлами. Если в файле несколько картинок или чуть больше чем несколько, но они все маленькие, то лучше внедрить.
JavaScript
Следующий немаловажный пункт (checkbox) — это прикрепление или внедрение JS. Тут всего два параметра «выносить js код в отдельный файл» или «внедрить его в документ». По умолчанию он внедряется в код файла, т.е. галочка снята. Но т.к. в примере я не используем ни каких JS, то этот пункт мне не особо интересен.
Encoding Method
Оставляем как есть в Unicode — UTF-8
Presents
И последний пункт в окне параметров сохранения SVG — это Presents. В этом пункте разработчики CorelDraw создали для нас несколько предустановок настроек, а также предоставили возможность сохранить свои часто используемые настройки.
Styling Options
Первым делом решим — хотим ли мы что бы стили были внутри SVG файла или были вынесены в отдельный файл. Тут принцип работы ни чем не отличается от работы стилей в HTML+CSS.
В большинстве случаев стили лучше встраивать в файл. Для этого необходимо выбрать пункт Internal Style Sheet в строке Styling Options. Этот параметр создаст SVG файл в хедере которого будут записаны все стили файла — цвета, контуры и их цвета.
Если в документе нет повторяющихся цветов и прочих стилей, то имеет смысл встроить их непосредственно в объекты. Для этого выбирайте пункт Presentation Attributes. Оба эти способа помогут сделать файл максимально независимым:
- При передаче — вы будете передавать только 1 файл, что не позволит вам случайно забыть файл стилей и запутаться в файлах.
- При внедрения файла в страницу — файл всегда будет использовать встроенные стили и будет производится только один запрос к серверу — не будет лишних запросов при загрузке файла.
Я выбрал для себя последний способ — External CSS. Этот параметр позволит сохранить стили в отдельный файл. Для чего оно мне и для чего вообще это может потребоваться? Ну у меня появилось желание сделать логотип сайта графикой SVG и при этом менять цвета логотипа при смене дизайна сайта непосредственно из общих стилей или из JS скрипта. Захотел — картинка красная, передумал и сделал её синей. При этом чтобы это «хотение» было не моё, а пользователя. В общем более подробно я уже писал в статье «Скрипт смены стиля пользователем в WP и не только…«
Параметр External CSS позволит сохранить стили в отдельный файл. К сожалению, я так и не смог добиться раскрашивания SVG файла с помощью глобальных стилей документа. Но это с одной стороны понятно, а с другой очень огорчает, т.к. SVG файл встраивается в DOM страницы, но и в тоже время не воспринимает глобальные стили, тем самым лишая многих возможностей по оформлению интерфейса и не только. Хотя с помощью JS управлять файлом всё равно можно. Об этом я расскажу в следующей статье. Так что данный параметр полезен разве только для презентаций, когда у нескольких файлов очень много общих стилей.
Если Вы не поняли что я написал в последних трёх четырёх абзаца — поэкспериментируйте сами с этим параметром и Вы всё сами поймете. SVG файл можно легко открыть в блокноте и посмотреть или отредактировать код. Это же обычный XML файл.
Создание SVG файла в CorelDraw и параметры при сохранение.
Я очень давно занимаюсь рекламой — полиграфия и наружка. В этой отрасли векторная графика очень развита в отличие от интернета. Большинство макетов делается непосредственно с применением CorelDraw или Adobe Illustrator, а макеты в Photoshop является плохим тоном.
Вместе с HTML5 и CSS3 нам теперь доступна и полноценная поддержка векторной графики во всех современных браузерах… Ну ладно, ладно — почти полноценная, но не за горами то время когда она будет полноценной. И уже сейчас смело можно использовать SVG в разработке сайтов, уже сейчас SVG графика может заменить некоторые ниши FLASH… Но это уже не по теме, это очередной холивар для отдельной темы, о которой я возможно пофлужу в отдельной теме.
И так, ближе к делу. Как я писал чуть выше — я очень долго работал с векторной графикой и её внедрение в HTML для меня очень радостное событие. Все свои файлы я создаю в CorelDraw X5. Он корректно сохраняет SVG. Конечно есть и бесплатные аналоги, такие как Inkscape, но:
- Я им не пользуюсь. Хоть он и самый мощный аналог Corel’a и Illustrator’а из бесплатных программ и я его уважаю за то, что он OpenSourse, но он еще очень молодой и слабый по сравнению со своими старшими платными собратьями.
- В интернете много написано о том, что Inkscape сохраняет не корректно SVG. Хотя есть инструмент, который исправляет его ошибки правит, но об этом ниже.
Дальше я приведу небольшое руководство по сохранению файла из CorelDraw X5. В Illustrator’е и Inkscap’е я не пробовал сохранять, но процесс наверняка схожий.
Сначала дам один совет по оптимизации самого изображения — избегать Behind fill (контур под объектом) у контуров. Corel при экспорте в SVG будет создавать дубликат объекта. В таких случаях лучше сделать толщину контура в два раза меньше. Если это не возможно, то лучше конвертировать контур в объект и ручками удалить лишние узлы.
Для примера в CorelDraw X5 я создал два простых примитива — круг и квадрат с контурами.
Сохраняем нарисованное в SVG. Сохранять можно через «Export» или «Save As». Какой способ выбрать — значения не имеет.
В появившемся диалоговом окне Экспорта / Сохранения выбираем формат SVG.
Жмём «Сохранить» (ну или «Экспорт» — в зависимости от выбранного вами способа) и перед нами появится окно настроек SVG файла.
UPDATE (02.11.2011)
Я сразу не обратил внимания — оказывается CorelDraw умеет сохранять сразу SVGZ. Я бы всё же не рекомендовал этого делать из-за приведенных мной выше нюансов. Ручками все же надежнее корректировать выходной файл. Но если вам надо быстро вывести файл, например для тестов, то SVGZ в CorelDraw самое то, ни надо ни каких заморочек. Однако файл, повторю, по выше предложенной схеме получается меньшего веса, а иногда и в несколько раз.
UPDATE 2 (02.11.2011)
Как известно — без мозгоёбства ни чего не бывает. В этот раз сюрприз преподнёс FF. Он не захотел отображать корректно SVGZ, а точнее просто ругался и выдавал ошибку
Поэтому на данный момент рекомендация следующая:
- Не использовать выше предлагаемый онлайн оптимизатор для сжатия в SVGZ
- Использовать локальный упаковщик GZIP (GZ). Не путать с ZIP. Например TotalCommander или 7Zip. Только не забыть переименовать расширение файла в SVGZ.
- Или использовать прямое сохранение из CorelDraw. В InkScape так же есть такая возможность. Однако файл будет немного больше по размеру из-за отсутствия ручной оптимизации.
- Для надежности создать на сервере файл .htaccess или добавить в него, если этот файл есть, следующие параметры
UPDATE 3 (26.12.2011)
В FF также появляется выше приведенная ошибка, если в файле нет отбивки после первой строки, объявляющей формат файла.
Т.е. вот так не правильно:А вот так правильно:
Document Setup
Далее идут настройки документа — Document Setup.
Ну про ширину и высоту думаю рассказывать не имеет смысла. Тут и так всё понятно. Главное не забудьте выставить единицу измерения pixsels
А вот Drawing Precision очень полезная штука. Тут мы задаем масштаб в котором будет обрабатываться документ, главным образом координаты узлов и объектов. В этом параметре я всегда выставляю разное значение. Вы можете поиграться и выставить свои. Но желательно добиться что бы у вас координаты были типа 12.435567 или 213.078381, т.е. 2 или 3 разряда. Зачем? Про это будет рассказано чуть ниже.Следующий пункт Fourtain Steps оставим по умолчанию.
Читайте также: