Руководство по HTML5 SVG

SVG означает Scalable Vector Graphics и это язык для написания двухмерной графики и графических приложений в XML. Файл XML в браузере виден как SVG. SVG в основном используется для векторной графики в X, Y системе координат и т.д…

SVG стал рекомендоваться W3C 14 января 2003 года и вы можете проверить последнюю версию спецификации SVG в « спецификации SVG» .

Просмотр SVG файлов:

Большинство веб-браузеров могут отображать SVG так же, как они могут отображать PNG, GIF, JPG. Пользователи Internet Explorer могут установить Adobe SVG Viewer , чтобы иметь возможность увидеть SVG в этом браузере.

Embeding SVG в HTML5

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




  <svg xmlns="http://www.w3.org/2000/svg">
    ...
  </svg>
  


Примеры использования svg.

Круг SVG в HTML5

Ниже пример SVG версии HTML5, с использованием тега <circle> :



<!DOCTYPE html>
<head>
<title>Круг SVG в HTML5</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Круг SVG в HTML5</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>


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

Ниже пример SVG версии HTML5, с использованием тега <rect>:



<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Прямоугольник SVG в HTML5</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>


SVG линии в HTML5

Ниже пример SVG версии HTML5, с использованием тега <line>:



<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>SVG линии в HTML5</h2>
<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>
</body>
</html>


Вы можете использовать атрибут стиля, который позволяет установить дополнительную информацию, как стиль обводки и заливки цвета, ширина хода и т.д.

Эллипс SVG в HTML5

Ниже пример SVG версии HTML5, с использованием тега <ellipse>:



<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Эллипс SVG в HTML5</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>


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

Ниже пример SVG версии HTML5, с использованием тега <polygon>:



<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Многоугольник SVG в HTML5</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon  points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>


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

Ниже пример SVG версии HTML5, с использованием тега <polyline>:



<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Ломаная линия SVG в HTML5</h2>
<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>
</body>
</html>


Градиент SVG в HTML5

Ниже пример SVG версии HTML5, с использованием тега <ellipse> и будет использовать тег <radialGradient> определит SVG радиальным градиентом.

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



<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Градиент SVG в HTML5</h2>
<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>
</body>
</html>


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>