Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The color-rendering attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations.

color-rendering takes precedence over color-interpolation-filters. For example, assume color-rendering: optimizeSpeed and color-interpolation-filters: linearRGB. In this case, the SVG user agent should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by through the linearRGB value for color-interpolation-filters.

Note: As a presentation attribute, color-rendering can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animateColor>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <glyph>, <image>, <line>, <linearGradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialGradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, and <use>

<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="darkseagreen"/>

  <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizeQuality" />
  <text x="45" y="50%" color-rendering="optimizeQuality">quality-optimized</text>

  <circle cx="100" cy="100" r="100" color-rendering="optimizeSpeed" fill="url(#gradient)"
      style="transform: translateX(240px);" />
  <text x="290" y="50%" color-rendering="optimizeSpeed">speed-optimized</text>

Usage notes

Value auto | optimizeSpeed | optimizeQuality
Default value auto
Animatable Yes
Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
Indicates that the user agent shall emphasize rendering speed over quality. For RGB display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device RGB color space.
Indicates that the user agent shall emphasize quality over rendering speed.


Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'color-rendering' in that specification.
Candidate Recommendation No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'color-rendering' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
color-renderingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown

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

Внесли вклад в эту страницу: Sebastianz, mdnwebdocs-bot, connorshea, Jeremie
Обновлялась последний раз: Sebastianz,