.SVG вариант №

Файл SVG представляет собой файл скалярной векторной графики, который использует текстовый формат на основе XML для описания внешнего вида изображения. Слово «масштабируемый» относится к тому факту, что SVG можно масштабировать до разных размеров без потери качества. Текстовое описание таких файлов делает их независимыми от разрешения. Это один из наиболее часто используемых форматов для создания веб-сайтов и печати графики для обеспечения масштабируемости. Однако этот формат можно использовать только для двумерной графики. Файлы SVG можно просматривать/открывать практически во всех современных браузерах, включая Chrome, Internet Explorer, Firefox и Safari.

Краткая история

Спецификации SVG доступны в качестве открытого стандарта Консорциумом World Wide Web (W3C) с 1999 года. До этого аналогичные спецификации форматов файлов в шести различных форматах были представлены W3C до 1998 года. В 2011 году к спецификациям было применено обновление, и они получили версию 1.1. . В 2016 году SVG 2 была опубликована как более новая версия, включающая функции в дополнение к функциям SVG 1.1.

Спецификации формата файла

Объектная модель документа SVG (DOM) закладывает основу для всех спецификаций и интерфейсов, соответствующих конкретным разделам спецификаций. Средства просмотра SVG должны реализовывать интерфейсы SVG DOM в соответствии со спецификациями W3C. Его DOM предоставляет несколько интерфейсов для различных типов данных и элементов.

SVG-фигуры

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

  • Прямоугольник
  • Круг
  • Эллипс
  • Линия
  • Полилиния
  • Полигон
  • Дорожка

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

Контуры — Контуры используются для представления простых и сложных контуров фигур. Коды используются для определения характера операции. Например, M используется для Move To, L используется для Line To, Z используется для закрытия пути и так далее.

Основные фигуры. Можно рисовать прямолинейные пути и пути, состоящие из ряда соединенных прямолинейных сегментов (полилиний), а также замкнутые многоугольники, окружности и эллипсы. Прямоугольники и прямоугольники со скругленными углами также являются стандартными элементами.

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

Раскрашивание. Фигуры могут быть заполнены и/или обведены цветом, градиентом или узором, что позволяет сделать их непрозрачными или иметь любую степень прозрачности. Элементы конца линии, такие как стрелки или символы, появляющиеся в вершинах многоугольника, представлены маркерами.

Цвет — спецификации SVG позволяют применять цвета ко всем видимым элементам SVG либо напрямую, либо с помощью заливки, обводки и других свойств. Различные цветовые коды могут использоваться для указания, например, черного или синего, шестнадцатеричного представления, десятичного числа или в процентах от формы RGB.

Градиенты и узоры. Фигуры в файле SVG могут быть заполнены или обведены сплошными цветами, градиентами или повторяющимися узорами.

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

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

Связывание — изображения SVG могут иметь гиперссылки на другие документы. Это достигается с помощью языка компоновки XML или XLink. Это позволяет создавать определенные состояния просмотра, которые используются для увеличения/уменьшения масштаба определенной области или для ограничения просмотра определенным элементом.

Сценарии. Как и в случае с HTML, все аспекты документа SVG доступны для манипулирования с помощью сценариев. Объекты SVG DOM предоставляют руководство по достижению этого с помощью элемента и атрибута SVG. Скрипты заключены в элементы тега script и могут запускаться в ответ на события указателя, клавиатуры или документа по мере необходимости.

Анимация — элементы DOM , а также позволяет включать анимацию для содержимого SVG. Конечно, это недостижимо без использования скриптов и встроенных таймеров. Эти анимации могут быть непрерывными и могут быть зациклены, а также повторяться, в то же время реагируя на пользовательские события.

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

Примеры

Следующие строки показывают, как круг представлен с помощью скрипта SVG.

<html>
<body>

<h1>My first SVG</h1>

<svg width#"100" height#"100">
  <circle cx#"50" cy#"50" r#"40" stroke#"green" stroke-width#"4" fill#"yellow" />
</svg>

</body>
</html>

Следующие строки кода показывают, как использовать блок для рендеринга текста в SVG.

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>

Использованная литература

See Also