SVG フィルタを使用すると、SVG グラフィックやテキストに特殊効果を加えることができます。他の種類の要素には CSS エフェクトを使用します。
SVG フィルタの効果の例（左端は元の SVG）
SVG フィルタを追加、編集する方法:
- SVG 要素またはテキスト要素を右クリックします。
- ポップアップ メニューから [SVG フィルタを追加] を選択します。フィルタがすでに適用されている場合は、[SVG フィルタを編集] を選択します。
- [SVG フィルタの編集] ダイアログ右側のパネルにある [フィルタ] プルダウンからフィルタを選択します。
- フィルタ設定をカスタマイズします。
- [保存] をクリックします。設定がカスタム フィルタとして保存されます。
注: SVG フィルタは、メディアルールがアクティブな場合は適用できません。
テキスト要素
テキスト要素に SVG フィルタを適用すると、テキストは SVG に変換され、テキストツールでの編集ができなくなります。SVG テキストは折り返しなしの 1 行で表示されるため、改行はすべて削除されます。SVG フィルタを削除すれば、変換前の状態に戻せます。
[SVG フィルタの編集] ダイアログでは、テキストに対して次の変更を行えます。
- テキスト（テキスト コンテンツ）
- フォントサイズ
- テキストの色
フィルタとその設定
なし
SVG 要素にいずれの効果も適用しません。SVG フィルタで SVG に変換されたテキストは、テキスト要素に復元されます。
オーラ
SVG 要素をオーラのような模様で囲みます。
| 設定 | 説明 |
|---|---|
| X 範囲 | オーラの水平範囲。 値を同一に保つ  - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| Y 範囲 | オーラの垂直範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| 色 | オーラの色。 |
縁取り
SVG 要素の縁を面取りしたような効果を与えます。
| 設定 | 説明 |
|---|---|
| 丸み | 面取りの曲率。 |
| 深さ | 縁の深さ。 |
ぼかし
SVG 要素にぼかしを加えます。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。要素のぼかし具合を指定します。 |
| X 範囲 | ぼかしの水平範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| Y 範囲 | ぼかしの垂直範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
クレーター
SVG 要素にクレーターのような模様を付けます。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。クレーターのサイズを指定します。 |
| 深さ | クレーターの深さ。 |
| 角度 | クレーターの角度。 |
ディゾルブ
SVG 要素のところどころに浸食されたような模様を付けます。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。ディゾルブ領域のサイズを指定します。 |
| 明確さ | 元の輪郭が保持される度合い。 |
ドロップ シャドウ
SVG 要素にドロップ シャドウを付けます。
| 設定 | 説明 |
|---|---|
| 影 X | 要素に対する影の水平オフセット。 値を同一に保つ - このボタンを有効にすると、影 X と影 Y の両値が同一に保たれます。 |
| 影 Y | 要素に対する影の垂直オフセット。 値を同一に保つ - このボタンを有効にすると、影 X と影 Y の両値が同一に保たれます。 |
| ぼかし半径 | 影のぼかしの範囲。値を大きくするほど、影のぼかし具合が大きくなります。 |
| 色 | 影の色。 |
輝き
SVG 要素に光が当たっているような効果を加えます。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。SVG 要素のどの程度の部分に光が当たっているかを指定します。 |
| 光源の高さ | 光源の高さ。SVG 要素に当たる光の角度を調整します。 |
| 色 | 光の色。 |
発光
SVG 要素が発光しているような効果を加えます。
| 設定 | 説明 |
|---|---|
| X 範囲 | 発光の水平範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| Y 範囲 | 発光の垂直範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| 色 | 発光の色。 |
インフレート
SVG 要素が風船のように膨らんで見える効果を加えます。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。要素がどの程度 3 次元的に見えるかを指定します。 |
| 色付けする色 | 要素から照り返す光の色。 |
| 色付けの強さ | 照り返す光の色の強さ。 |
| 影 X | 要素に対する影の水平オフセット。 |
| 影 Y | 要素に対する影の垂直オフセット。 |
アウトライン
SVG 要素に輪郭線を加えます。
| 設定 | 説明 |
|---|---|
| X 範囲 | 輪郭線の水平範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| Y 範囲 | 輪郭線の垂直範囲。 値を同一に保つ - このボタンを有効にすると、X 範囲と Y 範囲の両値が同一に保たれます。 |
| 色 | 輪郭線の色。 |
セピア
SVG 要素の色をセピア調にします。
| 設定 | 説明 |
|---|---|
| 明るさ | 要素の明るさ。 |
しぶき
SVG 要素が液体に飛び込んだように見える効果を加えます。2 種類の滴がはね上がる効果が生成されます。次の例では、「滴 1」が紫、「滴 2」が青です。
| 設定 | 説明 |
|---|---|
| スケーリング | 全体的効果のスケーリング。液体の飛沫のサイズを指定します。 |
| パターン | 10 種類のしぶきパターンのいずれかを選択します。 |
| 明るさ | 要素の明るさ。 |
| 分離 | 要素が溶解したように見える程度。 |
| 滴 1 のスケーリング | 1 つ目の滴効果のスケーリング。 |
| 滴 1 のぼかし | 1 つ目の滴効果のぼかし具合。 |
| 滴 2 の色 | 2 つ目の滴効果の色。 |
| 滴 2 のスケーリング | 2 つ目の滴効果のスケーリング。 |
| 滴 2 のぼかし | 2 つ目の滴効果のぼかし具合。 |
ざらざら
SVG 要素にテクスチャの外観を適用します。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。テクスチャ セグメントのサイズを指定します。 |
| 色付けする色 | 色合い。 |
| 色付けの強さ | 色合いの強さ。 |
| ぼかし | 要素のぼかし具合。 |
| 丸み | 各テクスチャ セグメントの曲率。 |
| パターン | 10 種類のテクスチャ パターンのいずれかを選択します。 |
歪み
SVG 要素に歪みを加えます。
| 設定 | 説明 |
|---|---|
| スケーリング | 効果のスケーリング。歪みの波型のサイズを指定します。 |
| 歪み | 歪みの激しさ。 |