В закладки

X

База плагинов jQuery

Множество различных jQuery примеров, элементы CSS
и большое количество других инструментов для Вашего сайта!

-->

23-07-2016

IT-Новости

SVG в веб-дизайне

SVG в веб-дизайне

Стандарты 4К и 5К современных дисплеев требуют нового подхода к веб-дизайну. С такой высокой плотностью пикселей растровая технология уже не справляется. Положение спасает масштабируемая векторная графика (Scalable Vector Graphics). SVG изображения принадлежат пятой версии HTML-разметки.

Технология позволяет веб-мастерам создавать изображения без использования Flash во многих редакторах (Corel Draw, Illustrator, Sketch). Не так давно использование этого языка разметки ограничивалось по двум причинам: слабая поддержка браузерами; сложное создание растрового аналога для тех клиентов, которые svg не распознают. Теперь графику поддерживают все браузеры.

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

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

Теперь изображение можно сохранить, а затем вставить его на страницу.

Развитие идеи использования векторной графики в интернете

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

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

Преимущества SVG анимации

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

  • Качество изображения не зависит от разрешения экрана.

SVG встраивается в документ HTML при помощи тега svg, который распознается браузером. Это приносит сразу две выгоды.

  • Используя svg css, легко определять стили и скрипты.
  • Объект можно программировать и задавать свойства через Java Script.
  • Объект, как набор математических функций, имеет меньший размер, поддается анимированию и модификации. Одновременно уменьшается количество HTTP-запросов, а значит, и время обращения.

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

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

Здесь нет еще ни одного комментария...

Оставить комментарий

 

Опрос

Какие материалы стоит добавлять на сайт в большей степени?


 

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Скачать
v.1.4.1 или v.3.0.0

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

Архив материалов:

«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031 

^