svgにおいては画像の合成も容易に定義できる．本項ではこれら画像合成処理に関わる要素について示す．
svgにおいては画像の合成も容易に定義できる．本項ではこれら画像合成処理に関わる要素について示す．
※本属性はSVG2にて廃止となった
クリップは描画範囲の制限を意味する．clip属性をsvg，symbol，pattern要素に設定すると図形の描画範囲を制限することが出来る．が，この属性はhtmlにおけるcssとの整合性のために定義されているものであり，値の指定方法がsvgで一般的に用いられている記法（x，y，width，height）と異なるため扱いにくく，ブラウザにおける対応状況もまちまちである．実際には次項で示すclipPath要素を用いるのが良いだろう.
clipPath要素は任意のクリップ領域を定義する．他の要素はこのclipPath要素をclip-path属性に設定することでstrokeやfillによる描画の範囲を制限することが出来る．clipPath要素の子に配置された図形要素の外形がクリップ領域として解釈される．image要素なども設定できるが，単なる矩形として扱われるため意味がない．またg要素，use要素を用いることはできないので，どうしても必要であればmask要素を用いると良い．
クリップ図形にはtransform属性を設定することが可能だ．
この機能を使うと境界部で色を変えると言った処理を実現できる．
クリップ領域を反転するのは簡単ではないが，下記に示すmask要素を用いることで同様の効果を得ることができる．
以下はclipPathのみで六角形を作ってみた例である．(実用性は全くない)
クリップと同様の機能を提供するものとしてマスクがある．mask要素を設定することでマスク画像を定義することが出来る．クリップが画像の繰り抜きであることに対し，マスクは画像の合成を行なって透かしのような効果を得る．マスク画像の輝度に応じた描画が為され，暗い部分ほど薄く（透明に）描画される．よってマスク画像の色味にはそれほど意味がない．なおマスク画像の色がwhiteである場合はクリップの場合と同じ結果となる．
マスク画像の塗り潰しを反転させることで，クリップ領域を反転させるような効果を得ることができる．
マスクによる合成はマスク画像の輝度がマスクを用いる側の不透明度として扱われる．
輝度の計算には計算式「r*0.2125+g*0.7154+b*0.0721」が用いられる．
赤緑青によって重み付けが異なるため，緑色はより明るく＝不透明度が高い（透明度が低い），赤色・青色は暗く＝不透明度が低い（透明度が高い）ものとして取り扱われる．
SVG2ではmask-typeプロパティを用いて不透明度(アルファ値)を元にマスクをかけることが可能だ．(CSS Masking Module Level 1)
下の2つのimage要素は同じマスク図形を参照しているが，マスク合成時に参照する値が異なるため出力結果に違いが現れている．
以下はmaskUnits，maskContentUnits属性の動作例である．pattern要素と同様に4パターンが考えられる．
マスク画像に外部画像を指定してみた．このほうがmask要素がどのような機能を持っているか直感的に判ると思う．
clipPath要素，mask要素と同様の処理はfilter要素でも行うことができるが，filter要素の生成する画像が（解像度が設定されるという意味で）ラスタ形式であるのに対し，mask要素はベクタ形式のまま画像の合成ができる点が異なる．
mask要素の応用を示す．通常のstroke処理では不可能な線の塗りのくり貫きを実現している．use要素を使って自分自身を使ったmask要素を定義するのがミソである．
先程の例を発展させ，二つの図形を互いにmaskがけすることで共通部を繰り抜いた例．
stroke属性による線は通常図形領域からはみ出て行われる．これをmask要素を使うことで図形の内部・外部のみに制限することが出来る．この特性を応用すると虹のような図形の重ね合わせも比較的容易に実現することが出来る．
svgにおけるクリップ・マスク処理は将来的にhtmlにおけるものと統合され，新たにcssマスキング仕様となる．
svgにおいて図形要素の描画範囲を制限する方法として，clipPath要素を用いる方法，mask要素を用いる方法，次の章で述べるfilter要素を用いる方法（矩形範囲に限る）の3つが挙げられる．これらは見た目上どれも同じ結果が得られるものの，カーソルイベントの発生において異なる結果となる．
単純な透明度による画像合成の為にopacity属性が定義されている．それぞれstroke，fill領域専用のものが提供されている．単色であればrgbaによる色の指定で代用することも出来る．
opacity属性がg要素やsymbol要素等のコンテナ要素及びuse要素に設定されていた場合，グループ化された図形全体に対する不透明度を定める．従って，一般的なfill属性などと異なり，単一の図形にopacity属性を定めた場合とコンテナ要素にopacity属性を定めた場合とで出力結果が異なる．
rgba関数による色の指定はsvg2から導入されることになっており，webブラウザではこれに先行する形で対応している．冒頭で説明した通り，opacity属性の代替となるとしたが，図形を重ねた場合に重なった部分の不透明度が変化する（上がる）と言った弊害もある．どうしてもrgbaを用いたい場合はclipPath要素もしくはmask要素と組み合わせることで，図形のグループ全体に単一の不透明度を施したものと同等の結果が得られる．
SVG2をサポートするWEBブラウザ環境においては上記clipPath/mask要素による合成の他， Compositing and Blending Level 1仕様を適用することが可能となった． この仕組みを用いることで元来filter要素とfeBlend要素とを組み合わせて行っていた合成処理をより簡潔に記述できる． 仕様の内，SVGに関わるプロパティはmix-blend-modeとisolationの2つである． なお，これらはSVGのプレゼンテーション属性には含まれていないためstyle要素・属性から指定する必要がある．
※なお，現状このプロパティが動作する環境はfirefox/chrome/opera/safari等ですが，場合によりブラウザ設定を変更する必要があります．またfirefoxでの実装は不安定です．
mix-blend-modeプロパティにブレンドモードを指定すると背景にグラフィック要素を合成(描画)する際の処理の内容を変更することが出来る．
SVG2におけるグラフィック要素の合成(描画)はg要素等のコンテナ要素の有無にかかわらず原則DOMツリーの上位から順に実行されていく†． この動作をisolationプロパティで制御することができる． isolation:isorateが指定されたコンテナ要素では， コンテナ要素内部のグラフィックが一旦背景とは別の(黒色透明な)スクリーンに書きだされ， その結果が背景と合成される．(この動作をg要素が分離されていると呼ぶ)
†SVG1.1以前の動作はisolation:isorateが指定されている場合と同等である．
例を示す． これらはRGB色のscreen合成を行ったものだが， 上ではpinkの背景色との合成が発生してしまっている．
この時g要素にisolation:isolateを指定することでscreen合成の結果が背景に合成されるようになる．
firefoxの一部のバージョンではisolateプロパティをサポートしていない． その代わりtransform属性を適用することで強制的にisolateとなってしまう．(この他にもviewBox属性の有無等に依存する．この場合，ほとんどのケースでisolateとなってしまう点に注意が必要．)