shape-rendering

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2020 года⁩.

Атрибут shape-rendering предоставляет средству визуализации рекомендации о том, какие компромиссы следует выбирать при отображении фигур, таких как контуры, круги или прямоугольники.

Примечание: У shape-rendering как у атрибута представления также есть соответствующее свойство CSS: shape-rendering. Если указаны оба варианта, приоритет имеет свойство CSS.

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

Пример

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" shape-rendering="geometricPrecision" />
  <circle cx="320" cy="100" r="100" shape-rendering="crispEdges" />
</svg>

Примечания по использованию

Значение	`auto` \| `optimizeSpeed` \| `crispEdges` \| `geometricPrecision`
Значение по умолчанию	`auto`
Анимируемое	дискретно

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

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # ShapeRendering>

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

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`shape-rendering`	≤80	≤80	≤72	≤67	≤13.1	≤80	≤79	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

Свойство CSS shape-rendering

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering