SVG - Краткое руководство

Что такое SVG?

SVG, масштабируемая векторная графика - это язык на основе 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>
   <body>
   
      <h1>Sample SVG Image</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 для просмотра изображений SVG требуются элементы управления ActiveX.

Как SVG интегрируется с HTML

Элемент <svg> указывает начало изображения SVG.
Атрибуты ширины и высоты элемента <svg> определяют высоту и ширину изображения SVG.
В приведенном выше примере мы использовали элемент <circle> для рисования круга.
Атрибут cx и cy представляет центр круга. Значение по умолчанию (0,0). Атрибут r представляет радиус круга.
Другие атрибуты stroke и stroke-width контролируют очертание круга.
Атрибут fill определяет цвет заливки круга.
Закрывающий тег </svg> указывает конец изображения SVG.

SVG предоставляет ряд форм, которые можно использовать для рисования изображений. Ниже приведены общие формы.

Sr. No.	Тип и описание формы
1	прямоугольник Используется для рисования прямоугольника.
2	круг Используется для рисования круга.
3	эллипс Используется для рисования эллипса.
4	линия Используется для рисования линии.
5	многоугольник Используется для рисования замкнутой формы, состоящей из соединенных прямых линий.
6	ломаная линия Используется для рисования открытой формы, состоящей из соединенных прямых линий.
7	путь Используется для рисования любого пути.

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

Декларация

Ниже приводится объявление синтаксиса <text>элемент. Мы показали только основные атрибуты.

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Атрибуты

Sr. No.	Атрибут и описание
1	x - координаты глифов по оси x.
2	y - координаты глифов по оси y.
3	dx - сдвиг по оси абсцисс.
4	dy - сдвиг по оси ординат.
5	rotate - вращение применяется ко всем глифам.
6	textlength - длина отрисовки текста.
7	lengthAdjust - тип корректировки с отображаемой длиной текста.

пример

testSVG.htm

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

Вывод

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

Текст с поворотом

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

Вывод

Многострочный текст

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

Вывод

Текст гиперссылки

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

Вывод

SVG поддерживает несколько свойств обводки.

Ниже приведены основные используемые свойства обводки.

Sr. No.	Тип и описание хода
1	stroke - определяет цвет текста, линии или контура любого элемента.
2	stroke-width - определяет толщину текста, линии или контура любого элемента.
3	stroke-linecap - определяет разные типы окончания линии или контура любого пути.
4	stroke-dasharray - используется для создания пунктирных линий.

пример

testSVG.htm

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

Вывод

Ширина штриха

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

Вывод

штрих-линия

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Вывод

инсульт-дашаррей

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Вывод

SVG использует элемент <filter> для определения фильтров. Элемент <filter> использует атрибут id для его уникальной идентификации. Фильтры определяются внутри элементов <def>, а затем на них ссылаются графические элементы по их идентификаторам.

SVG предоставляет богатый набор фильтров. Ниже приводится список наиболее часто используемых фильтров.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - фильтр падающих теней
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Декларация

Ниже приводится объявление синтаксиса <filter>элемент. Мы показали только основные атрибуты.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Атрибуты

Sr. No.	Имя и описание
1	filterUnits- единицы для определения области действия фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих подобласть фильтра. Если filterUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'filter'. Если filterUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающего прямоугольника на ссылающемся элементе на месте в то время, когда используется элемент 'filter'. По умолчанию - userSpaceOnUse.
2	primitiveUnits- единицы для определения области действия фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих подобласть фильтра. Если filterUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'filter'. Если filterUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающего прямоугольника на ссылающемся элементе на месте в то время, когда используется элемент 'filter'. По умолчанию - userSpaceOnUse.
3	x- координата по оси X ограничивающего прямоугольника фильтра. Неисправность - 0.
4	y- координата по оси ординат ограничивающего прямоугольника фильтра. По умолчанию 0.
5	width- ширина рамки фильтра. По умолчанию 0.
6	height- высота ограничивающей рамки фильтра. По умолчанию 0.
7	filterRes - числа, представляющие области фильтра.
8	xlink:href - используется для обозначения другого фильтра.

пример

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

Два элемента <filter>, определенные как filter1 и filter2.
Эффект фильтра feGaussianBlur определяет эффект размытия с помощью степени размытия с помощью stdDeviation.
in = "SourceGraphic" определяет, что эффект применим ко всему элементу.
Эффект фильтра feOffset используется для создания эффекта тени. in = "SourceAlpha" определяет, что эффект применим для альфа-части графики RGBA.
Элементы <rect> связывают фильтры с помощью атрибута filter.

Вывод

Фильтр с эффектом тени

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Вывод

SVG использует элемент <pattern> для определения шаблонов. Шаблоны определяются с помощью элемента <pattern> и используются для заливки графических элементов мозаичным способом.

Декларация

Ниже приводится объявление синтаксиса <pattern>элемент. Мы показали только основные атрибуты.

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Атрибуты

Sr. No.	Имя и описание
1	patternUnits- единицы определения области действия паттернов. Он определяет систему координат для различных значений длины в шаблоне и для атрибутов, определяющих подобласть шаблона. Если patternUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'pattern'. Если patternUnits = "objectBoundingBox", значения представляют значения в долях или процентах ограничивающего прямоугольника на ссылающемся элементе, находящемся на месте во время использования элемента 'pattern'. По умолчанию - userSpaceOnUse.
2	patternContentUnits- единицы для определения области содержимого паттерна. Он определяет систему координат для различных значений длины в шаблоне и для атрибутов, определяющих подобласть шаблона. Если patternContentUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент 'pattern'. Если patternContentUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент "шаблон". По умолчанию - userSpaceOnUse.
3	x- координата по оси X ограничивающего прямоугольника узора. Неисправность - 0.
4	y- координата по оси Y ограничивающей рамки узора. По умолчанию 0.
5	width- ширина ограничительной рамки узора. По умолчанию 0.
6	height- высота ограничивающего прямоугольника рисунка. По умолчанию 0.
7	preserveAspectRatio - для сохранения соотношения ширины и высоты исходного содержимого.
8	xlink:href - используется для обозначения другого шаблона.

пример

testSVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

Один элемент <pattern>, определенный как pattern1.
В шаблоне определяется окно просмотра и определяется путь, который должен использоваться в качестве шаблона.
в элементе rect, в атрибуте fill указывается url шаблона для заполнения прямоугольника шаблоном, созданным ранее.

Вывод

Градиент относится к плавному переходу одного цвета к другому цвету внутри фигуры. SVG предоставляет два типа градиентов.

Linear Gradients - Представляет собой линейный переход одного цвета в другой от одного направления к другому.
Radial Gradients - Представляет собой круговой переход одного цвета в другой от одного направления к другому.

Линейные градиенты

Декларация

Ниже приводится объявление синтаксиса <linearGradient>элемент. Мы показали только основные атрибуты.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Атрибуты

Sr. No.	Имя и описание
1	gradientUnits- единицы измерения для определения системы координат для различных значений длины в пределах градиента. Если gradientUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент градиента. Если patternContentUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент градиента. По умолчанию - userSpaceOnUse.
2	x1- координата вектора градиента по оси абсцисс. Неисправность - 0.
3	y1- координата по оси Y вектора градиента. По умолчанию 0.
4	x2- координата вектора градиента по оси абсцисс. Неисправность - 0.
5	y2- координата по оси Y вектора градиента. По умолчанию 0.
6	spreadMethod- указывает способ распространения градиента внутри графического элемента. По умолчанию - pad.
7	xlink:href - используется для обозначения другого градиента.

пример

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

Один элемент <linearGradient>, определенный как sampleGradient.
В linearGradient два смещения определяются двумя цветами.
в элементе rect, в атрибуте fill указывается url градиента для заполнения прямоугольника градиентом, созданным ранее.

Вывод

Радиальные градиенты

Декларация

Ниже приводится объявление синтаксиса <radialGradient>элемент. Мы показали только основные атрибуты.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Атрибуты

Sr. No.	Имя и описание
1	gradientUnits- единицы измерения для определения системы координат для различных значений длины в пределах градиента. Если gradientUnits = "userSpaceOnUse", значения представляют значения в текущей пользовательской системе координат на месте в то время, когда используется элемент градиента. Если patternContentUnits = "objectBoundingBox", значения представляют значения в долях или процентах от ограничивающей рамки на ссылающемся элементе, находящемся на месте в то время, когда используется элемент градиента. По умолчанию - userSpaceOnUse.
2	cx- координата по оси абсцисс центра наибольшего круга вектора градиента. Неисправность - 0.
3	cy- координата по оси ординат центра наибольшего круга вектора градиента. По умолчанию 0.
4	r- радиус центра наибольшего круга вектора градиента. Неисправность - 0.
5	fx- фокус радиального градиента. По умолчанию 0.
6	fy- фокус радиального градиента. По умолчанию 0.
7	spreadMethod- указывает способ распространения градиента внутри графического элемента. По умолчанию - pad.
8	xlink:href - используется для обозначения другого градиента.

пример

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

Один элемент <radialGradient>, определенный как sampleGradient.
В radialGradient два смещения определяются двумя цветами.
в элементе rect, в атрибуте fill указывается url градиента для заполнения прямоугольника градиентом, созданным ранее.

Вывод

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

пример

testSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Объяснение

SVG поддерживает функции JavaScript / ECMAScript. Блок скрипта должен быть в блоке CDATA с учетом поддержки символьных данных в XML.
Элементы SVG поддерживают события мыши, события клавиатуры. Мы использовали событие onClick для вызова функций javascript.
В функциях javascript документ представляет собой документ SVG и может использоваться для получения элементов SVG.
В функциях javascript событие представляет текущее событие и может использоваться для получения целевого элемента, для которого возникло событие.

Вывод

Элемент <a> используется для создания гиперссылки. Атрибут «xlink: href» используется для передачи IRI (интернационализированных идентификаторов ресурсов), которые дополняют URI (унифицированные идентификаторы ресурсов).

Декларация

Ниже приводится объявление синтаксиса <a>элемент. Мы показали только основные атрибуты.

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Атрибуты

Sr. No.	Имя и описание
1	xlink:show- для документации процессоров, поддерживающих XLink. По умолчанию новый.
2	xlink:actuate - для документации процессоров, поддерживающих XLink.
3	xlink:href - местонахождение указанного объекта.
4	target - используется, когда возможны цели для конечного ресурса.

пример

testSVG.htm

<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

Вывод