shape-rendering

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

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

При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы <path> или базовые фигуры. shape-rendering предоставляет возможность указывать данные рекомендации.

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

Категория	Атрибут представления
Значения	auto \| optimizeSpeed \| crispEdges \| geometricPrecision \| inherit
Анимация	Да
Нормативный документ	SVG 1.1 (2nd Edition)

auto: Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, чёткие края и геометрическую точность, но геометрической точности уделять более пристальное внимание, чем скорости и чётким краями.
optimizeSpeed: Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб геометрической точности и чётким краями. Эту опцию также можно указывать,, чтобы отключить сглаживание фигур.
crispEdges: Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краёв рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата чёткости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краёв с пикселями устройства.
geometricPrecision: Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и чёткими краям.

Пример

xml

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100"
  shape-rendering="optimizeSpeed">

Также можно воспользоваться css shape-rendering:

xml

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100"
  style="shape-rendering:optimizeSpeed;">

Элементы

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

Shape elements