Как манипулировать и анимировать SVG через Snap.svg | htmlbook.ru

Содержание

Что такое SVG? Основы.

Поздравляю всех с Днём Победы! А сегодня я пишу первую статью из серии, в которой мы узнаем, что такое SVG и как его использовать.

SVG(Scalable Vector Graphic) — это язык для описания двумерной графики, основанный на XML. Данная технология постепенно набирает обороты, а связано это вот с чем:

  • При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
  • Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
  • Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
  • Можно редактировать или анимировать с помощью CSS и JavaScript
  • Меньший размер

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

Для начала стоит отметить, что все наши фигуры должны быть в теге svg, а теперь давайте нарисуем линию. Для отображения линии служит тег line, который имеет следующие атрибуты:

  • x1 — Начальная x координата
  • x2 — Конечная x координата
  • y1 — Начальная y координата
  • y2 — Конечная y координата
  • stroke-width — Ширина линии
  • stroke — Цвет линии

Но что, если нам нужно нарисовать сразу несколько линий? Использовать несколько тегов line было бы не очень красиво. Для этого существует тег polyline.

У тега polyline есть атрибут points, где мы указываем координаты x и y через запятую, затем делаем пробел и пишем координаты следующей точки и так далее. Заметьте, что тут есть атрибут fill, в котором мы можем указать цвет в любом из форматов css, которым будет залито пространство между линиями. Если же вы хотите, чтобы пространство между линиями было пустым, то укажите значение none.

Перейдём к более сложным фигурам и нарисуем прямоугольник.

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

Переходим дальше и попробуем нарисовать круг

Для отрисовки круга служит тег circle и атрибуты cx, cy и r для задания координат центра круга и его радиуса.

Другой элемент — эллипс рисуется точно так же, как и круг, но там мы можем сами задавать радиусы по оси x и по оси y. Для его отрисовки служит тег ellipse

Если вам нужно выводить многогранные фигуры, такие как пятиугольник, то воспользуйтесь тегом polygon

Атрибут points у тега polygon работает так же, как и атрибут points у тега polyline.

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

SVG поддерживается IE c 9 версии, Mozilla Firefox с 1.5, Google Chrome с 3.0 и оперой с 8.0.

На этом статья подошла к концу. Получилась она большой, но простой. В следующей мы продолжим изучать эту интересную технологию, а на этом всё. Удачи!

  • Создано 09.05.2014 20:15:54

  • Михаил Русаков

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Использование SVG

SVG — формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics).

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

Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

Зачем вообще нужен SVG?

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

Создадим изображение SVG, с которым будем работать дальше

Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.

Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.

Adobe Illustrator умеет сохранять в SVG.

При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG. Меня вполне устраивает SVG 1.1.

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.

Добавляем SVG на страницу с помощью тега

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

В Illustrator рабочая область была размером 612px ✕ 502px.

Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты или для , так же как для PNG или JPG. Вот пример:

Посмотрите на этот пример!

Поддержка браузерами

SVG по-разному поддерживается браузерами. Он работает везде, кроме IE до 8 версии и браузерах на Android до версии 2.3.

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

Один из вариантов: проверка поддержки через Modernizr и замена для изображения:

Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант, если вы не имеете ничего против JavaScript в разметке:

Еще можно использовать SVGeezy. Далее мы рассмотрим другие способы деградации.

Добавляем SVG через

Использовать SVG в качестве фона c помощью CSS-свойства так же просто, как и вставка с помощью тега .

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

Поддержка браузерами

Вставка SVG через свойство по-разному поддерживается браузерами, но в общем дела обстоят так же, как и с . Проблемой являются IE до 8 версии и браузеры на Android до версии 2.3.

В этом случае нам может помочь Modernizr, даже более эффективно, чем при использовании . Если заменить на изображение, формат которого поддерживается, на сервер будет отправлен один HTTP-запрос, а не два. Modernizr добавляет класс “no-svg” для html-элемента, если SVG не поддерживается:

Общая проблема при использовании и …

Проблема состоит в том, что вы не можете управлять внутренностями SVG с помощью CSS так, как сможете при использовании двух приёмов описанных ниже. Читайте дальше!

Добавляем SVG непосредственно в документ

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

Этот приём может быть полезным, так как изображение встроено прямо в документ, и для его загрузки не происходит дополнительный HTTP-запрос. У этого метода те же преимущества, как и у использования Data URI. И недостатки у него те же, не обольщайтесь. Среди них: вероятность получения очень тяжелого документа, наличие блоков SVG-кода в нем и невозможность кэширования.

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

Сначала оптимизируем

Без сомнений, для вас не станет сюрпризом то, что SVG, полученные в Adobe Illustrator, не самые оптимальные. Они содержат DOCTYPE, примечания генератора и прочий мусор. У SVG, в общем, и так небольшой размер, но почему бы не уменьшить его еще больше, если есть возможность? Питер Коллингридж (Peter Collingridge) создал SVG Optimiser, инструмент для онлайн-оптимизации SVG. Загружаете старый файл, скачиваете новый. В своём видео Кайл Фостер заходит ещё дальше и удаляет даже переносы строки в процессе оптимизации.

Если вы еще более суровы, вот вам инструмент на Node JS, с помощью которого можно оптимизировать изображения самостоятельно.

Затем управляем с помощью CSS

Видите, насколько сильно теперь SVG похоже на HTML? Это потому, что они оба не что иное, как XML (теги и всякая всячина внутри). В нашем проекте есть два составляющих элемента, и . Можно просто открыть код и присвоить им классы, как любому другому элементу HTML.

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

Более того, в SVG можно использовать фильтры, например размытие:

И его можно применить из CSS:

Пример того, что может получиться:

Check out this Pen!

Поддержка браузерами

Добавление SVG непосредственно в документ по-разному поддерживается браузерами, однако все сводится к отсутствию поддержки IE младше 8 и браузерам на Android до версии 2.3 1.

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

И снова используем Modernizr:

Добавляем SVG на страницу с помощью тега

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

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

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

Внешние файлы со стилями для SVG, вставленного с помощью

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

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

Использование Data URI для SVG

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

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

Добавление на страницу с использованием тега

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

Добавление на страницу с использованием тега

Кстати, если добавить в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.

Консольные штучки для перекодирования SVG в base64:

Или же Матиас Биненс (Mathias Bynens) предлагает свои приёмы:

Используйте или чтобы пропустить запись в файл и просто скопировать выходные данные в кодировке base64 в буфер без переносов строки.

Материалы для дальнейшего чтения

Нельзя не упомянуть видео Кайла Фостера «Последовательность оптимизации SVG»:

… взгляните также на это видео + слайды.


Примечания

1.

Говоря о браузере Android 2.3, вот. Но если вам никак не обойтись без поддержки родного браузера, вот.

Где взять или как сделать SVG-картинки

При создании рисованного видео в программе Sparkol VideoScribe возникает вопрос: где взять или как самому сделать SVG-картинки, и в какой программе?

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

Где скачать SVG-изображения

Приведу два лучших сервиса, где вы сможете скачать SVG-изображения абсолютно бесплатно. Первый из них: pixabay.com — на нём есть поддержка русского языка. Потребуется регистрация (быстрая), но зато он наиболее удобен, и хорош, в смысле выбора картинок.

Картинки там имеют удобное разбиение по тематикам: люди, бизнес, медицина, техника и т.д. Что необходимо сделать обязательно? Выбрать формат «Векторы» и прозрачный фон, можете также выбрать чёрно-белый цвет изображений:

Далее кликайте по нужной картинке, которая загрузится в отдельном окне. Там обязательно отметьте переключатель «SVG» и жмите кнопку «Бесплатная загрузка»:

Всё просто. Ещё один сервис, где можно бесплатно скачать SVG-изображения: openclipart.org. Там даже регистрироваться не надо.

Но что делать, если вам требуются оригинальные SVG-картинки? Их можно сделать самому, даже если вы не умеете рисовать.

Как самому сделать изображения SVG

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

Но что делать тем, кто не имеет навыков рисования? А мышкой нарисовать, тоже не получится.

Существует несколько графических программ, в которых можно сделать изображения SVG самостоятельно. Это редакторы векторной графики, например: CorelDraw, Adobe Illustrator, Sketsa SVG Editor и некоторые другие. Но мы рассмотрим создание SVG-картинки в бесплатном векторном редакторе Inkscape (inkscape.org) — который подходит для любой ОС.

Inkscape предназначен специально для работы с графическим форматом SVG. Он поддерживает конвертацию SVG в PNG и наоборот: позволяет конвертировать некоторые графические форматы в SVG. Но! Такие SVG-картинки не будут прорисовываться в программе VideoScribe. Но выход есть!

Не буду описывать все достоинства редактора Inkscape. Но остановлюсь на лепке узлов — уникальной возможности Inkscape, которая нас интересует. Говоря простым языком это означает: мы можем повторить любой контур изображения, какими бы изогнутыми не были линии этого контура.

На практике это значит: мы, используя дополнительный полупрозрачный слой, сможем легко перерисовать любую картинку — как через кальку! И, если нужно, покрасить — залить замкнутые контуры картинки любым цветом.

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

Создаём дополнительный слой: («Слой — Новый слой»). Регулируем прозрачность первого слоя, чтобы он хорошо просвечивался под вторым слоем, открыв панель — («Слой — Слои»):

Опять выделяем второй слой, делая его рабочим, и выбираем инструмент рисования кривых и прямых линий (Рис.1-4). С помощью него абы как повторяем линию контура на втором слое:

Двойной клик позволит прервать рисование линии в точно заданном месте.

Инструментом (Рис.1-2) просто подтягиваем рычаги (прямые отрезки линий) до контура картинки:

Вот тут-то и проявляются замечательные возможности программы Inkscape. Слегка перемещая курсор левее-правее, мы быстро добиваемся точного повторения заданного контура. Изгиб может быть любой выпуклости. При необходимости, этим же инструментом (Рис.1-2) можно смещать узлы — для более точной корректировки их положения.

Теперь остаётся повторить эту операцию нужное количество раз. Для рисования мелких деталей просто увеличивайте масштаб (Рис.1-3) картинки, передвигая нужный участок в центр рабочего окна.

Осталось ещё кое-что уточнить. Чтобы установить толщину или цвет линии, заходим: («Объект — Заливка и обводка»):

При открытии нового изображения программа показывает прямоугольную рамку, которая не всегда совпадает с самим рисунком. Её можно убрать так — заходим в («Файл — Свойства документа») — далее убрать галочку в поле «Показывать кайму холста»:

Всё. Удаляем первый, теперь уже не нужный слой, и сохраняем картинку: («Файл — Сохранить как»), выбрав тип файла: .svg.

Ещё одна маленькая деталь. Проводник Windows не показывает эскизы (превью) графических файлов SVG. Для удобства разумно поступить так, как сделали разработчики Sparkol VideoScribe. Создать небольшого размера, около 100 px по ширине или высоте (сами SVG-изображения не имеют размера), копии новых картинок, экспортировав их в формат PNG. Это делается в Inkscape: «Файл — Экспортировать в PNG». Сохраняйте их в той же папке, под тем же именем, что и их «копии» SVG.

Но если у вас Windows 7, то вам повезло.

Что такое SVG: плюсы и минусы использования

Найдите в интернете бесплатное расширение для Проводника, вот его точное название: «SVG Viewer Extension for Windows Explorer». Оно позволяет просматривать SVG-файлы в виде эскизов. Для Windows XP — не подходит.

Читайте урок по созданию рисованного видео в программе Sparkol VideoScribe.

Векторная графика в Интернете

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

В самом деле, два наиболее популярных в настоящее время графических формата Internet – GIF и JPEG – являются уже довольно старыми. Конечно, неудачными назвать их никак нельзя, ведь сам факт столь длительного их существования – свидетельство этому. Но, с другой стороны, вряд ли можно поспорить с тем, что возможности данных форматов не отвечают современным требованиям в области графики. Так, формат GIF поддерживает только 256–битовый цвет, а в случае применения формата JPEG при большой степени сжатия существенно снижается качество изображения. Кроме того, еще в 1995 г. возможность свободного использования GIF оказалась под вопросом, когда компании Unisys, которой принадлежит реализованный в этом формате алгоритм сжатия LZW, и CompuServe, разработавшей сам формат, собрались взимать лицензионные отчисления с каждой программы, использующей его.

В сложившейся ситуации группа независимых разработчиков Internet приняла решение о разработке формата, который соответствовал бы или даже превосходил по своим возможностям GIF, но был при этом простым в создании и полностью мобильным. Новый формат получил название Portable Network Graphics (PNG) и был одобрен консорциумом W3C в 1996 г.

Формат PNG поддерживает 48–битовые цветные и 16–битовые черно–белые изображения и обеспечивает более быструю их загрузку, чем формат GIF. Он также включает в себя немало дополнительных возможностей, например альфа–каналы (alpha channel), позволяющие устанавливать уровень прозрачности для каждого пиксела, и гамма–коррекцию. Механизм сжатия изображения в PNG реализован на базе фильтров, позволяющих оптимизировать данные перед сжатием, и алгоритма LZ77, применяемого в ZIP–архиваторах.

Однако, несмотря на ряд преимуществ PNG пока не удалось стать реальной альтернативой GIF и JPEG. Виной тому было отсутствие поддержки со стороны разработчиков браузеров. Правда, к сегодняшнему дню в данном направлении произошли существенные сдвиги: начиная с Internet Explorer 4.0 и Netscape Navigator 4.04 поддержка PNG реализована непосредственно в броузерах; до этого она обеспечивалась за счет встраиваемых компонентов. По мнению ряда специалистов, вскоре можно ожидать широкого распространения нового формата (после массового перехода пользователей на последние версии популярных браузеров).

Следующим по популярности растровым форматом для Web можно назвать FlashPix, разработанный группой компаний: Kodak, Hewlett–Packard, Microsoft и Live Picture.

SVG – Scalable Vector Graphics

Он базируется на принципах JPEG–компрессии, но содержит ряд усовершенствований, которые позволяют уменьшить степень искажения изображений. Основное преимущество данного формата – многоуровневая организация файла. В начале загружается изображение с самым низким разрешением и впоследствии, по мере надобности, подкачивается более качественная версия. Microsoft избрала модификацию этого формата в качестве основы для своего растрового редактора PhotoDraw 2000, так что в недалеком будущем следует ожидать поддержки его браузером Internet Explorer.

Интересной разработкой обладает компания Iterated Systems, которая создала свой формат на основе фрактальной компрессии (Fractal Image Format, FIF), а также выпустила программу преобразования основных форматов в FIF и плагины для просмотра сжатых по фрактальному алгоритму изображений в основных браузерах.

К сожалению, фрактальная компрессия, как и JPEG, имеет существенный недостаток: согласно этим алгоритмам, для анализа изображение перед сжатием разбивается на отдельные блоки, что затрудняет его постепенную прорисовку при загрузке с Web–сайта.

Наиболее перспективные – растровые форматы, основанные на алгоритмах wavelet–сжатия. В этой области ведут разработки практически все компании, которые занимаются созданием графических форматов. Самым многообещаемым является, безусловно, JPEG 2000. Работа над ним еще не завершена, но заявленные параметры впечатляют: 256 каналов цвета, что позволит формату работать с любым цветовым пространством и поддерживать множество альфа–каналов; встраивание ICC–профилей; неограниченное поле для метаданных. Но главное преимущество wavelet–технологии – потоковость. Wavelet–поток можно прервать в любое время, при этом изображение все равно воспроизводится, только качество его будет зависеть от количества загруженных данных.

Компания AT&T разработала и собственный формат на основе wavelet–компрессии – DjVu. Его главная особенность – распознавание текста при компрессии содержащих его изображений и сжатие отдельно графического и текстового слоя. По утверждению компании, основным предназначением этого формата и является публикация в Web сканированных документов. На сайте AT&T по адресу djvu.research.att.com можно получить бесплатный плагин для просмотра DjVu –файлов, а также целую библиотеку, опубликованную в этом формате.

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

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

Однако говорить о массовом внедрении векторной графики в Web пока еще рано, в первую очередь из–за отсутствия единого формата.

Наиболее распространенным в данный момент является формат, разработанный компанией Macromedia, – Flash. Благодаря своим уникальным возможностям его последняя (третья) версия очень быстро завоевала популярность. Flash 3 поддерживает анимацию по кейфреймам, морфинг, прозрачные объекты, гиперссылки, встраивание звуковых и видеофайлов. Средства для его создания достаточно просты в пользовании, хорошо документированы, плагины для просмотра распространяются бесплатно, а размер выходных файлов крайне мал.

Но все его преимущества, к сожалению, блекнут перед одним единственным недостатком, который заставил Macromedia отказаться от дальнейшей разработки формата. Этот недостаток – закрытость, ведь файл Flash – двоичный. Таким образом, его можно редактировать только в специальной программе. Поэтому в последнее время различными компаниями и организациями предложен целый ряд языковых форматов, и каждый из них претендует на роль единого стандарта. В число таких форматов входят Web Schematics, DrawML, PGML и VML.

Web Schematics представляет собой язык гипертекстовой маркировки для создания чертежей и диаграмм. Его разработчики попытались создать аналог функций рисования, используемых в базовых графических средствах систем воспроизведения документов, таких, как Adobe FrameMaker и Microsoft Word. Данный формат использует модели рендеринга и представлений HTML и CSS1.

 

Редактируемая двумерная графика для Интернета

Microsoft, Hewlett–Packard и три фирмы, специализирующиеся в области ПО, представили на рассмотрение консорциума World Wide Web стандарт, предназначенный для реализации высококачественной редактируемой двумерной векторной графики в Интернете.

С помощью языка векторной разметки (Vector Markup Language – VML) Web–дизайнеры смогут без труда редактировать, вырезать и вставлять векторные изображения в прикладные программы.

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

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

До сих пор желающим дополнить свои Web–страницы векторной графикой приходилось пользоваться форматами растровых изображений, таких, как GIF, JPEG и PNG. Однако уменьшить или увеличить их размеры, даже расширяя или сжимая окно браузера, не удавалось.

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

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

Формат VML появился на базе языка Extensible Markup Language (XML – расширяемый язык разметки), дополняющего HTML. Web–дизайнеры получили в свое распоряжение более гибкий инструмент, который позволяет создавать собственные теги, сообщают представители компаний.

Вместе с Microsoft и HP в консорциум W3C с предложением принять стандарт VML обратились компании AutoDesk, Macromedia и Visio Corp.

Они планируют в будущем выпускать продукты, использующие VML.

Например, Microsoft намерена предусмотреть возможность работы с VML в браузере Microsoft Explorer, операционной системе Windows и очередной версии Microsoft Office, заявил Склепович.

Это обеспечит взаимодействие офисного ПО и программ для проектирования и черчения.

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

Например, фирма Macromedia использует в своем инструментальном пакете векторной графики и анимации Flash собственный формат векторной графики под названием SWF. Компания Autodesk в пакете AutoCAD использует формат DWF.

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

 


Дата добавления: 2016-05-28; просмотров: 671;


Похожие статьи:

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

Что такое SVG?

SVG (Scalable Vector Graphics) — векторный графический формат. Данная технология позволят создавать изображения, которые впоследствии можно масштабировать, не проиграв в качестве графики. Забегая вперед, можно отметить, что SVG-файлы не требуют много места для хранения, а возможности у данного формата впечатляющие.

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

  • логотипы;
  • фон для сайта;
  • кнопки;
  • карты, диаграммы.

Плюсы использования SVG

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

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

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

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

4. Формат SVG поддерживается всеми современными браузерами.

Что такое SVG? Основы.

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

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

Минусы использования SVG

Есть ли минусы у SVG? Их практически нет, но они все-же имеются. Итак, данный формат не поддерживают устаревшие браузеры такие, как Internet Explorer 8. Кроме того, следует отметить, что SVG не получится применить в фотографиях, он используется исключительно для изготовления всевозможных линий и фигур.

Вместо заключения

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *