Сайт своими руками


Пособие для начинающих
Редактируем готовые шаблоны


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


» » Инструменты для работы с файлами в формате SVG.

Инструменты для работы с файлами в формате SVG.

  • Автор: Saah
  • |
  • Комментариев: 0
  • |
  • Просмотров: 316
Инструменты для работы с файлами в формате SVG.

Технически все, что нужно для создания SVG графики — это текстовый редактор, но вы будете намного счастливее, если программа для работы с графикой выполнит необходимые действия вместо вас. К счастью, в программе Adobe Illustrator при сохранении документа в раскрывающемся списке Формат (Format) можно выбрать пункт SVG (svg) и получить файл SVG! Если у вас нет программы Illustrator, загрузите редактор изображений Inkscape, который создан специально для работы с файлами в формате SVG (inkscape.org). Он работает в операционных системах Windows, OS X и Linux. Потребуется немного времени, чтобы вы к нему привыкли, но более выгодной цены вы не найдете (он бесплатный).

Добавление SVG-файлов на страницы.
Изображения SVG можно добавить на веб-страницы с помощью элементов object, embed, или iframe. Спецификация HTML5 позволяет добавлять элементы svg напрямую, как часть HTML-документа без элемента-контейнера. На сайте W3Schools представлено неплохое краткое описание различных вариантов вложения файлов svg, а также их преимущества и недостатки: www.w3schools.com/svg/svg_inhtml.asp. Этот материал быстро меняется, поэтому я рекомендую вам провести небольшое исследование последних достижений.

На момент написания статьи элемент object, указывающий на внешний файл .svg, поддерживался браузерами лучше всего, поэтому я использую этот метод в данном примере.
<!DOCTYPE html>
<html> <head><title>SVG 4 U</title></head>
<body>
<object width="450" height="200" type="image/svg+xml" data="svg4u.svg"></object>
<p>Дайте формату SVG шанс и посмотрите, на что он способен.</p>
</body>
</html>

Атрибуты width и height необходимы элементу object, чтобы зарезервировать определенное пространство под изображение. Если пространства окажется слишком мало, изображение будет обрезано. И, во избежание путаницы, рекомендуется указать тип файла (image/svg+xml), чтобы браузеры знали, что делать. Наконец, атрибут data указывает на сам файл .svg.

Дополнительные возможности формата SVG.
В нашем примере показан файл SVG, используемый для статических иллюстраций, но формат SVG обладает большими возможностями. Анимация Формат SVG включает в себя функции преобразования и перехода (те же самые, что и в CSS3), поэтому любую часть изображения SVG можно анимировать, используя только синтаксис svg.

Приведенный ниже код заставляет черный прямоугольник сокращаться и расширяться на 50% в ходе двухсекундного цикла.
<rect width="150" height="150" fill="black">

<animate attributeName="width" values="0%;50%;0%" dur="2s" repeatCount="indefinite"
/>
<animate attributeName="height" values="0%;50%;0%" dur="2s" repeatCount="indefinite"
/>
</rect>

Использование сценариев.
Так как все части файлов svg написаны на языке XML и являются частью DOM (структурированного набора объектов в документе), можно использовать код javascript, чтобы добавить рисункам в формате SVG какое-то поведение, например анимацию. Также можно использовать javascript для динамической отрисовки изображений на основе пользовательского ввода в режиме реального времени, например для создания диаграммы или графика, реагирующего на значения, вводимые в форму.

Использование стилей.
Вы можете изменять внешний вид элементов в изображениях SVG с помощью CSS.

Доступность.
Содержимое изображения SVG указывается в XML-файле, так что оно потенциально более доступно, чем элемент canvas, существующий в виде абстрактной сетки пикселов. Кроме того, в элемент svg можно добавить теги title и description.


Людям интересно:


Статья опубликована: 28-09-2016, 04:54

Сохраните для себя


Оставьте комментарий.
Ваше мнение будет полезно посетителям сайта:




Имя:* E-Mail:*
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите код: *
Использование материалов сайта приветствуется. При копировании и размещении данной информации на сторонних ресурсах, ссылка на сайт SiteY.ru желаема.