y - SVG

y
=

Атрибут **`y`** определяет координату по оси y в пользовательской системе координат.

Этот атрибут можно использовать для следующих SVG-элементов:

* `<cursor>` (en-US)
* `<feBlend>`
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDropShadow>` (en-US)
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<foreignObject>`
* `<glyphRef>` (en-US)
* `<image>`
* `<mask>` (en-US)
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>` (en-US)
* `<text>`
* `<tref>` (en-US)
* `<tspan>` (en-US)
* `<use>`
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="20" x="20" width="60" height="60" />
  <rect y="120" x="20" width="60" height="60" />
  <rect y="220" x="20" width="60" height="60" />
</svg>
```

Спецификации
------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-y |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-y |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-y |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-y |
| CSS Masking Module Level 1 # element-attrdef-mask-y |
| Scalable Vector Graphics (SVG) 2 # Y |
| Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementYAttribute |


text-rendering - SVG

text-rendering
==============

« SVG Attribute reference home

При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. `text-rendering` предоставляет возможность указывать данные рекомендации.

Помимо presentation attribute, настройки ренедеринга шрифтов можно задать через CSS стили. Для получения дополнительной информации смотри `CSS text-rendering` (en-US).

Usage context
-------------

| Категория | Presentation attribute |
| --- | --- |
| Значение | **auto** | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

auto

Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.

optimizeSpeed

Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.

optimizeLegibility

Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.

geometricPrecision

Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.

Пример
------

```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="660" height="40"
 text-rendering="optimizeLegibility">
  <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
  <style>
      text {font: 30px 'Sofadi One', cursive;}
  </style>
  <g>
    <text y="30">The quick brown fox jumps over the lazy dog.</text>
  </g>
</svg>
```

**optimizeLegibility (первая) и geometricPrecision (вторая)**
![](http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg)
![](http://download.g63.ru/svg/text-rendering-geometricPrecision.svg)

Аналогичным образом действует `CSS text-rendering` (en-US)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="660" height="40">
  <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
  <style>
      text {
            font: 30px 'Sofadi One', cursive;
            text-rendering:optimizeLegibility;
         }
  </style>
  <g>
    <text y="30">The quick brown fox jumps over the lazy dog.</text>
  </g>
</svg>
```

Elements
--------

The following elements can use the `text-rendering` attribute

* `<text>`
See also
--------

* `CSS text-rendering` (en-US)


d - SVG

d
=

Атрибут **`d`** предоставляет определение пути для рисования.

Определение пути - это список команд пути, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.

Три элемента используют этот атрибут: `<path>`, `<glyph>` (en-US), и `<missing-glyph>` (en-US)

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,30
 A 20,20 0,0,1 50,30
 A 20,20 0,0,1 90,30
 Q 90,60 50,90
 Q 10,60 10,30 z" />
</svg>
```

path
----

Для `<path>`, `d` - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')

| Value | **<string>** |
| --- | --- |
| Default value | *none* |
| Animatable | Yes |

glyph
-----

**Предупреждение:** Начиная с SVG2 `<glyph>` (en-US) устарел и не должен использоваться.

Для `<glyph>` (en-US), `d` является строкой, содержащей серию команд пути, которые определяют форму контура глифа.

| Value | **<string>** |
| --- | --- |
| Default value | *none* |
| Animatable | Yes |

**Примечание:** Точка происхождения (координата `0`, `0`) обычно является верхним левым углом контекста. Однако элемент `<glyph>` (en-US) имеет своё происхождение в левом нижнем углу своего бокса.

missing-glyph
-------------

**Предупреждение:** **Внимание:** Начиная с SVG2 `<missing-glyph>` (en-US) устарел и не должен использоваться.

Для `<missing-glyph>` (en-US), `d` является строкой, содержащей серию команд пути, которые определяют форму контура глифа.

| Value | **<string>** |
| --- | --- |
| Default value | *none* |
| Animatable | Yes |

Команды пути
------------

*Path commands.*

Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.

SVG определяет 6 типов команд пути для всех 20 команд:

* MoveTo: `M`, `m`
* LineTo: `L`, `l`, `H`, `h`, `V`, `v`
* Cubic Bézier Curve: `C`, `c`, `S`, `s`
* Quadratic Bézier Curve: `Q`, `q`, `T`, `t`
* Elliptical Arc Curve: `A`, `a`
* ClosePath: `Z`, `z`

**Примечание:** Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.

Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх.

### Команды перемещения

*MoveTo path commands.*

*MoveTo* инструкции можно рассматривать как собирание чертёжного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.

**Примечание:** Хорошей практикой является открытие всех путей с помощью команды **moveto**, потому что без начального **moveto** команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределённому поведению.

| Команда | Параметры | Примечания |
| --- | --- | --- |
| M | (`x`, `y`)+ | Движение начала следующего под-пути к координатам `x`, `y`. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже). Формула: Pn = {`x`, `y`} |
| m | (`dx`, `dy`)+ | Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на `dx` вдоль оси `x` и на `dy` вдоль оси `y`. Любая последующая пара координат считается неявной относительной командой LineTo (`l`) (см. ниже) Формула: Pn= {xo + `dx`, yo + `dy`} |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 40,20 h 10
 m 0,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 50,50 h 10
 m-20,10 h 10
 m-20,10 h 10
 m-20,10 h 10" />
</svg>
```

### LineTo path commands

*LineTo* инструкции проводят прямую линию от *current point* (Po; {xo, yo}), до *end point* (Pn; {xn, yn}), на основе указанных параметров. Конечная точка *end point* (Pn) становится текущей точкой для следующей команды (Po').

| Command | Parameters | Notes |
| --- | --- | --- |
| L | (`x`, `y`)+ | Рисует линию из *текущей точки в конечную точку определённую* `x`, `y`. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (`L`). Формула: Po' = Pn = {`x`, `y`} |
| l | (`dx`, `dy`)+ | Draw a line from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (`l`) command (*see below*). |
| H | `x`+ | Draw a horizontal line from the current point to the new `x` coordinate (*y coordinate stay unchanged*). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (`H`) command. |
| h | `dx`+ | Draw a horizontal line from the current point to a point shift by `dx` along the the x-axis (*y coordinate stay unchanged*). The current point get its X coordinate updated by `dx` for the next command. All subsequente value are considered an implicite relative horizontal LineTo (`h`) command. |
| V | `y`+ | Draw a vertical line from the current point to the new `y` coordinate (*x coordinate stay unchanged*). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (`V`) command. |
| v | `dy`+ | Draw a vertical line from the current point to a point shift by `dy` along the y-axis (*x coordinate stay unchanged*). The current point get its Y coordinate updated by `dy` for the next command. All subsequente value are considered an implicite relative vertical LineTo (`v`) command. |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands in absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,10
 L 90,90
 V 10
 H 50" />

  <!-- LineTo commands in relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,10
 l 80,80
 v -80
 h -40" />
</svg>
```

### Cubic Bézier Curve

*Cubic Bézier curves* are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.

| Command | Parameters | Notes |
| --- | --- | --- |
| C | (`x1`, `y1`, `x2`, `y2`, `x`, `y`)+ | Draw a Bézier curve from the current point to the coordinate `x`, `y`. `x1`, `y1` are the coordinates of the control point at the begining of the curve where `x2`, `y2` are the coordinates of the controle point at the end of the curve. The coordinate `x`, `y` become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (`C`) command. |
| c | (`dx1`, `dy1`, `dx2`, `dy2`, `dx`, `dy`)+ | Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. `dx1`, `dy1` are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and `dx2`, `dy2` are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (`c`) command. |
| S | (`x2`, `y2`, `x`, `y`)+ | Draw a smooth Bézier curve from the current point to the coordinate `x`, `y`. `x2`, `y2` are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate `x`, `y` become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (`S`) command. |
| s | (`dx2`, `dy2`, `dx`, `dy`)+ | Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. `dx2`, `dy2` are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (`s`) command. |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with absolute coordinate -->
  <path
 fill="none"
 stroke="red"
 d="M 10,90
 C 30,90 25,10 50,10
 S 70,90 90,90" />

  <!-- Quadratic Bézier curve with relative coordinate -->
  <path
 fill="none"
 stroke="red"
 d="M 110,90
 c 20,0 15,-80 40,-80
 s 20,80 40,80" />

  <!-- Highlight the curve vertex and control points -->
  <g id="ControlPoints">
    <!-- First cubic command control points -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Second smooth command control points (the first one is implicite) -->
    <line
 x1="50"
 y1="10"
 x2="75"
 y2="10"
 stroke="lightgrey"
 stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use xlink:href="#ControlPoints" x="100" />
</svg>
```

### Quadratic Bézier Curve

*Quadratic Bézier curves* are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.

| Command | Parameters | Notes |
| --- | --- | --- |
| Q | (`x1`, `y1`, `x`, `y`)+ | Draw a Bézier curve from the current point to the coordinate `x`, `y`. `x1`, `y1` are the coordinates of the control point for the curve. The coordinate `x`, `y` become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (`Q`) command. |
| q | (`dx1`, `dy1`, `dx`, `dy`)+ | Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. `dx1`, `dy1` are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (`q`) command. |
| T | (`x`, `y`)+ | Draw a smooth Bézier curve from the current point to the coordinate `x`, `y`. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate `x`, `y` become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (`T`) command. |
| t | (`dx`, `dy`)+ | Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by `dx` along the x-axis and `dy` along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by `dx` and `dy` for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (`t`) command. |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with implicite repetition -->
  <path
 fill="none"
 stroke="red"
 d="M 10,50
 Q 25,25 40,50
 t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Highlight the curve vertex and control points -->
  <g>
    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
 points="40,50 55,75 70,50"
 stroke="rgba(0,0,0,.2)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
 points="70,50 85,25 100,50"
 stroke="rgba(0,0,0,.2)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use xlink:href="#SmoothQuadraticDown" x="60" />
    <use xlink:href="#SmoothQuadraticUp" x="60" />
    <use xlink:href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>
```

### Elliptical Arc Curve

*Elliptical arc curves* are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.

| Command | Parameters | Notes |
| --- | --- | --- |
| A |
 (`rx` `ry` `angle`
`large-arc-flag` `sweep-flag` `x`
`y`)+
  |
 Draw an Arc curve from the current point to the coordinate
 `x`,`y`. The center of the ellipse used to draw
 the arc is determine automatically based on the other parameters of
 the command:
 * `rx` and `ry` are the two radii of the
 ellipse;
* `angle` represente a rotation (in degree) of the ellipse
 relative to the x-axis;
* `large-arc-flag` and `sweep-flag` allows to
 chose which arc must be drawn as 4 possible arcs can be drawn out of
 the other parameters.
    + `large-arc-flag` allows to chose one of the large arc
     (**1**) or small arc (**0**),
    + `sweep-flag` allows to chose one of the clockwise
     turning arc (**1**) or anticlockwise turning arc
     (**0**)

The coordinate `x`,`y` become the new current
 point for the next command. All subsequente set of parameters are
 considered implicite absolute arc curve (`A`) command.
  |
| a |
 (`rx` `ry` `angle`
`large-arc-flag` `sweep-flag` `dx`
`dy`)+
  |
 Draw an Arc curve from the current point to to a point for which
 coordinates are those of the current point shifted by
 `dx` along the x-axis and `dy` along the y-axis.
 The center of the ellipse used to draw the arc is determine
 automatically based on the other parameters of the command:
 * `rx` and `ry` are the two radii of the
 ellipse;
* `angle` represente a rotation (in degree) of the ellipse
 relative to the x-axis;
* `large-arc-flag` and `sweep-flag` allows to
 chose which arc must be drawn as 4 possible arcs can be drawn out of
 the other parameters.
    + `large-arc-flag` allows to chose one of the large arc
     (**1**) or small arc (**0**),
    + `sweep-flag` allows to chose one of the clockwise
     turning arc (**1**) or anticlockwise turning arc
     (**0**)

The current point gets its X and Y coordinates shifted by
 `dx` and `dy` for the next command. All
 subsequente set of parameters are considered implicite relative arc
 curve (`a`) command.
  |

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- The influence of the arc flags on which arc is drawn -->
  <path
 fill="none"
 stroke="red"
 d="M 6,10
 A 6 4 10 1 0 14,10" />

  <path
 fill="none"
 stroke="lime"
 d="M 6,10
 A 6 4 10 1 1 14,10" />

  <path
 fill="none"
 stroke="purple"
 d="M 6,10
 A 6 4 10 0 1 14,10" />

  <path
 fill="none"
 stroke="pink"
 d="M 6,10
 A 6 4 10 0 0 14,10" />
</svg>
```

### ClosePath

*ClosePath* instructions draw a straight line from the current position, to the first point in the path.

| Command | Parameters | Notes |
| --- | --- | --- |
| Z, z |  | Close the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points. |

**Примечание:** The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the `stroke-linejoin (en-US)` setting), rather than just being placed at the same coordinates.

#### Examples
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
 An open shape with the last point of
 the path different than the first one
 -->
  <path
 stroke="red"
 d="M 5,1
 l -4,8 8,0" />

  <!--
 An open shape with the last point of
 the path matching the first one
 -->
  <path
 stroke="red"
 d="M 15,1
 l -4,8 8,0 -4,-8" />

  <!--
 An closed shape with the last point of
 the path different than the first one
 -->
  <path
 stroke="red"
 d="M 25,1
 l -4,8 8,0
 z" />
</svg>
```

Specification
-------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DProperty |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute |


end - SVG

end
===

« SVG Attribute reference home

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

Значение атрибута представляет собой разделённый точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определённым для `begin (en-US)` атрибута .

Usage context
-------------

| Categories | Animation timing attribute |
| --- | --- |
| Value | <End-value-list> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

Для типов значений, разрешённых в, `<end-value-list>` см. `begin (en-US)` атрибут.

Examples
--------

Elements
--------

The following elements can use the `end` attribute

* Animation elements


fill-opacity - SVG

fill-opacity
============

« Справочник SVG атрибутов

Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.

Контекст использования
----------------------

| Категория | Атрибут оформления |
| --- | --- |
| Значение | <opacity-value> | inherit |
| Предустановленное значение | 1 |
| Анимируемый | Да |
| Спецификация | SVG 1.1 (2nd Edition) |

Примеры
-------

### SVG

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" />
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill-opacity="0.25" />
</svg>
```

### результат

Элементы
--------

Следующие группы элементов могут быть использованы с атрибутом `fill-opacity`:

* Элементы графических форм (Shape elements)
* Текстовые элементы
Смотрите также
--------------

* `stroke-opacity (en-US)`
* `opacity (en-US)`


stroke-width - SVG

stroke-width
============

« Справочник SVG атрибутов

Атрибут `stroke-width` указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется <percentage>, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.

В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS

Usage context
-------------

| **Категория** | Атрибут представления |
| --- | --- |
| **Значения** | <length> | <percentage> | inherit |
| **Анимируемый** | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Example
-------

### SVG

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" />
</svg>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" stroke="#ff0" stroke-width="10" />
</svg>
```

### Результат

Элементы
--------

Следующие элементы могут использовать атрибут `stroke-width`.

* Элементы форм
* Текстовые элементы


cy - SVG

cy
==

Атрибут **`cy`** определяет координату центральной точки по оси y.

Этот атрибут можно использовать для следующих SVG-элементов:

* `<circle>`
* `<ellipse>`
* `<radialGradient>`
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cy="50" cx="50" r="45" />
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

Для элемента `<circle>` атрибут `cy` определяет координату центра фигуры по оси y.

|  |  |
| --- | --- |
| Значение | `<length-percentage>` (en-US) |
| Значение по умолчанию | `0` |
| Анимируемый | Да |

**Примечание:** Начиная с SVG2, `cy` является *Геометрическим свойством*, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для окружностей.

ellipse
-------

Для элемента `<ellipse>` атрибут `cy` определяет координату центра фигуры по оси y.

|  |  |
| --- | --- |
| Значение | `<length-percentage>` (en-US) |
| Значение по умолчанию | `0` |
| Анимируемый | Да |

**Примечание:** Начиная с SVG2, `cy` является *Геометрическим свойством*, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для для эллипсов.

radialGradient
--------------

Для элемента `<radialGradient>` атрибут `cy` определяет координату конечной окружности радиального градиента по оси y.

|  |  |
| --- | --- |
| Значение | `<length-percentage>` (en-US) |
| Значение по умолчанию | `50%` |
| Анимируемый | Да |

### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CY |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCYAttribute |

Смотрите также
--------------

* `cx`
* `r`


keyTimes - SVG

keyTimes
========

« SVG Attribute reference home

Атрибут `keyTimes` представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов `values` и определяет, когда оно используется в анимации. Каждое значение времени в списке `keyTimes` задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.

Если указан список `keyTimes`, то в списке `keyTimes` должно быть ровно столько же значений, сколько в списке `values` .

Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.

Семантика списка keyTimes зависит от режима интерполяции:

* Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами.
* Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в `keyTimes`.

Если в качестве режима интерполяции используется *paced*, атрибут `keyTimes` игнорируется.

Если в качестве параметра длительности выбрано *indefinite*, атрибут `keyTimes` игнорируется.

Usage context
-------------

| Categories | Animation value attribute |
| --- | --- |
| Value | <list> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

Пример
------

```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewPort="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 attributeType="XML"
 dur="4s"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
 repeatCount="indefinite" />

    <animate
 attributeName="cy"
 attributeType="XML"
 dur="4s"
 values="10 ; 60 ; 110 ; 60 ; 10 "
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
 repeatCount="indefinite" />
  </circle>
</svg>
```

Элементы
--------

Следующие элементы могут использовать атрибут `keyTimes`

* `<animate>`
* `<animateColor>` (en-US)
* `<animateMotion>`
* `<animateTransform>` (en-US)


lengthAdjust - SVG

lengthAdjust
============

Когда SVG элемент `<text>` **или** `<tspan>` имеет конкретную длину, установленную с помощью атрибута `textLengt`, атрибут `lengthAdjust` контролирует как текст помещается в эту длину (растягивается или сжимается).

Существует 2 допустимых значения для атрибута `lengthAdjust`: `spacing` и `spacingAndGlyphs`. Используя `spacing` (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя `spacingAndGlyphs` весь тестовый элемент растягивается.

SVG текст с использованием lengthAdjust
---------------------------------------

### HTML Content

```html
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <g font-face="sans-serif">
    <text x="0" y="20" textLength="300" lengthAdjust="spacing">
      Stretched using spacing only.
    </text>
    <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
      Stretched using spacing and glyphs.
    </text>
    <text x="0" y="80" textLength="100" lengthAdjust="spacing">
      Shrunk using spacing only.
    </text>
    <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
      Shrunk using spacing and glyphs.
    </text>
  </g>
</svg>
```

### Результат


fill - SVG

fill
====

« Справочник SVG атрибутов

Атрибут `fill` имеет два значения в зависимости от используемого контекста.

По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут `fill` может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.

Для фигур и текста атрибут `fill` является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения `fill-rule` атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS

Контекст использования
----------------------

### Для анимируемых элементов

| Категория | Атрибуты времени анимации |
| --- | --- |
| Значение | **remove** | freeze |
| Анимация | Нет |
| Нормативный документ | SVG 1.1 (2nd Edition) |

remove (default)

Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).

freeze

Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).

### Для текста и форм

| Категория | Атрибут представления |
| --- | --- |
| Значение | <paint>, `context-fill`, `context-stroke` |
| Анимация | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Примеры
-------

### Пример 1: Простой SVG

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill="#666" />
</svg>
```

#### Результат

Использование `context-fill`
----------------------------

Для информации об использовании нестандартного и ограниченного значения `context-fill` (и `context-stroke`) смотрите документацию `-moz-context-properties`.

Смотрите также
--------------

Следующие элементы могут использовать атрибут `fill`

* Animation elements
* Shape elements
* Text content elements


stroke-linecap - SVG

stroke-linecap
==============

Атрибут **`stroke-linecap`** - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.

**Примечание:** В качестве атрибута представления можно использовать `stroke-linecap` в качестве свойства CSS.

В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: `<altGlyph>`, `<path>`, `<polyline>` (en-US), `<text>`, `<textPath>` (en-US), `<tref>` (en-US), and `<tspan>` (en-US)

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the (default) "butt" value -->
  <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "round" value -->
  <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "square" value -->
  <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>
```

Нотации
-------

| Value | `butt` | `round` | `square` |
| --- | --- |
| Default value | `butt` |
| Animatable | Yes |

### butt

Значение `butt` указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "butt" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "butt" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="butt" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
```

### round

Значение `round` указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="round" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
```

### square

Значение `square` указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "square" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="square" />

  <!-- Effect of the "square" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="square" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
```

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Спецификация
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineCaps |


font-weight - SVG

font-weight
===========

« SVG Attribute reference home

`Атрибут font-weight` позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .

Как и любой атрибут представления, `font-weight` может быть использован в виде свойства в CSS стилях, см. `CSS font-weight` для подробной информации.

Контекст применения
-------------------

| Категории | Атрибут представления |
| --- | --- |
| Значения | **normal** | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| Анимируемость | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Значение ключевых слов
----------------------

* **bold** - соответствует значению **700** - полужирное начертание
* **normal** - соответствует значению **400** - нормальное начертание
* **bolder** и **lighter** указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.
* **inherit** - даёт указание браузеру унаследовать тип начертания от родительского элемента.
Предостережения
---------------

Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.

Пример
------

### css

```css
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}
p.thicker {
  font-weight: 900;
}
```

### html

```html
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
```

Элементы
--------

Следующие элементы могут использовать атрибут `font-weight`.

* Text content elements
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `CSS font-weight`


text-anchor - SVG

text-anchor
===========

« Справочник SVG Атрибутов

 Атрибут `text-anchor` используется для выравнивания
 *(start-, middle- или end-выравнивание)* текстовой строки относительно заданной точки.

Атрибут `text-anchor` применяется к каждому отдельному текстовому фрагменту в заданном `<text>` элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения `x` и `y` атрибутов к `<text>` элементу, любого `x` или `y` значения к `<tspan>` (en-US), `<tref>` (en-US) , `<altGlyph>` элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для `<textPath>` (en-US) элемента.

Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.

Контекст использования
----------------------

| Категория | Атрибут представления |
| --- | --- |
| Значение | start | middle | end | **inherit** |
| Анимация | Да |
| Документ | SVG 1.1 (2nd Edition) |

start

Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиатского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.

middle

 Отрисованные символы выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка
 между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой
 позиции.)

end

 Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалентно
 правому выравниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.

Примечание

 В **IE**-11 атрибут **`text-anchor`** не имеет эффекта при привязке текста к заданному пути **`path`** посредством тега **`textPath`**.
 В приведённом ниже примере тег **`path`** использовался только лишь для отрисовки линий и с расположением текста никак не связан.

Пример
------

```html
<html>
  <head>
    <meta charset="utf-8" />
    <title>текст в якорях</title>
  </head>
  <body>
    <div
 style="background-color:burlywood; width:866px;height:444px;display:flex;">
      <div
 style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;">
        <svg
 viewBox="-50 0 100 100"
 style="overflow: visible;"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
          <!-- Материализация якорей -->
          <path
 d="M50, 5 L50,95
 M20,20 L80,20
 M20,50 L80,50
 M20,80 L80,80"
 stroke="grey" />

          <!-- Якоря в действии -->
          <text text-anchor="start" x="50" y="20">some start</text>
          <text text-anchor="start" x="50" y="35">start</text>

          <text text-anchor="middle" x="50" y="55">some middle</text>
          <text text-anchor="middle" x="50" y="70">middle</text>

          <text text-anchor="end" x="50" y="85">some end</text>
          <text text-anchor="end" x="50" y="100">end</text>
        </svg>
      </div>
    </div>
  </body>
</html>
```

Элементы
--------

Следующие элементы могут использовать `text-anchor` атрибут

* Text content elements
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


attributeType - SVG

attributeType
=============

« Справочник SVG атрибутов

Этот атрибут задаёт пространство имён, в котором определяются конечный атрибут и связанные с ним значения.

Контекст использования
----------------------

| Категория | Целевые атрибуты анимации |
| --- | --- |
| Значение | CSS | XML | **auto** |
| Анимируемый | Нет |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Этот атрибут может принимать одно из следующих значений:

CSS

Указывает на то, что значение параметра `attributeName` является именем свойства CSS, определяемого как анимация.

XML

Указывает, что значение параметра`attributeName` является именем атрибута XML, определяемого как анимация в пространстве имён XML по умолчанию для целевого элемента.

auto

Реализация должна соответствовать `attributeName` атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имён XML по умолчанию для элемента.

Пример
------

Элементы
--------

Следующие элементы могут быть использованы с атрибутом `attributeType`

* `<animate>`
* `<animateColor>` (en-US)
* `<animateTransform>` (en-US)
* `<set>` (en-US)


lighting-color - SVG

lighting-color
==============

« Справочник SVG атрибутов

Атрибут `lighting-color` определяет цвет источника света для примитивов фильтров `<feDiffuseLighting>` (en-US) и `<feSpecularLighting>` (en-US).

Контекст использования
----------------------

| Категория | Атрибут представления |
| --- | --- |
| Значение | currentColor | <color> | <icccolor> | inherit |
| Начальное значение | white |
| Анимация | Да |
| Нормативный документ | SVG 1.1 (2nd Edition) |

Примеры
-------

Элементы
--------

Следующие элементы могут использовать атрибут `lighting-color`

* `<feDiffuseLighting>` (en-US)
* `<feSpecularLighting>` (en-US)


transform - SVG

transform
=========

« Справочник SVG атрибутов

В атрибуте `transform` перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.

Контекст использования
----------------------

| Категории | Нет |
| --- | --- |
| Значение | **<transform-list>** |
| Анимация | Да |
| Нормативная база | SVG 1.1 (2nd Edition) |

### Типы преобразований

matrix(<a> <b> <c> <d> <e> <f>)

Преобразование с использованием матрицы из шести элементов. Преобразование `matrix(a,b,c,d,e,f)` равнозначно применению матрицы

(

a

c

e

b

d

f

0

0

1

)

\begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix}
,

которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы:

(

x
пред.

y
пред.

1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

нов.

y
нов.

1

)

=

(

a

x
нов.

+
c

y
нов.

+
e

b

x
нов.

+
d

y
нов.

+
f

1

)

 \begin{pmatrix} x\*{\mathrm{пред.}} \ y\*{\mathrm{пред.}} \ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\*{\mathrm{нов.}} \ y\*{\mathrm{нов.}} \ 1 \end{pmatrix} = \begin{pmatrix} a x\*{\mathrm{нов.}} + c y\*{\mathrm{нов.}} + e \ b x\*{\mathrm{нов.}} + d y\*{\mathrm{нов.}} + f \ 1 \end{pmatrix}

translate(<x> [<y>])

Перенос по осям `x` и `y`. Равнозначно `matrix(1 0 0 1 x y)`. Если значение `y` опущено, оно принимается равным нулю.

scale(<x> [<y>])

Масштабирование по осям `x` и `y`. Равнозначно `matrix(x 0 0 y 0 0)`. Если значение `y` опущено, оно принимается равным `x`.

rotate(<a> [<x> <y>])

Поворот на `a` градусов вокруг указанной точки. Если необязательные параметры `x` и `y` опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице

(

cos
a

-
sin
a

0

sin
a

cos
a

0

0

0

1

)

\begin{pmatrix} \cos a & -\sin a & 0 \ \sin a & \cos a & 0 \ 0 & 0 & 1 \end{pmatrix}

Если необязательные параметры `x` и `y` присутствуют, поворот будет осуществляться вокруг точки `(x, y)`. Операция равнозначна следующему списку преобразований: `translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)`.

skewX(<a>)

Наклон относительно оси `x` на `a` градусов. Операция соответствует матрице

(

1

tg
a

0

0

1

0

0

0

1

)

\begin{pmatrix} 1 & \tan(a) & 0 \ 0 & 1 & 0 \ 0 & 0 & 1 \end{pmatrix}

skewY(<a>)

Наклон относительно оси `y` на `a` градусов. Операция соответствует матрице

(

1

0

0

tg
a

1

0

0

0

1

)

 \begin{pmatrix} 1 & 0 & 0 \ \tan(a) & 1 & 0 \ 0 & 0 & 1 \end{pmatrix}

Примеры
-------

### Поворот и перенос SVG-элемента

В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут `transform`. Первоначальный элемент до преобразования показан полупрозрачным.

CSS (необязательный):

```css
text {
  font: 1em sans-serif;
}
```

SVG:

```html
<svg
 width="180"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Это элемент до применения переноса и поворота -->
  <rect
 x="50"
 y="50"
 height="100"
 width="100"
 style="stroke:#000; fill: #0086B2"
 fill-opacity="0.2"
 stroke-opacity="0.2"></rect>

  <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента -->
  <rect
 x="50"
 y="50"
 height="100"
 width="100"
 style="stroke:#000; fill: #0086B2"
 transform="translate(30) rotate(45 50 50)"></rect>
  <text x="60" y="105" transform="translate(30) rotate(45 50 50)">
    Hello Moz!
  </text>
</svg>
```

| Screenshot | Live sample |
| --- | --- |
|  |  |

### Общее преобразование

Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования `matrix(1,2,3,4,5,6)` и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.

```html
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1,2,3,4,5,6)">
    <!-- Новая система координат (жирная синяя линия)
 x1 = 10 | x2 = 30
 y1 = 20 | y2 = 40
 -->
    <line
 x1="10"
 y1="20"
 x2="30"
 y2="40"
 style="stroke-width: 10px; stroke: blue;" />
  </g>

  <!-- Предыдущая система координат (тонкая белая линия)
 x1 = 1 \* 10 + 3 \* 20 + 5 = 75 | x2 = 1 \* 30 + 3 \* 40 + 5 = 155
 y1 = 2 \* 10 + 4 \* 20 + 6 = 106 | y2 = 2 \* 30 + 4 \* 40 + 6 = 226
 -->
  <line
 x1="75"
 y1="106"
 x2="155"
 y2="226"
 style="stroke-width: 1px; stroke: white;" />
</svg>
```

Элементы
--------

Следующие элементы могут использовать атрибут `transform`:

* `<a>`
* `<clipPath>` (en-US)
* `<defs>`
* `<foreignObject>`
* `<g>`
* `<switch>` (en-US)
* `<use>`
* Графические элементы »


attributeName - SVG

attributeName
=============

Атрибут **`attributeName`** задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.

Четыре элемента используют данный атрибут: `<animate>`, `<animateColor>` (en-US), `<animateTransform>` (en-US) и `<set>` (en-US)

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="5s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Контекст использования
----------------------

|  |  |
| --- | --- |
| Значение | `<name>` |
| Значение по умолчанию | *None* |
| Анимируемый | Нет |

`<name>`

Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.

Спецификации
------------

| Specification |
| --- |
| SVG Animations Level 2 # AttributeNameAttribute |

Смотрите также
--------------

* SMIL Animation specification


cx - SVG

cx
==

Атрибут **`cx`** определяет координату центральной точки по оси x.

Этот атрибут можно использовать для следующих SVG-элементов:

* `<circle>`
* `<ellipse>`
* `<radialGradient>`
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="45" />
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

Для элемента `<circle>` атрибут `cx` определяет координату центра фигуры по оси x.

|  |  |
| --- | --- |
| Значение | `<length-percentage>` (en-US) |
| Значение по умолчанию | `0` |
| Анимируемый | Да |

**Примечание:** Начиная с SVG2, `cx` является *Геометрическим свойством*, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для окружностей.

ellipse
-------

Для элемента `<ellipse>` атрибут `cx` определяет координату центра фигуры по оси x.

|  |  |
| --- | --- |
| Значение | `<length-percentage>` (en-US) |
| Значение по умолчанию | `0` |
| Анимируемый | Да |

**Примечание:** Начиная с SVG2, `cx` является *Геометрическим свойством*, это означает, что этот атрибут также может быть использован в качестве CSS-свойства для для эллипсов.

radialGradient
--------------

Для элемента `<radialGradient>` атрибут `cx` определяет координату конечной окружности радиального градиента по оси x.

|  |  |
| --- | --- |
| Значение | `<length-percentage>` (en-US) |
| Значение по умолчанию | `50%` |
| Анимируемый | Да |

### Пример
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CX |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |

Смотрите также
--------------

* `cy`
* `r`


values - SVG

values
======

« SVG Attribute reference home

Атрибут `values` имеет два значения в зависимости от используемого контекста.

Для элементов анимации атрибут `values` представляет собой разделённый точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список `values`, значения атрибутов `from (en-US)`, `to (en-US)` и `by (en-US)` игнорируются.

Для элемента `<feColorMatrix>` (en-US) содержимое `values` зависит от значения атрибута `type (en-US)`:

* Для `type="matrix"`, `values` — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделённых пробелами и/или запятой.
* Для `type="saturate"`, `values` — это единственное вещественное число (от 0 до 1).
* Для `type="hueRotate"`, `values` — это одно вещественное число (градусов).
* Для `type="luminanceToAlpha"`, `values` не применимы.

Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута `type (en-US)`.

* Если `type="matrix"`, этот атрибут по умолчанию присваивается матрице идентификаторов.
* Если `type="saturate"`, то этот атрибут по умолчанию присваивает значение 1, что приводит к получению матрицы идентификаторов.
 Если `type="hueRotate"`, то этот атрибут по умолчанию присваивает значение 0, что приводит к получению матрицы идентификаторов.
Usage context
-------------

### For animation elements

| Categories | Animation value attribute |
| --- | --- |
| Value | <list> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |

### For the `<feColorMatrix>` (en-US) element

| Categories | *None* |
| --- | --- |
| Value | <list> | <number> |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

Example
-------

Elements
--------

The following elements can use the `values` attribute

* Animation elements
* `<feColorMatrix>` (en-US)


r - SVG

r
=

Атрибут r устанавливает значение радиуса круга.
Этот атрибут используют два элемента: `<circle>`, и `<radialGradient>`

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>
```

circle
------

Для `<circle>`, `r` устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован.

| Значение | **<length>**| **<percentage>** |
| --- | --- |
| Значение по умолчанию | `0` |
| Анимируемость | Да |

**Примечание:** Начиная с SVG2, **r** является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов.

radialGradient
--------------

Для `<radialGradient>`, `r` устанавливает радиус конечной окружности радиального градиента.

Градиент будет нарисован таким образом, чтобы **100%** конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведёт к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента `<stop>` (en-US).

| Значение | **<length>** | **<percentage>** |
| --- | --- |
| Значение по умолчанию | `50%` |
| Анимируемость | Да |

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |


SVG шрифты - SVG

SVG шрифты
==========

* « Предыдущая статья
* Следующая статья »

Когда был написан стандарт SVG, поддержка веб-шрифтов ещё не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.

**Примечание:** **SVG-шрифты корректно поддерживаются только в Safari.**
 Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

Элемент `<font>` (en-US) используется для определения SVG-шрифта.

Установка шрифта
----------------

Есть некоторые нюансы, необходимые для вставки шрифта в SVG. Давайте рассмотрим пример объявления (указанный в спецификации), и объясним детали.
```

<font id="Font1" horiz-adv-x="1000">
  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
      units-per-em="1000" cap-height="600" x-height="400"
      ascent="700" descent="300"
      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
    <font-face-src>
      <font-face-name name="Super Sans Bold"/>
    </font-face-src>
  </font-face>
  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>
```

Начнём с элемента `<font>` (en-US). Он имеет атрибут `id`, который позволяет ему ссылаться через URI (см. ниже). Атрибут `horiz-adv-x` определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки.

Элемент `<font-face>` (en-US) является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено - это `font-family`, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты `font-weight` и `font-style` имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.

Дочерний элемент `<font-face-src>` (en-US) соответствует свойству `src` для атрибута `@font-face` в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов `<font-face-name>` (en-US) и `<font-face-uri>` (en-US). В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.

Следующий элемент за `<font-face-src>` (en-US) - это `<missing-glyph>` (en-US). Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже `<filter>` (en-US), `<a>` или `<script>` (en-US). Однако для простых глифов вы можете просто добавить атрибут `d` - он определяет форму для глифа точно так же, как работают стандартные пути SVG.

Сами глифы затем определяются элементами `<glyph>` (en-US). Наиболее важным атрибутом является `unicode`. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут `lang` на глифе, вы можете дополнительно ограничить его определёнными языками (представленными `xml:lang`). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.

Есть ещё два элемента, которые могут быть определены внутри шрифта: `<hkern>` (en-US) и `<vkern>` (en-US). Каждый из них содержит ссылки не менее чем на два символа (атрибуты `u1` и `u2`) и атрибут `k`, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.
```

<hkern u1="A" u2="V" k="20" />
```

Ссылка на шрифт
---------------

После того как вы описали шрифт, как показано выше, вы можете просто применить атрибут `font-family` для использования шрифта в тексте SVG:
```

<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>
```

Тем не менее, вы можете объединить несколько методов для того чтобы определить как и где использовать шрифт.

### Опция: использование CSS @font-face

Вы можете использовать свойство `@font-face` для ссылки на внешние шрифты:
```

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style type="text/css">
@font-face {
  font-family: "Super Sans";
  src: url(#Super_Sans);
}
</style>

<text font-family="Super Sans">My text uses Super Sans</text>
```

### Опция: ссылка на внешний шрифт

Элемент `font-face-uri` позволяет ссылаться на внешний шрифт, следовательно, его можно использовать в нескольких местах:
```

<font>
  <font-face font-family="Super Sans">
    <font-face-src>
      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
    </font-face-src>
  </font-face>
</font>
```

* « Предыдущая статья
* Следующая статья »


Расположение (позиции) - SVG

Расположение (позиции)
======================

* « Предыдущая статья
* Следующая статья »
Сетка
-----

![Сетка координат X, Y с синей рамкой посередине.](/ru/docs/Web/SVG/Tutorial/Positions/canvas_default_grid.png)

SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется canvas (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.

### Пример

Элемент
```

<rect x="0" y="0" width="100" height="100" />
```

определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.

### Что такое "пиксели"?

В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Масштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.

Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента `svg`:
```

<svg width="100" height="100">
```

Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.
```

<svg width="200" height="200" viewBox="0 0 100 100">
```

Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут `viewBox определяет часть этого полотна, которая будет отображаться`. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.

Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется **системой пользовательских координат**. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.

Цитата из SVG 1.1 специфирования иллюстрирует это:

>
> [...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)
>
>
>

* « Предыдущая статья
* Следующая статья »


Текст - SVG

Текст
=====

* « Предыдущая статья
* Следующая статья »

Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.

Основы
------

В getting started мы уже видели, что элемент `text` может использоваться для размещения произвольного текста в SVG документах:

```xml
<text x="10" y="10">Hello World!</text>
```

Атрибуты `x` и `y` задают расположение текста на экране. Атрибут `text-anchor`, который может иметь значение start, middle, end или inherit, определяет в каком направлении выравнивать текст относительно заданной точки.

Как и для фигур, тексту можно задать цвет с помощью атрибута `fill` и обводку, используя атрибут `stroke`. Оба могут быть использованы с `gradient` и `pattern` элементами, что делает простое изменение цвета текста в SVG очень мощным по сравнению с CSS 2.1.

Настройка свойств шрифта
------------------------

Шрифт, в котором отображается текст очень важен. SVG предлагает набор атрибутов (многие из которых похожи на их CSS аналоги), позволяющий настроить шрифт. Каждое из следующих свойств может быть установлено как атрибут или с помощью CSS декларации: `font-family`, `font-style`, `font-weight`, `font-variant`, `font-stretch`, `font-size`, `font-size-adjust`, `kerning`, `letter-spacing`, `word-spacing` и `text-decoration`.

Другие текстовые элементы
-------------------------

### tspan

Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в `text` элемент или в другой `tspan` элемент. Примером является выделение одного слова в предложении красным цветом.

```xml
<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
```

Элемент `tspan` имеет следующие атрибуты:

**x**
 Задаёт новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по умолчанию позицию. Атрибут может также содержать набор чисел, которые поочерёдно применяются к каждому символу `tspan`.

**dx**
 Задаёт смещение по горизонтали `dx` относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.

Аналогично, для вертикального перемещения текста имеются **y** и **dy** атрибуты.

**rotate**
 Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочерёдно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.

**textLength**
 Атрибут строго задаёт длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.

### tref

Элемент `tref` позволяет ссылаться на уже существующий текст, эффективно копируя его на своё место. Вы можете использовать атрибут `xlink:href` чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника.

```xml
<text id="example">This is an example text.</text>

<text>
    <tref xlink:href="#example" />
</text>
```

### textPath

Этот атрибут извлекает `path`, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.

```xml
<path id="my\_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
<text>
  <textPath xlink:href="#my\_path">This text follows a curve.</textPath>
</text>
```

* « Предыдущая статья
* Следующая статья »


SVG image element - SVG

SVG image element
=================

* « Предыдущая статья
* Следующая статья »

SVG тег `<image>` позволяет выводить растровые изображения внутри SVG-объектов.

В примере ниже растровое изображение **a.jpg**, заданное при помощи атрибута `href (en-US)`, отображено внутри SVG-объекта:

```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
```

**Предупреждение:** Важные замечания (подробнее W3 specs):

* Если параметры **x** или **y** не заданы, то им будут присвоены значения равные **0**.
* Если параметры **height** или **width** не заданы, то им будут присвоены значения равные **0**.
* Если значение любого из параметров изображения **height** или **width** равны **0**, то отображение отключено.
* « Предыдущая статья
* Следующая статья »


Введение - SVG

Введение
========

* « Предыдущая статья
* Следующая статья »

SVG это язык XML разметки, схожий с XHTML, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путём указания всех необходимых линий и форм, путём модификации уже существующих растровых изображений, или путём комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.

В 1999 году, после конкурса нескольких форматов, SVG был включён в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG даёт некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

### Базовые компоненты

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента `<svg>` и нескольких основных форм, которые вместе обеспечивают построение рисунка. Кроме того, есть элемент `<g>`, который используется для группировки нескольких основных форм вместе.

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

### До начала работы

Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надёжный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растёт с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

Перед тем как начать, вы должны иметь основное понимание XML или другого языка разметки, такого как HTML. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:

* Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).
* Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.

SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать Справочник SVG элементов и SVG интерфейсы, чтобы найти что-либо ещё при необходимости.

### Особенности SVG

Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжёлыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

* « Предыдущая статья
* Следующая статья »


SVG в HTML. Введение - SVG

SVG в HTML. Введение
====================

Описание
--------

Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.

Код
---

Демонстрация примера здесь:

```html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XTech SVG Demo</title>
    <style>
 stop.begin {
 stop-color: yellow;
 }
 stop.end {
 stop-color: green;
 }
 body.invalid stop.end {
 stop-color: red;
 }
 #err {
 display: none;
 }
 body.invalid #err {
 display: inline;
 }
 </style>
    <script>
 function signalError() {
 document.getElementById("body").setAttribute("class", "invalid");
 }
 </script>
  </head>
  <body
 id="body"
 style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
    <form>
      <fieldset>
        <legend>HTML Form</legend>
        <p>
          <label>Введите что-нибудь:</label>
          <input type="text" />
          <span id="err">Incorrect value!</span>
        </p>
        <p>
          <input type="button" value="Activate!" onclick="signalError();" />
        </p>
      </fieldset>
    </form>

    <svg
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 viewBox="0 0 100 100"
 preserveAspectRatio="xMidYMid slice"
 style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
      <linearGradient id="gradient">
        <stop class="begin" offset="0%" />
        <stop class="end" offset="100%" />
      </linearGradient>
      <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
      <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
    </svg>
  </body>
</html>
```

Примечание
----------

В примере представлен обычный XHTML, CSS и JavaScript-код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

Такой способ имеет следующие пункты в свою пользу:

* Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон
* Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую вёрстку.
* Это очень просто сделать.
* Изображение масштабируемое и может растягиваться до нужного размера
* Мы можем применять декларированные стили как для HTML так и для SVG
* С помощью JavaScript можно управлять как HTML так и SVG
* Это полностью валидный документ, основанный на стандартах.

**Примечание:** Чтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:

```js
var img = document.createElementNS("http://www.w3.org/2000/svg", "image");

img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
```

Дополнительно
-------------

Значение атрибута `viewBox` определяет область в пространстве пользователя, относительно внешним границам просмотра.

`viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:`

```html
viewBox="0 0 100 100"
```

Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут `preserveAspectRatio`. С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow) области просмотра, края svg могут быть обрезаны или вписаны.

```html
preserveAspectRatio="alignment [meet | slice]"
```

`alignment` - одно из значений `xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid` или `xMaxYMax`.

`meet` - сохраняет пропорции, умещая svg в область просмотра

`slice` - тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область

Также есть спецификатор `none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).`

```html
preserveAspectRatio="none"
```

Атрибут `style` применяется для определения стиля элемента.

Ссылки по теме
--------------

* Сохранение пропорций ссылка
* Масштабирование и сдвиг msdn.microsoft
* Ещё SVG в XHTML: пример (en-US)


Основные Фигуры - SVG

Основные Фигуры
===============

* « Предыдущая статья
* Следующая статья »

Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.

Основные формы
--------------

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

![](/ru/docs/Web/SVG/Tutorial/Basic_Shapes/shapes.png)

```xml
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
 stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
 stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
```

**Примечание:** Атрибуты `stroke`, `stroke-width` и `fill` описываются в руководстве далее.

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

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

```xml
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
```

x

Положение x верхнего левого угла прямоугольника.

y

Положение y верхнего левого угла прямоугольника.

width

Ширина прямоугольника

height

Высота прямоугольника

rx

Радиус x углов прямоугольника

ry

Радиус y углов прямоугольника

### Окружность

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

```xml
<circle cx="25" cy="75" r="20"/>
```

r

Радиус окружности.

cx

Положение x центра окружности.

cy

Положение y центра окружности.

### Эллипс

Ellipse - это наиболее общая форма элемента окружность, в котором можно масштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

```xml
<ellipse cx="75" cy="75" rx="20" ry="5"/>
```

rx

Радиус x эллипса.

ry

Радиус y эллипса.

cx

Положение x центра эллипса.

cy

Положение y центра эллипса.

### Линия

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечную точки линии.

```xml
<line x1="10" x2="50" y1="110" y2="150"/>
```

x1

Положение x точки 1.

y1

Положение y точки 1.

x2

Положение x точки 2.

y2

Положение y точки 2.

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

Элемент polyline воспроизводит группу соединённых прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:

```xml
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
```

точки

Список точек, каждая разделённая пробелом, запятой, EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".

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

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента `<rect/>` в случаях, когда необходимо большая гибкость.

```xml
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
```

точки

Список точек, каждая разделённая пробелом, запятой, EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).

### Путь

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

```xml
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
```

d

Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.

* « Предыдущая статья
* Следующая статья »


Работа с SVG - SVG

Работа с SVG
============

* « Предыдущая статья

Теперь, когда мы рассмотрели основы SVG, мы рассмотрим некоторые инструменты для работы с SVG файлами.

Inkscape
--------

URL: www.inkscape.org

Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.

Кроме того, SVG является её родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имён, что не мешает выбрать экспорт и в виде простого SVG.

Adobe Illustrator
-----------------

URL: www.adobe.com/products/illustrator/

Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.

Apache Batik
------------

URL: xmlgraphics.apache.org/batik/

Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.

Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.

Together with Apache FOP Batik can transform SVG to PDF.

### Other renderers

Several projects exist that can create a raster image from an SVG source. ImageMagick is one of the most famous command-line image processing tools. The Gnome library rsvg is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.

Raphael JS
----------

URL: raphaeljs.com

This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.

Snap.svg
--------

URL: snapsvg.io

A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.

Google Docs
-----------

URL: www.google.com/google-d-s/drawings/

Drawings from Google Docs can be exported as SVG.

Science
-------

The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web JSXGraph supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.

In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See carto.net for details.

Больше программ!
----------------

W3C предлагает список программ, которые поддерживают SVG.

* « Предыдущая статья