files/ru/web/svg/attribute/text-rendering/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

---
title: text-rendering
slug: Web/SVG/Attribute/text-rendering
translation_of: Web/SVG/Attribute/text-rendering
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать данные рекомендации.</p>
<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задать через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категория</th>
   <td>Presentation attribute</td>
  </tr>
  <tr>
   <th scope="row">Значение</th>
   <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>
<dl>
 <dt>
  auto</dt>
 <dd>
  Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd>
 <dt>
  optimizeSpeed</dt>
 <dd>
  Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.</dd>
 <dt>
  optimizeLegibility</dt>
 <dd>
  Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.</dd>
 <dt>
  geometricPrecision</dt>
 <dd>
  Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.</dd>
</dl>
<h2 id="Пример">Пример</h2>
<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"
   version="1.1" width="660" height="40"
   text-rendering="optimizeLegibility"&gt;
  &lt;link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /&gt;
  &lt;style&gt;
      text {font: 30px 'Sofadi One', cursive;}
  &lt;/style&gt;
  &lt;g&gt;
    &lt;text y="30"&gt;The quick brown fox jumps over the lazy dog.&lt;/text&gt;
  &lt;/g&gt;
&lt;/svg&gt;</pre>
<p><strong>optimizeLegibility (первая) и geometricPrecision (вторая)</strong><br>
 <img alt="text-rendering=optimizeLegibility" height="13" src="http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg" width="211"><br>
 <img alt="text-rendering=geometricPrecision" height="13" src="http://download.g63.ru/svg/text-rendering-geometricPrecision.svg" width="211"></p>
<p>Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}</p>
<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"
   version="1.1" width="660" height="40"&gt;
  &lt;link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /&gt;
  &lt;style&gt;
      text {
            font: 30px 'Sofadi One', cursive;
            text-rendering:optimizeLegibility;
         }
  &lt;/style&gt;
  &lt;g&gt;
    &lt;text y="30"&gt;The quick brown fox jumps over the lazy dog.&lt;/text&gt;
  &lt;/g&gt;
&lt;/svg&gt;</pre>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>text-rendering</code> attribute</p>
<ul>
 <li>{{ SVGElement("text") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{ cssxref("text-rendering","CSS text-rendering") }}</li>
</ul>