Как десятичные значения цвета SVG (от 0 до 1) преобразуются в значения цвета (от 0 до 255)?
Следующий код ясно демонстрирует, что десятичные значения цвета (0,1) не переводятся линейно в дискретные значения (0,255). Если бы они были, 0,5 означало бы примерно 128, но это не так. Вместо этого он переводится примерно в 187.
<svg height = "100%" width = "100%" viewbox = "0 0 100 100">
<defs>
<filter id = "coltrans">
<feComponentTransfer in = "SourceGraphic">
<feFuncG type = "discrete" tableValues = "0 1"/>
<feFuncB type = "discrete" tableValues = "0 1"/>
</feComponentTransfer>
</filter>
</defs>
<lineargradient id = "0to1gradient">
<stop offest = "0" stop-color = "rgb(255, 255, 255)"/>
<stop offset = "1" stop-color = "rgb(255,0,0)"/>
</lineargradient>
<rect filter = "url(#coltrans)" x = "0" y = "0" width = "100" height = "50" fill = "url(#0to1gradient)" stroke = "blue"/>
<rect x = "0" y = "50" width = "100" height = "50" fill = "url(#0to1gradient)" stroke = "blue"/>
</svg>В нижнем прямоугольнике цвет линейно изменяется от белого к красному. Верхний прямоугольник имеет такой же переход цвета, только он отфильтрован, так что значения зеленого и синего десятичных цветов округляются вверх или вниз до ближайшего запятого (0 или 1).
Ответы 1
Большинство операций с цветом в SVG выполняются в цветовом пространстве sRGB. Но из соображений визуального качества операции фильтрации (по умолчанию) выполняются в цветовом пространстве linearRGB. Любые входные изображения преобразуются в линейное RGB, применяются примитивы фильтра, а затем выходные данные фильтра преобразуются обратно в sRGB.
Для получения более подробной информации прочитайте статью Википедии о sRGB или спецификацию SVG.
Но в основном это сводится к тому, что sRGB — это гамма-корректированная версия RGB. Первоначально это было сделано для того, чтобы компенсировать отклик старых ЭЛТ-мониторов. Чтобы отобразить пиксель примерно с половинной яркостью, нужно было отправить на экран 187 вместо 128.
Общий гамма-фактор составляет примерно 2,2.
Таким образом, чтобы (примерно) преобразовать из linearRGB в sRGB, возведите входное значение в степень (1/2,2)
0.5 ^ (1/2.2) = 0.7297
0.7297 * 256 ~= 187