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

Стандарты 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-запросов, а значит, и время обращения.

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