Пример страницы
жүктеу/скачать 4.01 Mb.
|
| 2.2 Понятие и применение SVG
Файлы SVG, в отличие от изображений, размещенных на сайтах, к которым мы привыкли, относятся к группе векторной графики. Это универсальный формат, который является производным от XML и не требует каких-либо лицензий или патентов. Мы можем использовать его для статических изображений, а также мы его анимируем. Файл кода хранится в виде текста, что означает, что мы можем легко открыть его даже в блокноте (в крайнем случае) и отредактировать! Мы можем использовать этот формат в HTML-коде без каких-либо проблем, потому что он был разработан для использования на веб-сайтах. Более того, мы можем встраивать его непосредственно в код, что позволяет нам манипулировать графическим кодом с использованием CSS и Javascript! Разница между векторной и растровой графикой [20]. Большинство изображений, которые мы можем найти на веб-страницах, являются растровыми. Напротив, как я упоминал ранее, SVG - векторный формат. Самое большое различие между этими двумя типами графики - это способ ее сохранения. Когда дело доходит до растра, мы можем сохранить его в формате JPG, GIF или PNG, и он содержит информацию о каждой точке / пикселе. Примером может служить фотография, сделанная цифровой камерой. В отличие от растра, векторная графика содержит математическое описание геометрических фигур, локализованных в системе координат (вместе с описанием цвета). Это позволяет воссоздать изображение без потери резкости в любом качестве (из-за его масштабируемости). Благодаря этому вектор идеально подходит для иллюстраций или диаграмм. Но он не может быть способен на сложную графику и фотографии. Рисунок 1 - Маштабность графического элемента. Как построить графику SVG? Поскольку файлы SVG основаны на HTML, человек, у которого нет проблем с HTML (есть кто-то, кто имеет;;)), может понять его структуру без особых проблем. Пример кода файла SVG выглядит следующим образом: Рисунок 2 - Графический элементы. Круг с центром, расположенный в точке 80 на оси X и 60 на оси Y и диаметром 60 точек. Он характеризуется кодом заполнения # ff8e36 и черной рамкой, размер которой составляет 3 балла. Также возможно получить эллиптическую форму с помощью тега эллипса. x="200" y="0" justify" > height: 120px; fill: #000; stroke: #ff8e36; stroke-width: 3px"/> Четырехугольник расположен в точке 200 на оси X и в точке 0 на оси Y, размеры которой составляют 120 пикселей по высоте и 180 пикселей по ширине. Он заполнен черным и оранжевым цветами и имеет ширину 3 пикселя. Вы заметили разницу, определяющую характеристику формы? Вот так! Мы можем описать фигуры двумя различными способами: с помощью параметра или с помощью CSS. Файлы SVG принимают большинство CSS-свойств, что позволяет нам добавлять такие эффекты, как наведение, переход и другие. Я опишу это в следующей части этой статьи. […] Структура файлов SVG позволяет нам встраивать элементы в группу и преобразовывать их. В нашем примере окружность и квадрат находятся в группе, которая была перемещена на 10 точек по оси X и 20 точек по оси Y. id="linia" fill="none" stroke="#cc0000" stroke-width="5" d="m450,120.8c-10.5-39.2,55.8-45.7,55.8-45.7s30.3,3.2,22.6-42"/> Тэг пути определяет d-параметр пути, который содержит список точек и т. Д. Я рекомендую нам Adobe Illustrator или InkScape (это бесплатно) на данный момент, потому что почерк труден и отнимает много времени. SVG анимация SVG-файлы могут быть анимированными, что может привести к повышению эффективности сайта. Например,преи мущество над анимированными GIF-изображениями - меньший размер (анимация генерируется) и больший контроль. Рисунок 3 – Анимация. Есть два способа создания анимации: Внутри SVG-файла: В этом методе мы определяем элемент xlink: href, который будет нашей ссылкой, и attributeName, который будет анимированным. Следующие два параметра должны быть описаны как значения, которым должно анимироваться выбранное свойство, и время, в которое оно должно появляться. Кроме того, по началу мы можем выбирать, когда ожидается запуск нашей анимации, тогда как repeatCount определяет количество повторений. В этом случае оно бесконечно. #prostokat { animation: rect 2s linear infinite;} @keyframes rect { 0% {height: 250px} 50% {height: 120px} 100% {height: 250px} } Я предполагаю, что все понятно. Почему? Поскольку элементы, внедренные в код HTML (не отображаются с использованием тега img), могут быть анимированы, как и любой другой элемент DOM в структуре сайта. Конечно, есть еще много возможностей оживить SVG. Мы можем даже запустить анимацию после щелчка или наведения мыши. Есть какие-то проблемы со скриптовой графикой и, например, анимировать с помощью перехода и изменить значение. Рисунок 4 - Анимация с изменением значений. Анимированные линии. Один из моих любимых способов использования SVG - анимация пути. Рисунок 5 - Линейная анимация. Чтобы достичь этого эффекта, нам нужно только нарисовать контур, присвоить ему цвет, контур, а затем определить пунктирную линию с помощью параметра stroke-dasharray. Интервал должен быть суммой длины пути. Когда дело доходит до анимации, нам просто нужно изменить значение stroke-dashoffest, чтобы переместить пунктирную линию. Таким образом, мы подражаем рисованию линии. Дополнительные возможности SVG. Это правда, что есть что-то вроде маски CSS, но редко мы можем ее найти и использовать из-за отсутствия полной поддержки браузеров. Холст как альтернатива. Альтернативой SVG является Canvas, благодаря которой мы также можем рисовать фигуры, а затем анимировать их, но в этом случае необходим Javascript. Ранее аналогичных эффектов можно было достичь с помощью Flash, который также требует наличия плагина в вашем браузере. Большим преимуществом SVG является возможность освещения сайта без использования сценариев или внешних решений. жүктеу/скачать 4.01 Mb. Достарыңызбен бөлісу:
|