ИЗБРАННЫЕ ПРИМЕРЫ 2013 [ОБЪЕКТЫ SVG]

SVG (Scalable Vector Graphics standard, стандарт масштабируемой векторной графики) развился на основе XML как средство обеспечения векторной графической поддержки для Web-браузеров.
Технология SVG позволяет объединить в одном формате и текст, и графику, и анимацию, и интерактивные компоненты.
В SVG существуют три типа графических примитивов - формы, растровые рисунки и текст.
Формы представляют собой либо отдельные линии, либо распространенные графические примитивы - овалы, прямоугольники и др.
Рисунки представляют собой импортированные изображения в других форматах.
Формат SVG поддерживает различные виды анимации.
Анимация может быть описана заранее или задаваться программно.
Назначая элементам рисунка различные ссылки, можно создавать карты ссылок.
Карта ссылок - это разбиение одного изображения на несколько частей разной формы, каждая из которых связана с отдельной Web-страницей.
Поскольку этот стандарт основан на XML, SVG файл может содержать не только элементы, предназначенные для визуального представления, но и метаданные, предназначенные для описания альтернативного текстового представления изображения.
В настоящее время при создании Web-страниц в качестве текстовой альтернативы рисунков используется свойство alt тега <img>.
В отличие от этого, SVG рисунки могут содержать метаданные (т.е. данные о данных) в самых разных форматах - таких как Resource Description Framework (RDF), Meta Content Framework (MCF) и других.
Стандарт SVG разработан и поддерживается консорциумом World Wide Web и в данный момент имеет статус рекомендации.
Сегодня практически все графические редакторы позволяют работать с рисунками в формате SVG.
Однако в Internet Explorer и Netscape Navigator эта поддержка реализована только на уровне plug-in’ов.
Загрузите Amaya - экспериментальный браузер консорциума W3, который позволяет заодно просматривать и SVG рисунки.
<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>
Атрибуты SVG
<rect> - Прямоугольник

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

или

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

<circle> - круг

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

<ellipse> - эллипс

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

<line> - линия

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

<polygon> - Элемент используется для создания графических объектов которые содержат по меньшей мере трех сторон.

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

<polyline> - Элемент используется для создания любой формы, которая состоит только из прямых линий

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>

<path> - Элемент используется для определения пути

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>

<text> - Элемент используется для определения текста.

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>

stroke
stroke-width
stroke-linecap
stroke-dasharray - свойства могут быть применены к любой линии, текст и контуры элементов, таких как круг.

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>

или

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>

или

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="16">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>

или

см. пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>

АНИМАЦИЯ

begin и dur - временной промежуток анимации. При полной загрузке изображения запускается таймер, когда значение этого таймера достигнет begin, фигура rect начнет свое преобразование. Время, за которое прямоугольник станет непрозрачным указывается в атрибуте dur.
repeatCount - количество повторов анимации.