Сглаживание текста SVG перед применением фильтра

Question

Фильтры SVG растрируют исходное изображение, это означает, что отфильтрованный текст не будет сглаженным, что приведет к неровным краям.

Есть ли обходной путь для этого? Возможно ли использовать другой фильтр для имитации сглаживания, или, может быть, я могу каким-то образом сглаживать текст перед применением фильтра?

Relevant Filter:

<filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blur" />
  <feColorMatrix
    in="blur"
    mode="matrix"
    values="1 0 0 0 0
    0 1 0 0 0
    1 0 1 0 0
    0 0 0 15 -8"
    result="goo"
  />
  <feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>

Вот как это выглядит в песочнице

_{Свободный перевод вопроса Antialias SVG text before filter is applied? от участника @aleclarson.}

Answer 1

В этом ответе подробно разбиралась данная проблема

В качестве компромиссного решения можно попытаться:

Подобрать менее контрастные цвета для цвета букв и фона
К шрифту применить атрибут shape-rendering ="crispEdges"
Выбрать шрифт, у которого при рендеринге более резкие края

Например выбранный вами шрифт font-family="cursive" выглядит так:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="600" viewBox="0 0 400 400" >  
<text  x="35" y="150" font-size="100px" fill="black" font-family="cursive"> HELLO </text>
</svg>

font-family = "Monotype Corsiva" выглядит лучше.
Я думаю, что если расширить подбор шрифтов, то можно получить вариант совсем без зазубрин.

Применение фильтра SVG для сглаживания неровностей краев

Для фильтра feGaussianBlur выбраны параметры (последеяя строка матрицы) 0 0 0 29 -1

Для фильтра fecomposite operator="atop"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  
<defs>
  <filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
        
    </feGaussianBlur>   
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
</defs> 
<rect width="100%" height="100%" fill="silver" />
<text filter="url(#f)"  x="35" y="120" font-size="100px" fill="#444444" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>

Анимация атрибутов фильтра

<animate attributeName="stdDeviation" begin="0s" dur="8s"
  repeatCount="indefinite" values="1;6;12;12;6;1;1" />

Вариант c оператором = "atop"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  
<defs>
  <filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
   <animate attributeName="stdDeviation" begin="0s" dur="8s" repeatCount="indefinite" values="1;6;12;12;6;1;1" />
    </feGaussianBlur>       
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
</defs> 

<text filter="url(#f)"  x="35" y="120" font-size="100px" fill="#111111" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>

Вариант c оператором = "xor"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  
<defs>
  <filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
   <animate attributeName="stdDeviation" begin="0s" dur="8s" repeatCount="indefinite" values="1;6;12;12;6;1;1" />
    </feGaussianBlur>       
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="xor"/>
        </filter>
</defs> 

<text filter="url(#f)"  x="35" y="120" font-size="100px" fill="dodgerblue" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>

_{Свободный перевод ответа от участника @Alexandr_TT.}

БЛОГ НА HUSL

Сглаживание текста SVG перед применением фильтра

Ответы (1 шт):

Применение фильтра SVG для сглаживания неровностей краев

Анимация атрибутов фильтра