Учебники

HTML5 — SVG

Август 22, 2018

SVG расшифровывается как S calable V ector G raphics и является языком для описания 2D-графики и графических приложений в XML, а затем XML визуализируется средством просмотра SVG.

SVG в основном полезен для диаграмм векторного типа, таких как круговые диаграммы, двумерные графики в системе координат X, Y и т. Д.

SVG стала Рекомендацией W3C 14. Январь 2003 года, и вы можете проверить последнюю версию спецификации SVG в Спецификации SVG .

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

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

Встраивание SVG в HTML5

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

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

Firefox 3.7 также представил опцию конфигурации («about: config»), где вы можете включить HTML5, используя следующие шаги:

  • Введите about: config в адресную строку Firefox.

  • Нажмите «Я буду осторожен, я обещаю!» Кнопка на предупреждающем сообщении, которое появляется (и убедитесь, что вы придерживаетесь его!).

  • Введите html5.enable в панель фильтров в верхней части страницы.

  • В настоящее время он будет отключен, поэтому щелкните по нему, чтобы переключить значение в true.

Введите about: config в адресную строку Firefox.

Нажмите «Я буду осторожен, я обещаю!» Кнопка на предупреждающем сообщении, которое появляется (и убедитесь, что вы придерживаетесь его!).

Введите html5.enable в панель фильтров в верхней части страницы.

В настоящее время он будет отключен, поэтому щелкните по нему, чтобы переключить значение в true.

Теперь ваш анализатор Firefox HTML5 должен быть включен, и вы сможете поэкспериментировать со следующими примерами.

HTML5 — SVG Circle

Ниже приведена HTML5-версия примера SVG, в котором круг будет нарисован с помощью тега <circle>.

Live Demo 

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</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>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — прямоугольник SVG

Ниже приведена HTML5-версия примера SVG, который рисует прямоугольник с помощью тега <rect> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</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>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Line

Ниже приведена HTML5-версия примера SVG, которая рисует линию с помощью тега <line> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</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>

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

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Ellipse

Ниже приведена HTML5-версия примера SVG, в котором эллипс будет отображаться с помощью тега <ellipse>.

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</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>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Polygon

Ниже приведена HTML5-версия примера SVG, который рисовал бы полигон с помощью тега <polygon> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</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>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Polyline

Ниже приведена HTML5-версия примера SVG, которая рисует полилинию с помощью тега <polyline> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</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>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — градиенты SVG

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

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

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</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>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Star

Ниже приведена HTML5-версия примера SVG, которая будет рисовать звезду с помощью тега <polygon>.

Live Demo 

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

42
Share: