<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>Элемент <polyline> содержит атрибут points, который используется для указания координаты точек. ПрямоугольникПрямоугольник выводится с помощью элемента <rect>. Нужно определить ширину и высоту.<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>Начало отрезка определяется атрибутами x1 и y1, а конечная точка определяется координатами в атрибутах x2 and y2.Также имеется два других атрибута (stroke и stroke-width) которые используются для определения цвета и ширины линии соответственно. ПолилинияДанный объект похож на <line>, но с помощью элемента <polyline> можно рисовать несколько линий сразу.<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic - масштабируемая векторная графика). В соответствии со спецификацией W3.org SVG определяется как:Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (наппример, пути, состоящие из прямых линий и кривых), изображения и текст.Несмотря на то, с августа 2011 года SVG включенов рекомендации W3C, данная технология практически не используется в веб проектах, хотя и имеет перед растровыми изображениями ряд преимуществ. В данной серии уроков мы представим, как работать с SVG элементами на веб страницах.Преимущества SVGНезависимость разрешенияРастровые изображения зависят от разрешения. Графика приобретает непрезентабельный вид при изменении размеров до определнных масштабов. С векторной графикой такая ситуация невозможна в принципе, так как все представляется математическими выражениями, которые автоматически пересчитываются при измении масштаба, и качество сохраняется в любых условиях.Уменьшение количества запросов HTTPSVG может быть встроено непосредственно в документ HTML с помощью тега svg, поэтому браузер не нуждается в запросах для обслуживания графики. Такой подход хорошо влияет на характеристики загрузки веб сайта.Стили и скриптыВстраивание с помощью тега svg также позволяет легко определять стили для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет фона, прозрачность, рамки и так далее. Подобным же образом можно манипулировать графикой с помощью javascript.Легко редактировать и анимироватьОбъекты SVG можно анимировать с помощью CSS или javascript. Также объекты SVG можно модифицировать с помощью текстового редактора.Меньший размер файлаSVG имеет меньший размер файла по сравнению с растровой графикой.Базовые формы SVGВ соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег <svg> ... </svg>. Рассмотрим базовые элементы подробно.ЛинияДля вывода линии в SVG используется элемент . Он рисует отрезок, для которого нужно определить две точки: начало и конец.<svg>
Загрузка. Пожалуйста, подождите...
SVG: основы векторной графики в HTML » WEB-HELP.YA1.RU - ВСЕ ДЛЯ ВЕБМАСТЕРА!
Комментариев нет:
Отправить комментарий