SVGグラデーションの実装

このようなぼやけたグラデーションをSVGで再現することは可能ですか？

はいといいえ。

Inkscapeでグラデーションメッシュを作成し、SVGとして保存することが可能です。ただし、ブラウザで使用されているSVG標準は、まだグラデーションメッシュをサポートしていません。これは将来変更される可能性がありますが、現時点では変更されません。

ブラウザで機能する別の方法は、いくつかのソリッドオブジェクトを追加し、それらをぼかして、クリッピングマスクに配置することです。これは純粋なベクターソリューションであり、ラスタライズされません。

必要に応じて、ブラウザで動作するバージョンのSVGを以下に示します。

編集：上記のSVGへのリンクは使用できなくなったため、削除しました。

IllustratorとInkscapeでグラデーションメッシュとして作成できます。レガシーIllustratorでSVGとして保存すると、ビットマップイメージに変換されます。明らかにIllustatorは6年前にそれを知っていましたが、SVG言語はそれを知りませんでした。

Inkscapeで、Inkscape SVGではなくプレーンSVGとして保存すると、グラデーションメッシュのままで、テキストエディターでSVGファイルを開くと、meshgradientコマンドが表示されました。コードスニペットを見る

したがって、標準を知らなくても、「少なくともInkscapeのプレーンSVGに実装されている」と言えるでしょう。

うまくいけば、誰かがSVG開発ステータスを認識しているプログラマーが何か正確なことを言っていると思います。

軽量でスケーラブルなメッシュグラデーションを作成することが目的の場合は、次の方法を試すことができます。

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

これはベクトルではありませんが、ファイルサイズが非常に小さく、画像が無限に拡大縮小されるため、そうなる可能性もあります。