Фильтр Гаусса для svg-изображения

SVG-графика приобретает все большую популярность. Особенно с распространением адаптивных шаблонов ее роль стала решающей. Качественное изображение признак того, что вы попали на приличный сайт. Согласитесь, картинка слева привлекает внимание и хочется понять как она устроена. Это - векторная графика в формате svg. Кстати, попробуйте ее скопировать. Не получилось? Вот вам и защита от копипаста. Но, это изображение не просто нарисовано. Оно получено из изображения круга применением фильтра. Степень размытия можно регулировать, цвет менять, размеры круга тоже. Вкратце поясним некоторые элементы изображения: тег circle> – это круг, аттрибуты cx, cy – задают положение центра круга, fill – заливка, r – радиус. Сам фильтр определяется в секции defs с помощью тега filter. Ему необходимо задать id (уникальный в контексте всего документа). У нас это id="myFilter1". Внутри описываются типы применяемой фильтрации. В нашем примере это feGaussianBlur, где атрибут stdDeviation регулирует уровень размытия. Забегая вперед, скажем, что спецификация определяет несколько типов фильтрации с большим количеством возможных атрибутов для настройки их параметров. Далее к той части SVG, которая должна быть обработана фильтром, нужно добавить атрибут filter="url(#myFilter1)" с указанием id фильтра. Ну и собственно, дальше код фильтра:
<defs> <filter id="myFilter1"> <feGaussianBlur stdDeviation="10"/> </filter> </defs> Фильтр был применен к изображению окружности:
<circle cx="110" cy="110" fill="#3498db" filter="url(#myFilter1)" r="89"/> Если вас заинтересовал этот пример, то его полный код можно получить здесь.