Учебники

SVG — Обзор

Январь 15, 2019

SVG, Scalable Vector Graphics — это язык на основе XML для определения векторной графики.

SVG предназначен для отображения изображений через Интернет.

Будучи векторными изображениями, SVG-изображение никогда не теряет качества, независимо от того, насколько они уменьшены или изменены.

Изображения SVG поддерживают интерактивность и анимацию.

SVG — это стандарт W3C.

Другие форматы изображений, такие как растровые изображения, также могут быть забиты SVG-изображениями.

SVG хорошо интегрируется с XSLT и DOM HTML.

Используйте любой текстовый редактор для создания и редактирования изображений SVG.

Будучи основанными на XML, изображения SVG доступны для поиска, индексации и могут быть написаны и сжаты.

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

Хорошее качество печати при любом разрешении

SVG — открытый стандарт

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

Размер может быть большим даже для маленького изображения.

Следующий фрагмент XML можно использовать для рисования круга в веб-браузере. 

 <svg width = "100" height = "100">
    <circle cx = "50" cy = "50" r = "40" stroke = "red" stroke-width = "2" fill = "green" />
 </ SVG>

Вставьте SVG XML прямо в HTML-страницу.

testSVG.htm 

 <HTML>
    <title> SVG Image </ title>
    <Тело>
   
       <h1> Образец SVG-изображения </ h1>
      
       <svg width = "100" height = "100">
          <circle cx = "50" cy = "50" r = "40" stroke = "red" stroke-width = "2" fill = "green" />
       </ SVG>
   
    </ Body>
 </ Html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. В Internet Explorer элементы управления ActiveX необходимы для просмотра изображений SVG.

Элемент <svg> указывает начало изображения SVG.

Атрибуты width и height элемента <svg> определяют высоту и ширину SVG-изображения.

В приведенном выше примере мы использовали элемент <circle> для рисования круга.

Атрибуты cx и cy представляют центр круга. Значение по умолчанию (0,0). Атрибут r представляет радиус окружности.

Другие атрибуты обводки и ширины обводки контролируют контур круга.

Атрибут fill определяет цвет заливки круга.

Закрывающий тег </ svg> указывает на конец изображения SVG.

42
Share: