—»     —»   Масштабируемая векторная графика (SVG) - Исследование
  Раздел: Образование и Изучение   Нет комментариев  

Масштабируемая векторная графика (SVG) - Исследование

Векторная графика широко применима в печатной продукции. Что касается веб-сайта, то здесь мы также можем использовать векторную графику посредством SVG или Scalable Vector Graphics (масштабируемая векторная графика). В официальной спецификации W3.org SVG описывается следующим образом:

Язык для описания двумерной графики посредством XML. SVG позволяет нам использовать три типа графических объектов: векторные графические фигуры (например, пути, состоящие из прямых и кривых линий), изображений и текст.

Масштабируемая векторная графика (SVG) - Исследование

Технология была доступна аж с 1999 года, и 16 августа 2011 года вошла в список рекомендаций W3C. Тем не менее, SVG до сих пор не так часто используется, несмотря на множество преимуществ в использовании векторной графики вместо растровой.

Преимущества масштабируемой векторной графики

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

Независимость от разрешения

Растровая графика (или Bitmap) зависит от разрешения, так как она создана при помощи пикселей. Если такой графический элемент увеличить в размере, то сразу станут видны большие квадратики. С векторной же графикой такого не происходит, потому что она не зависит от разрешения, а вместо этого построена на математических вычислениях, что позволяет нам увеличить ее до любых размеров и не терять в качестве.

Сокращение HTTP-запросов

Масштабируемая векторная графика можете быть встроена напрямую в HTML-документ при помощи тега svg, так что браузеру не нужно будет дополнительный запрос для графики. Это также положительно сказывается на производительности веб-сайта.

Стилизация и скриптинг

Прямая интеграция при помощи тега svg также позволит нам стилизовать графику при помощи CSS. Мы можем изменять такие параметры объекта как цвет фона, непрозрачность, границы и так далее, таким же образом, как это происходит в HTML. Мы также можем управлять графикой посредством javascript.

Возможность анимации и редактирования

SVG-объект может быть анимирован при использовании анимационного элемента или посредством JS-библиотеки вроде jQuery. SVG-объект также может быть отредактирован посредством любого текстового редактора или графического ПО вроде Inkscape (бесплатен) или Adobe Illustrator.

Меньший размер файла

SVG имеет меньший размер файлов в сравнении с растровой графикой.

Рисуем простые фигуры, используя SVG

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

Линия

Для того чтобы нарисовать линию при помощи SVG, мы можем использовать элемент «line». Этот элемент используется для рисования одной прямой линии, поэтому он будет состоять всего из двух точек: начальной и завершающей.

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Как вы можете видеть выше, координата начальной точки линии указана в первых двух атрибутах х1 и х2, а координата завершающей точки указана атрибутами y1 и y2.

Здесь также есть два других атрибута: stroke и stroke-width, которые отвечают за цвет и ширину границы. С другой стороны, мы также можем определить эти атрибуты в строчном стиле, следующим образом:

style="stroke-width:1; stroke:rgb(0,0,0);"

и это даст нам тот же результат.

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо линии

Ломаная линия

Здесь все очень сходится с «line», но посредством элемента «polyline» мы можем нарисовать несколько линий, вместо одной. Вот пример:

<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Элемент «polyline» имеет атрибуты точек, которые содержат все координаты линий.

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо ломаной линии

Прямоугольник

Нарисовать прямоугольник мы можем так же просто, только при помощи элемента «rect». Нам только лишь нужно будет указать ширину и высоту:

<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо прямоугольника

Окружность

Мы также можем нарисовать окружность посредством элемента «circle». В этом примере мы нарисуем окружность с радиусом 100, который определяется атрибутом r:

<svg>
<circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Первые два атрибута, cx и cy, определяют центральную координату окружности. В вышеприведенном примере мы выставили 102 как для координаты x, так и для y. Если эти атрибуты не будут заданы, то по умолчанию они будут составлять 0.

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо окружности

Эллипс

Мы можем нарисовать эллипсы посредством элемента «ellipse». Здесь все работает примерно так же, как и с кругом, но на этот раз мы можем управлять отдельно радиусом линии х и радиусом линии y посредством атрибутов rx и ry.

<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо эллипса

Многоугольник

С помощью элемента «polygon» мы можем рисовать многоугольники, фигуры с несколькими углами и сторонами вроде треугольника, восьмиугольника. Пример:

<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо многоугольника

Применение редактора векторной графики

Как видно, рисовать простые фигуры при помощи SVG в HTML довольно просто. Тем не менее, если нам нужен более сложный объект, то этот метод нам уже не подойдет.

К счастью, как мы уже указали выше, мы можем использовать редактор векторной графики вроде Adobe Illustrator или Inkscape для того, чтобы проделать эту работу. Если вы знакомы с этим ПО, то вы без труда сможете рисовать объекты при помощи удобного интерфейса, нежели при помощи кода HTML.

Если вы работаете в Inkscape, то можете сохранить вашу векторную графику в формате SVG, а затем открыть его в редакторе кода. Теперь у вас есть возможность найти все SVG-коды в файле. Скопируйте все коды, и вставьте их в ваш HTML-документ.

Либо вы также можете встроить сам svg-файл при помощи одного из следующих элементов: embed, iframe, object.

<object data="images/ipod.svg" type="image/svg+xml"></object>

Результат будет схожим.

В данном примере мы использовали Apple iPod с OpenClipArt.org.

Масштабируемая векторная графика (SVG) - Исследование

* Посмотреть демо iPod

Браузерная поддержка масштабируемой векторной графики

Что касается поддержки в браузерах, то масштабируемая векторная графика уже сейчас отлично поддерживается во многих современных браузерах за исключением IE8 и более ранних версий. Но это можно исправить при помощи javascript-библиотеки под названием Raphael.js. Чтобы облегчить задачу, мы воспользуемся инструментом ReadySetRaphael.com, чтобы конвертировать наш SVG-код в формат, поддерживаемый Raphael.

Масштабируемая векторная графика (SVG) - Исследование

Для начала, скачайте и включите библиотеку Raphael.js в ваш HTML-код. Затем, загрузите svg-файл на сайт, скопируйте и вставьте сгенерированный код в следующую функцию load:

window.onload=function() { 
//the Raphael code goes here
}

Внутри тега body вставьте следующий div с id атрибутом rsr.

<div id="rsr"></div>

И на этом мы закончили! Посмотрите пример, приведенный по ссылке ниже.

* Посмотреть демо Raphael

В завершение

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

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

* An Introduction to SVG – W3 Schools (Введение в SVG)
* Resolution Independent with SVG – Smashing Magazine (SVG: не будем зависеть от разрешения)
* Why Aren’t You Using SVG? – NetTuts (Почему бы не использовать SVG?)

Спасибо за чтение, и надеемся, что данная статья окажется полезной вам!

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: векторная графика
Опубликовал Design FactoRy   Прочитано (раз): 14181   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Анализ крови д димер
анализ крови д димер
clinica-shmidta.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Мега сайт
мега сайт
ru.1megadarknet.net
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031