Открываем файлы векторной графики SVG

6 бесплатных онлайн SVG-редакторов: сравнение

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

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

Vectr

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

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

Даже если вы полный ноль с SVG, у вас есть возможность быстро научиться.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Если в онлайн версии нет нужных вам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook.

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

Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Вы можете показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д.

, которые блокируют прямую загрузку SVG, но разрешают ее показ по удаленке.

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

С этой целью Vectr недавно выпустили версию редактора в виде плагина для WP.

RollApp

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

Для работы в RollApp нужен аккаунт. Можно зарегистрировать новый или войти с помощью Google, , Amazon. Очень удобно, я ненавижу создавать тысячи новых аккаунтов лишь для того, чтобы увидеть приложение.

После авторизации откроется следующая страница:

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

BoxySVG

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Что важно, со времен обзора от Alex в BoxySVG добавили инспектор кода, что делает его одним из самых актуальных SVG инструментов для веб-разработчиков.

Janvas

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

Веб движется вперед, а Janvas стоит на месте, поэтому интерес к нему угас.

Alex с сайта SitePoint работал с этим инструментом немного в 2013-14 (в том числе с платной версией) и даже отвечал на вопросы некоторое время на странице . Janvas был довольно мощным инструментом.

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

Есть хорошая новость – выйдет новая версия в виде Chrome-приложения. Надеемся, они пофиксят проблемы.

DrawSVG

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

С помощью DrawSVG можно рисовать, изменять и рендерить объекты. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т.д. Также SVG можно экспортировать в PNG.

SVG-edit

SVG-edit – дедушка онлайн редакторов векторной графики, появился в середине 2000-х. Серверного функционала нет, все работает в браузере. Сохранить свою работу без добавления своего собственного функционала нельзя.

Тем не менее, для редактора, чья жизнь началась с сильно ограниченной и незаметной программы для рисования векторной графики, функционал SVG-edit постоянно улучшался.

С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д.

Заключение

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

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

PS: также можно попробовать Figma. Это больше инструмент для создания UI, а не SVG-редактор. Тем не менее, он имеет отличный набор инструментов и генерирует хорошо оптимизированный код SVG.

Ada Ivanoff

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Источник: //webformyself.com/6-besplatnyx-onlajn-svg-redaktorov-sravnenie/

Чем открыть файл в формате SVG – лучшие программы и онлайн-редакторы

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

Однако есть растровые редакторы, которые поддерживают экспорт рисунков в векторные и смешанные форматы.

Таковым, к примеру, является Adobe Photoshop, умеющий экспортировать рисунок в SVG – достаточно распространенный сегодня формат, способный хранить как растровую, так и векторную графику.

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

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

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

Как и все форматы, SVG имеет свои плюсы и минусы.

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

С другой стороны SVG наследует недостатки XML со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы SVG быстро «набирают» вес, если состоят из множества мелких деталей.

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

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

Лучшие редакторы для работы с файлами SVG

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

Adobe Illustrator

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

Он позволяет создавать и редактировать как простые эскизы, так и сложные художественные иллюстрации.

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

Boxy SVG

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

Приложением поддерживаются работа с фигурами и объектами, импорт шрифтов и картинок популярных форматов, работа с библиотекой Pixabay, просмотр и редактирование исходного кода SVG и CSS.

Программа Boxy SVG доступна как онлайн-сервис и как приложение для Windows 10, MacOS и Chrome OS.

Inkscape

В отличие от двух предыдущих программ, Inkscape не нуждается в особом представлении.

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

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

Чем открыть SVG онлайн

Если вам нужен онлайн-редактор SVG, используйте веб-версии программ Boxy SVG, Vectr и Inkscape. Функциональный набор таких редакций практически один в один, как у десктопных вариантов. Приложение Inkscape, к примеру, можно запустить в рамках проекта www.rollapp.com/app/inkscape.

Если же вы ищите что-то попроще, попробуйте онлайновый векторный редактор Sketchpad, доступный по адресу sketch.io/sketchpad. В активе Sketchpad имеются такие инструменты, как кисти, линии, стрелки, примитивы, клипарт, перо, мелок, аэрограф, заливка и т.п. Есть работа со слоями, палитрой и градиентами.

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

Конвертеры SVG в PNG

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

Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме.

Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.

В остальных случаях будет меньше мороки, если воспользуетесь бесплатными конвертерами SVG в PNG, работающими в режиме онлайн. В частности, это svgtopng.com/ru, convertio.co/ru/svg-png и image.online-convert.com/ru/convert-to-png.

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

Источник: //viarum.ru/format-svg/

Начинаем Работать с Масштабируемой Векторной Графикой (SVG)

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

Что Получится в Результате Урока

Изображение выше – это скриншот – мы будет пользоваться SVG а не этим изображением..

Независимо от Разрешения Экрана

Недавно на WWDC 2012 Apple анонсировала использование новых ретина дисплеев на MacBook Pro. Ретина дисплеи имеют более высокую плотность пикселей (220.

5ppi), чем обычные экраны и мониторы, и Apple, заявили, что их в их ретина-технологии плотность настолько высока, что невозможно увидеть пикселизацию человеческим глазом с обычной дистанции.

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

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

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

Мы не решим при этом все проблемы; Мы не можем использовать в качестве SVG картинки созданные в пиксельном формате, такие как jpg или png (однако для этого мы всегда можем использовать тег canvas).

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

Главное о SVG в Десяти Пунктах

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

• SVG означает Scalable Vector Graphics – Масштабируемая Векторная Графика.
• SVG используется в качестве векторной графике в интернете.
• XML формат используется для записи информации о векторной графике.
• SVG изображения не теряют в качестве когда меняются в размерах или масштабируются.
• SVG изображения можно анимировать.
• SVG интегрируется с DOM и с ним можно работать с помощью JavaScript и СSS.
• SVG изображения можно индексировать, это означает, что если у вас есть текст в формате SVG, то он будет виден поисковикам.
• SVG изображения можно распечатать с любым разрешением.
• SVG  рекомендуется к использованию W3C.
• SVG  поддерживается всеми современными браузерами, хотя нет поддержки для IE8 и ниже. Можно использовать плагины, для всего что ниже.

Lines

Начнем с простого. Создадим линию. Мы делаем это записав следующий код в HTML документе.

Сначала мы используем тег 'svg', а затем внутри него записываем xml-разметку. Вот что мы здесь задаем:

• X1: Координаты первой точки по оси x
• Y1: Координаты первой точки по оси y
• X2: Координаты последней точки по оси x
• Y2: Координаты последней точки по оси y

Поэтому например, если нам нужно нарисовать диагональную линию, мы можем задать для y2 значение 200, и тогда конечная точка опустится у нас на 200, и мы получим диагональную линию. Мы также можем применить к ней стили, и сделать это можно в CSS. Здесь мы используем встроенные стили, но вы можете использовать какой-то дополнительный стиль, если вам хочется.

Окружности

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

cx и cy – атрибуты, задающие координаты x и y для центра окружности. Если мы их пропустим, то тогда, их значения по умолчанию будут равняться – ‘0’, чтоб приведет к тому, что окружность попадет за пределы страницы. И наконец атрибут ‘r’ – задает радиус окружности.

Прямоугольники

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

Подобным образом, как мы задаем ширину и высоту элементов в CSS, мы также задаем атрибуты для ‘rect’ в svg.

Эллипс

Эллипс создается почти также как и окружность, однако, теперь у нас не один радиус, у нас есть атрибуты для радиусов вдоль оси x и вдоль оси y.

Многоугольники

С многоугольниками чуть сложнее (но только чуть-чуть). Сначала мы задаем для многоугольника цвет заливки, оранжевую обводку и толщину обводки 10. Далее мы задаем атрибуты для точек. Каждая пара координат определяет x и  y координаты каждой точки многоугольника. В этом демонстрационном примере я создал звезду.

Текст

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

Вот как мы можем добавить текст:

webdesigntuts+

В коде выше, вы можете видеть, что мы задали x и y  координаты. А затем задали несколько CSS атрибутов, таких как font-family, weight, size и color.

Контуры

Говоря о теге path, на нужно поговорить о ‘d’-атрибуте. Этот ‘d’-атрибут описывает контур, который мы создаем. Каждая команда внутри ‘d’-атрибута, одна из команд-букв со своими параметрами. Команды для ‘d’-атрибута следующие:

• M: движение к
• L: линия к
• H: горизонтально к
• V: вертикально к
• C: кривая к
• S: гладкая кривая к
• Q: квадратичная кривая Безье
• T: гладкая кривая Безье
• A: эллиптическая Дуга
• Z: замкнуть контур

Вот пример кода:

Мы даже можем задать текст, который будет размещаться по кривой:

webdesigntuts+

Мы сначала определили контур в теге 'defs' а затем назначили ему Id = 'path1'. Затем мы можем использовать это с текстом задав ему атрибут ‘textPath’.

Создание масштабируемого Логотипа и Иконки в формате SVG

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

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

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

После того как вы нарисовали свой логотип или иконку, зайдите в “File > Save as”, и там выберете “SVG”, в выпадающем меню для типа файла. Дайте файлу название и нажмите Сохранить.

Должно открыться диалоговое окно для сохранения SVG формата. Здесь вам нужно выбрать “Show SVG code”. И тогда у вас откроется код в браузере.

Вам просто нужно будет будет скопировать его, и заключить его внутрь тега ‘svg’ в вашем html документе,  и это все. Просто не так ли?

Затем вы можете использовать стили или поменять расположение svg элемента в вашем документе, используя методы CSS. Вы также можете поместить их внутрь тега ‘a’ и создать ссылку, или использовать с ним JavaScript, чтобы добавить больше функциональности.

Дополнительные Источники

• Почему вы не используете SVG? на Nettuts+
• SVG основы
• SVG анимация в Opera

Источник: //webdesign.tutsplus.com/ru/articles/getting-started-with-scalable-vector-graphics-svg--webdesign-7515

Графический формат SVG и где он применяется

Привет всем, наши дорогие фанаты свободной конвертации. Сегодня у нас на рабочем столе интереснейший проект под кодовым названием Scalable Vector Graphics или кратко SVG. Почему на иностранном языке? Чтобы никто не догадался.

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

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

Все это нам совершенно необходимо для ясного понимания – что такое SVG и с чем его лучше закусывать.

Масштабируемая векторная графика

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

//www.youtube.com/watch?v=m0FXvS59THU

Как вы могли слышать – графика бывает двух типов.

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

Что вы видите?

Правильно – картинка составляется из миллионов разноцветных точечек. Это и есть растр. Поэтому такой тип графики и называется “растровым”.

Переходим ко второй части эксперимента. Поверьте, вам предстоит намного более весело провести время, а может даже найти себе приключений на кой-чего.

Одевайте свою самую модную одежку, звоните другу или подружке. Мы отправляемся в ночной клуб. Зачем? Изучать графику векторную.

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

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

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

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

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

Технологическое решение SVG

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

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

Да-да, файл графики в формате SVG представляет собой текстовый файл XML, наполненный тегами, примерно как в HTML, и данными, структурированными при помощи XML. Логически предположить, что SVG-графику можно интегрировать непосредственно в HTML-код веб-страницы, форматировать при помощи таблиц стилей CSS и даже подключать программные сценарии Javascript.

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

1. Во-первых, векторная графика по определению масштабируется без потерь в качестве картинки (потому что пикселей-то нет и при увеличении изображение не будет превращаться в картину художника-кубиста).
2. Во-вторых, SVG полностью совместим с веб-технологиями и поэтому становится органичной частью сайтов.
3. В-третьих, добавляя в цифровое описание картинки объекты и подключая к ним сценарии Javascript – мы делаем изображение интерактивным, то есть реагирующим на определенные действия пользователя заданными ответами.
4. В-четвертых, SVG – текстовый формат, поэтому можно оптимизировать файл под SEO без внешних мета-тегов, прямо вписывая ключевые слова в код изображения.

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

Как можно использовать SVG для пользы и выгоды

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

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

Формат SVG оптимален для небольших, зато масштабируемых и интерактивных картинок.

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

Самое полезное – SVG-графика наилучшим образом подходит для электронной коммерции.

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

На этой основе можно разработать интерактивный обзор товара со всех сторон и даже изнутри.

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

После того, как клиент узнает страшную тайну о своем страшном недуге, рука сама тянется кликнуть мышью по соседнему участку SVG-картинки с красной кнопкой “Купить лекарство от всех болезней”. Достаточно одной таблэтки. Price$1000.

Вот какое полезное изобретение, этот SVG.

Способы конвертации в SVG

На нашем сайте мы предлагаем вам конвертацию различными методами:

А можно как-то уменьшить размер SVG?

Да! С помощью специальных программ, например SVGO, или на нашем сайте с помощью функции оптимизации SVG.

Наш сервис построен на использовании открытых компонентов, в частности на SVGO.

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

• очистка атрибут из новый линий и повторяющихся объектов;
• удаление описание типа документа;
• удаление XML инструкций;
• удаление комментариев;
• удаление метадаты;
• и другие элементы информации.

Источник: //online-converting.ru/blog/svg/

SVG на собственной шкуре. Часть 1 — создание SVG файла в CorelDraw

30.07.2011

Короткая ссылка на запись

QR CODE для записи

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

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

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

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

Свою сказку я пожалуй начну немного из далека

Создание SVG файла в CorelDraw и параметры при сохранение

Я очень давно занимаюсь рекламой — полиграфия и наружка. В этой отрасли векторная графика очень развита в отличие от интернета. Большинство макетов делается непосредственно с применением CorelDraw или Adobe Illustrator, а макеты в Photoshop является плохим тоном.

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

И так, ближе к делу. Как я писал чуть выше — я очень долго работал с векторной графикой и её внедрение в 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 файла.

Encoding Method

Оставляем как есть в Unicode — UTF-8

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 файл.

JavaScript

Следующий немаловажный пункт (checkbox) — это прикрепление или внедрение JS. Тут всего два параметра «выносить js код в отдельный файл» или «внедрить его в документ». По умолчанию он внедряется в код файла, т.е. галочка снята. Но т.к. в примере я не используем ни каких JS, то этот пункт мне не особо интересен.

Document Setup

Далее идут настройки документа — Document Setup.
Ну про ширину и высоту думаю рассказывать не имеет смысла. Тут и так всё понятно. Главное не забудьте выставить единицу измерения pixsels

А вот Drawing Precision очень полезная штука.

Тут мы задаем масштаб в котором будет обрабатываться документ, главным образом координаты узлов и объектов. В этом параметре я всегда выставляю разное значение. Вы можете поиграться и выставить свои. Но желательно добиться что бы у вас координаты были типа 12.435567 или 213.078381, т.е. 2 или 3 разряда.

Зачем? Про это будет рассказано чуть ниже.

Следующий пункт Fourtain Steps оставим по умолчанию.

Export Text

Далее нам предлагается выбрать, как мы желаем сохранить текст — Export Text
В моем примере текста нет, поэтому он меня не касается, но всё же поясню.

Если у Вас в документе есть текст и он использует стандартные системные шрифты, то текст стоит сохранить «как текст» (As Text) со всеми снятыми галочками у этого параметра.

Если же вы используете не стандартные шрифты, то рекомендую сохранить текст в кривых (As Curves). Это позволит избавится от лишних файлов со шрифтами.

Export Bitmap

Следующим пунктом идёт Export Bitmap, в котором вы можете выбирать формат растровых изображений, если конечно они имеются. Здесь выбирайте на свой вкус. Моё мнение такое

• Если в файле много фотографий, то следует выбрать формат JPG. Хотя я не представлю зачем в SVG файле может быть использовано много фотографий. Если для галереи или чего то подобного, то это не оправдано, учитывая что сейчас для таких целей существует множество разных галерей на JS и фрейморках.
• Для остальных целей необходимо использовать PNG или GIF. Хотя такие картинки чаще проще отрисовать. Не спроста же мы решили использовать SVG.
• Если вы используете много эффектов, которые Corel будет растрировать при сохранение, то стоит выбрать PNG.

Так же выбирайте на своё усмотрение прикреплять файлами картинки или внедрять (Link Images / Embed Images). Если в файле много картинок и все они крупные, то лучше будет прикреплять их файлами. Если в файле несколько картинок или чуть больше чем несколько, но они все маленькие, то лучше внедрить.

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

Хотя не рекомендую обычный виндовский блокнот, лучше использовать редактор Notepad++ или аналог в котором используется подсветка кода и который может корректно работать с UTF-8.

И если вы прикрепите изображения как файлы, а не внедрите, то их потом лучше сохранить отдельно в соответствующие форматы, используя советы выше — фотки в JPG, а остальные картинки в PNG и GIF и подправить пути до файлов ручками.

Presents

И последний пункт в окне параметров сохранения SVG — это Presents. В этом пункте разработчики CorelDraw создали для нас несколько предустановок настроек, а также предоставили возможность сохранить свои часто используемые настройки.

Оптимизация SVG файла и его сжатие

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

Источник: //blog.g63.ru/other/svg-%D0%BD%D0%B0-%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9-%D1%88%D0%BA%D1%83%D1%80%D0%B5-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5/