Этот урок связан с проектом Работа с SVG

Работа с SVG. Вступление

Формат SVG (масштабируемая векторная графика) давным-давно “пряталась в тени”, хотя был разработан ещё в 1999 году; главной причиной непопулярности данного формата являлась слабая браузерная поддержка, особенно в Internet Explorer.

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

Согласно акрониму, формат SVG - это векторный формат: состоит из прямых, кривых, областей, заполненных цветом. Таким образом можно рисовать карты, логотипы, диаграммы, картинки и так далее. SVG так же можно использовать в качестве шрифта.

Главные преимущества формата SVG:

  • SVG изображения являются масштабируемыми без потери качества.
  • Внутри SVG ничем не отличается от формата XML, так что его можно создать при помощи обычного Блокнота.
  • Размер файла будет небольшим, т.к. перед нами векторный формат. (так же SVG можно сжимать, используя gzip).
  • Как и с XML, SVG изображением можно управлять при помощи JavaScript и других языков, с целью анимации, добавления интерактивности и много другого.
  • Вставить SVG можно через обычный тег <img />. Так же можно использовать <object> и <iframe>. (В том числе можно применить и тег <svg>).

Если взглянуть на SVG в текстовом редакторе, то увидите следующее:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id=Layer_1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">

“Так, стоп! Это же смахивает на обычный файл XHTML!” Так и есть. Содержимое представляет собой координаты точек и кривых: вручную такое сделать практически невозможно, поэтому следует воспользоваться специальным софтом. (Adobe Illustrator или Flash, а так же другие программы).

Разница между SVG и Canvas

<canvas> так же является HTML5 элементом, где можно отображать изображения. Однако в случае использования <canvas>, результат всегда отображается в растровом формате. Если вам необходимо изображение с поддержкой свободного масштабирования, то используйте SVG.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/970/Web-Developer-Reading-List-Introduction-to-SVG
Перевел: Станислав Протасевич
Урок создан: 24 Декабря 2014
Просмотров: 11425
Правила перепечатки

5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

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

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

^ Наверх ^