HTML5 SVG

HTML5 SVG — Scalable Vector Graphics язык для написания двухмерной графики с использованием системы координат X и Y. На этой странице примеры рисования графики SVG.

Команда W3C рекомендует SVG для веб, смотрите последнюю версию спецификации SVG.

Современные веб-браузеры поддерживают графику SVG так же, как и обычные изображения PNG, GIF, JPG. Пользователи старых Internet Explorer могут установить дополнение Adobe SVG Viewer, чтобы иметь возможность увидеть графику SVG HTML5 в старых браузерах.

Чем отличается SVG от Canvas можно узнать на странице HTML5 Canvas и SVG. Пример применения SVG для веб на странице SVG новые возможности графики и SVG Спрайты.

SVG в HTML5

HTML5 позволяет подключать embeding SVG напрямую, используя тег <svg> // графика SVG // </ svg>, и имеет следующий простой синтаксис:

<svg xmlns="http://www.w3.org/2000/svg">
// графика SVG
</svg>

Примеры SVG

Примеры рисования фигур в SVG.

Круг SVG

Нарисовать круг SVG тегом <circle>:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

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

Нарисовать квадрат SVG тегом <rect>:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <rect id="redrect" width="300" height="100" fill="red" />
</svg>

Линия SVG

Нарисовать косую линию SVG тегом <line>:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
</svg>


вы можете использовать стили CSS, чтобы добавить границу, заливку цветом, ширину хода и т.д.

Эллипс SVG

Нарисовать эллипс SVG тегом <ellipse>:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>

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

Нарисовать многоугольник SVG тегом <polygon>:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <polygon points="20,10 300,20, 170,50" fill="red" />
</svg>

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

Нарисовать ломаную линию SVG тегом <polyline>:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>

Градиент SVG

Градиент SVG с использованием тегов <ellipse> и <radialGradient> для радиального градиента. Аналогичным образом вы можете использовать тег <linearGradient> для рисования линейного градиента SVG.

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
    <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
  </radialGradient>
</defs>
  <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
</svg>

SVG иконки.

автор HTML1167
htmlhook.ru | Скрипты для веб-приложений