SVGフィルター効果ジェネレーター
ガイド
SVGフィルター効果ジェネレーター
デザインSVG <filter> 視覚的に効果を調整します。フィルタプリミティブ（ガウスブラー、色マトリクスのバリエーション（色の回転、飽和度、明るさをアルファに変換）、乱雑性と配置、ドロップシャドウ、またはコネクトマトリクスのプリセット（エマボス、エングラビング、鋭さ、エッジ検出））を選択し、スライダーを使ってパラメータを調整しながら、テキスト、形状、またはアップロードした写真のライブSVGプレビューを確認します。生成された <filter> XMLブロックと、すぐに貼り付けることができるCSS使用コードをコピーします。
使用方法
- ドロップダウンからフィルタプリミティブを選択します。 フィルター 設定をします。
- 一意の フィルタID — それが
idに適用され、<filter>のターゲットになります。url(#…). - 選択されたプリミティブのパラメータ（スライダー、色選択、ノイズタイプなど）を調整します。
- をテキスト、形状、または写真の間で切り替えます — 自分の画像をアップロードして、実際のコンテンツに適用された効果を確認できます。 プレビュー対象 ページに貼り付けます（どこにでも配置可能 — たとえば、非表示でサイズ0のSVG内に配置できます）。
- をコピーするか、ダウンロードアイコンをクリックしてください。生成された SVGフィルタXML 含まれたコードを使ってCSSで適用します：可用であれば、ネイティブショートハンドまたは
- フィルタプリミティブ7つ
filter: url(#filterId)CSSカスタムプロパティとは何ですか？
機能
- — ガウスブラー、色の回転、飽和度、明るさをアルファに変換、乱雑性と配置、ドロップシャドウ、およびコネクトマトリクスのプリセット（エマボス、エングラビング、鋭さ、エッジ検出）。 — スライダーをドラッグするだけで即時的な視覚フィードバックを提供し、再構築ステップやフリックなし。
- リアルタイムSVGプレビュー プレビュー対象3つ
- — クリアなテキスト、基本的な形状、またはアップロードした写真に適用して、フィルタが実際のコンテンツにどのように見えるかを確認します。 出力2つ
- — 完全な XMLブロック（任意のSVGに貼り付ける準備ができています）と、ネイティブショートハンドが利用可能な場合のCSS使用コード。
<filter>ドロップシャドウと透過度 - — ネイティブCSSショートハンドが表現できない 、を組み合わせます。
feDropShadowは迅速なパスだが、属性の扱いが不一致であり、エッジケースでデータを失う可能性がある。SOAPレスポンスのプロダクション用途では、flood-opacityフィルタIDのセキュリティ処理 - — あなたの 値を、
idに安全に保持します。url(#…)参照を検出します。
よくある質問
-
CSSフィルタとSVGフィルタの違いは？
CSSフィルタショートハンド（ブラー、色の回転、ドロップシャドウなど）は、ブラウザが下位のSVGフィルタプリミティブにマッピングする固定リストの効果です。SVG は、それらのプリミティブ（feGaussianBlur、feColorMatrix、feTurbulence、feDisplacementMap、feConvolveMatrixなど）に直接アクセスし、それらを組み合わせて（変形、ノイズ、エマボス、チャンネル操作など）効果を作成できます。CSSでできるすべてのことはSVGでできますが、逆は成り立ちません。
-
feGaussianBlurのstdDeviation属性の意味は？
stdDeviationは、隣接ピクセルに適用されるガウス分布の標準偏差です。値が大きくなると、重みがより多くのピクセルに広がり、ブラー効果が強くなります。1つの数値（X軸とY軸の両方に均一なブラー）または2つのスペース区切りの数値（X軸とY軸で異なるブラー量）を指定できます。
-
feTurbulenceはどのように動作し、なぜfeDisplacementMapと組み合わせるのですか？
feTurbulenceは、baseFrequency（ノイズスケール）とnumOctaves（詳細レベル）で制御された、Perlin風のノイズをSVG画像にプロシージャルに生成します。そのノイズ自体はただの色のテクスチャです。feDisplacementMapはそのノイズをin2として取り込み、R/Gチャンネルを使って元のグラフィックのピクセルをずらし、自然な変形、煙、水の波紋、歪み効果を生成します。scale属性は、各ピクセルがどれだけずらせるかを制御します。
-
カーネルマトリクスとは何か、feConvolveMatrixがエマボスやエッジ効果をどのように生成するか？
feConvolveMatrixは、小さなマトリクス（カーネル）をすべてのピクセルにスライドさせ、各セルを対応する隣接ピクセルに掛け、結果を合計します。異なるカーネルは異なる効果を生み出します：上左から下右の隣接ピクセルを引くカーネルは、方向性の陰影として読み取られるエマボスを生み出します。-1を中心に配置したカーネルは、差分を強調し、エッジ検出や鋭さを高める効果を生み出します。order属性はカーネルサイズ（3x3マトリクスの場合、通常3）を設定し、divisor/biasは出力値を正規化します。
-
なぜSVGフィルタをCSS filter: url(#id)で適用すると機能しないのですか？
3つの一般的な原因：(1) CSSルールが適用されるとき、要素がDOMに存在していません — フィルタSVGをページ内にインラインで埋め込み、外部ファイルから読み込むのではなく、ブラウザがブロッキングするようにしてください。(2) 参照しているidが要素のidと一致していません（大文字小文字敏感、一意である必要があります）。(3) フィルタを適用している要素がサイズが0またはデフォルトのフィルタ領域によってカットされています — にx, y, width, heightを明示的に設定（たとえばx="-30%" y="-30%" width="160%" height="160%"）することで、ブラーまたはドロップシャドウなどの効果がソースの範囲を超えて伸びた場合にカットされないようにします。
恵 スコアボードが到着しました！
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！
必見ツール
すべて表示参加する
価値ある無料ツールの提供を継続するためにご協力ください
