MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

« SVG Attribute reference home

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

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

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 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 (вторая)
text-rendering=optimizeLegibility
text-rendering=geometricPrecision

Аналогичным образом действует css text-rendering

<?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

See also

Метки документа и участники

 Внесли вклад в эту страницу: BaNru
 Обновлялась последний раз: BaNru,