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.

« Справочник 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