SVG

clipPath 要素で SVG 画像を切り抜く

コメントをどうぞ

clipPath 要素を使うと自由な形に SVG 内の画像を切り抜くことができます。
clipPath 要素を defs 要素で囲み定義化し ID をふります。clipPath 要素内にはくり抜きたい形を SVG で描写します。

くり抜きを適用したい image 要素へ clip-path 属性を設定し、clipPath 要素に付与した id をリンク先として指定します。

<svg width="500" height="300">
  <defs>
    <clipPath id="sample">
      <circle cx="230" cy="150" r="130" />
    </clipPath>
  </defs>
  <image x="0" y="0" width="500" height="300"
         xlink:href="1.jpg" clip-path="url(#sample)" />
</svg>

上記コードのブラウザでの表示
clipPath 要素で画像を切り抜いた表示例

clipPath 要素内にテキストを定義すればテキストでくり抜くこともできます。

<svg width="500" height="300">
  <defs>
    <clipPath id="sample">
      <text x="50" y="180" fill="#fff" font-weight="bold" font-size="100">nekoco</text>
    </clipPath>
  </defs>
  <image x="0" y="0" width="500" height="300"
         xlink:href="1.jpg" clip-path="url(#sample)" />
</svg>

上記コードのブラウザでの表示
clipPath 要素でテキストの形にくりぬいた表示例

SVG

SVG 画像へ pattern 要素を使ってパターンををかける

コメントをどうぞ

pattern 要素を使うと SVG 画像へパターンをかけることができます。
グラデーションの時と同じく、pattern 要素を defs で囲み定義化し、pattern 要素に付与した ID をパターンを適用したい画像要素の fill 属性へリンクします。

パターンの作成は、pattern 要素内へパターン化したい図形を描写します。pattern 要素の width height 属性で1つのパターンの大きさを指定し、viewBox 属性でパターンを切り出す範囲を指定します。x y 属性でそのバターン図形を始める位置を指定します。patternUnits 属性に userSpaceOnUse を指定したほうが分かりやすく指定ができます。

<svg width="500" height="300">
  <defs>
    <pattern id="sample" viewBox="0 0 20 20" 
       x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="5" fill="red" />
    </pattern>
  </defs>
  
  <rect x="30" y="50" width="200" height="200" fill="url(#sample)" />
</svg>

上記コードのブラウザでの表示
pattern 要素で SVG 画像へパターンをかけた表示例

stroke にパターンをかける

こちらもグラデーションと同じく stroke へパターンを指定することも可能です。stroke の色指定を pattern の id にします。

<svg width="500" height="300">
  <defs>
    <pattern id="sample" viewBox="0 0 5 5" 
       x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
        <circle cx="3" cy="3" r="2" fill="red" />
    </pattern>
  </defs>
  
  <rect x="30" y="50" width="200" height="200" fill="none" stroke="url(#sample)" stroke-width="30" />
</svg>

上記コードのブラウザでの表示
stroke にパターンをかけた表示例

SVG

SVG 画像へ radialGradient 要素を使って円形のグラデーションをかける

コメントをどうぞ

インライン SVG 画像へ円形のグラデーションをかけるには、radialGradient 要素を使用します。

linearGradient 要素の場合と同じく、linearGradient 要素を defs 要素で囲い定義化し、linearGradient 要素に付与した ID をグラデーションを適用したい画像要素の fill 属性へリンクします。

グラデーションを作る stop 要素も linearGradient 要素と同じく2つ以上指定し、始点と終点の位置と色を指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
radialGradient 要素を使って円形のグラデーションをかける

radialGradient 要素でかけたグラデーションの位置を変更する

円の中心から少しずらしてグラデーションをかけたい場合は、勾配ベクトルで位置を調整します。円形のグラデーションの場合は radialGradient 要素に cx cy 属性で位置の調整。r 属性でグラデーションの大きさの調整ができます。

グラデーションの位置を左上にしたい場合は、radialGradient 要素へ cx=”0.2″ cy=”0.2″ と指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample" cx="0.2" cy="0.2">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
radialGradient 要素でかけたグラデーションの位置を変更した表示

さらに、グラデーションの範囲を広げたい場合は、r 属性に 0.5 以上の値を指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample" cx="0.2" cy="0.2" r="0.8">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
グラデーションの範囲を広げた表示

グラデーションの中心、焦点の位置を変更する

radialGradient 要素に fx fy 属性を指定することで焦点をずらすことができます。それぞれ 0.5 の指定が円の中心となります。中心より左又は、上におきたい場合は、fx 値を0.5以下、右又は下に置きたい場合は 0.5 以上 1 以下の数字を指定します。

焦点を左の少し下に置きたい場合、fx=”0.3″ fy=”0.6″ と指定します。

<svg width="200" height="200">
    <defs>
    <radialGradient id="sample" cx="0.2" cy="0.2" r="0.8" fx="0.3" fy="0.6">
      <stop offset="0%"   stop-color="#fff" />
      <stop offset="100%" stop-color="#666" />
    </radialGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
グラデーションの中心、焦点の位置を変更した表示

SVG

SVG 画像へかけたグラデーションの角度を変える

コメントをどうぞ

stop 要素でかけたグラデーションの角度を変更するには、gradientTransform 属性を使用する方法と、勾配ベクトルを使用する方法があります。

gradientTransform 属性で変更する

gradientTransform 属性を使用して角度を変更するには、gradientTransform 属性へ rotate と 角度を指定します。
linearGradient 要素へ gradientTransform=”rotate(45)” と属性を指定するとグラデーションが45度の角度になります。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" gradientTransform="rotate(45)">
      <stop offset="20%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
45度でグラデーションをかけた例

縦方向へグラデーションをかけたい場合は、gradientTransform=”rotate(90)” にします。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" gradientTransform="rotate(90)">
      <stop offset="30%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
縦方向へグラデーションをかけた例

勾配ベクトルで角度を変更する

勾配ベクトルでグラデーションの角度を変更するには、x1 y1 x2 y2 の属性と値を指定します。

45度のグラデーションにする場合は、linearGradient 要素へ x1=”0″ y1=”0″ x2=”1″ y2=”1″ と指定します。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" x1="0" y1="0" x2="1" y2="1">
      <stop offset="30%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
勾配ベクトルで45度のグラデーションをかける

縦方向へグラデーションをかけたい場合は、linearGradient 要素へ x1=”0″ y1=”0″ x2=”0″ y2=”1″ と指定します。

<svg width="200" height="200">
    <defs>
    <linearGradient id="sample" x1="0" y1="0" x2="0" y2="1">
      <stop offset="30%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
     
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードの表示
勾配ベクトルで縦方向へグラデーションをかける

SVG

SVG 画像へ linearGradient 要素を使って線状のグラデーションをかける

コメントをどうぞ

インライン SVG 画像へグラデーションをかけるには、linearGradient 要素を使用します。linearGradient 要素を defs 要素で囲い定義化し、linearGradient 要素に付与した ID をグラデーションを適用したい画像要素の fill 属性へリンクします。

グラデーション自体は、stop 要素で作ります。stop 要素には offset 属性と stop-color 属性を指定します。offset 属性は左端を始点にどこの位置までグラデーションを適応するかを指定し、stop-color 属性で、始点からの変化する色を指定します。

例えば、offset=”100%” stop-color=”red” とした場合は始点から終点までが全て red の指定になるためベタ塗りの赤となります。グラデーションを描写するには、最低2つの stop 要素が必要になります。

以下のコードでは、始点がオレンジ、終点が赤のグラデーションができます。

<svg width="250" height="250">
    <defs>
    <linearGradient id="sample">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
    
    <circle cx="100" cy="100" r="90" fill="url(#sample)" />
</svg>

上記コードのブラウザでの表示
始点がオレンジ、終点が赤のグラデーション

stroke にグラデーションをかける

stroke の色指定を linearGradient の id にすれば、stroke 部分にもグラデーションを適用できます。

<svg width="600" height="200">
    <defs>
    <linearGradient id="sample">
      <stop offset="0%"   stop-color="orange" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
    <rect x="50" y="50" width="500" height="100" fill="none" stroke="url(#sample)" stroke-width="20" />
</svg>

上記コードのブラウザでの表示
stroke にグラデーションをかけた

SVG

SVG の filter 要素でモノクロにしたり色相を変える – feColorMatrix

コメントをどうぞ

feColorMatrix を使うと色変換を行うフィルターをかけることができる。type 属性に行列演算の種類 matrix（変換行列を指定して色を変換）/saturate（彩度を変更）/hueRotate（色相を変換）/luminanceToAlpa（明度を抽出） を指定し、values 属性に各効果の値を指定する。

saturate 値（彩度）でモノクロのフィルターをかける

モノクロのフィルターをかけた

上記例のソースコード

<svg width="500" height="400">
  <defs>
    <filter id="sample">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image x="40" y="40" width="400" height="280" xlink:href="hana.png" filter="url(#sample)" />

hueRotate（色相を変換）で色を変更するフィルターをかける

◆ 元画像
フィルターをかける前の元画像

◆ hueRotate で花を赤にした
hueRotate で花を赤にした

上記例のソースコード

<svg width="500" height="400">
  <defs>
    <filter id="sample">
      <feColorMatrix type="hueRotate" values="400" />
    </filter>
  </defs>
  <image x="40" y="40" width="400" height="280" xlink:href="hana.png" filter="url(#sample)" />
SVG

SVG の filter 要素で筆でかいたような効果をだす – feMorphology

コメントをどうぞ

feMorphology フィルターを使うと筆で書いたような効果を出せる。operator 属性で、画像の侵蝕（細らせる）erode /膨張（太らせる）dilate のどちらかを指定できる。radius 属性で x y 方向の半径の長さを指定できる。一つだけの指定だった場合は xy 同じ値になる。

operator=”erode”（侵蝕） radius=”5″ を指定した表示例

◆ 元の画像（フィルター適応前）

1-2

◆ フィルター適応後

operator=

上記例のソースコード

<svg width="500" height="400">
  <defs>
    <filter id="sample">
      <feMorphology operator="erode" radius="5" />
    </filter>
  </defs>
  <image x="40" y="40" width="420" height="280" xlink:href="hana.png" filter="url(#sample)" />
</svg>

operator=”dilate”（膨張） radius=”5″ を指定した表示例

operator=

上記例のソースコード

<svg width="500" height="400">
  <defs>
    <filter id="sample">
      <feMorphology operator="dilate" radius="5" />
    </filter>
  </defs>
  <image x="40" y="40" width="420" height="280" xlink:href="hana.png" filter="url(#sample)" />
</svg>
SVG

SVG の filter 要素でぼかし効果を出す – feGaussianBlur

コメントをどうぞ

ぼかし効果を出すには feGaussianBlur フィルターを使用する。stdDeviation 属性で x 方向、y 方向のぼけの長さを指定できる。一つだけ長さを設定するとxy両方向その長さになる。

<svg width="500" height="400">
  <defs>
    <filter id="sample">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  <image x="40" y="40" width="420" height="280" xlink:href="hana.png" filter="url(#sample)" />
</svg>

stdDeviation=”5″ で設定したフィルターの表示例

上記コードの stdDeviation=”5″ で設定した表示例。
stdDeviation=

stdDeviation=”0 10″ で縦方向にだけぼかしたフィルターの表示例

縦方向にだけぼかしたフィルターの表示例

ソースコードは以下。

<svg width="500" height="400">
  <defs>
    <filter id="sample">
      <feGaussianBlur stdDeviation="0 10" />
    </filter>
  </defs>
  <image x="40" y="40" width="420" height="280" xlink:href="hana.png" filter="url(#sample)" />
</svg>
SVG

SVG の filter 要素を使って画像を加工する

コメントをどうぞ

SVG のフィルター機能を使うと画像にぼかしを入れたり、色相を変更したりできる。まず基本的な filter 要素の使い方について。

SVG タグ内で filter 要素を defs タグで囲い filter を定義化する。filter 要素には id を付けておく。フィルターをかけたい要素へ filter 属性で定義化した filter 要素の id を参照先として記入する。

以下の例で使用したフィルターは「ぼかし」である feGaussianBlur フィルタを適用したもの。stdDeviation でぼかしのサイズを指定して使用する。

<svg width="500" height="250">
<defs>
	<filter id="sample">
		<feGaussianBlur stdDeviation="5" />
	</filter>
</defs>
<circle cx="100" cy="100" r="90" fill="#F46860" filter="url(#sample)" />
</svg>

feGaussianBlur フィルタでぼかした

表示範囲について

x y width height 属性 でフィルターをかける範囲を決めることができる。x y が指定されていない場合は -10% が指定されている状態になる。width height にはマイナス値の設定はできない。また、width height に値が指定されていない場合は、120％が指定されている状態となる。

x=”0%” y=”0%” width=”100%” height=”100%” を設定した場合以下のようになる。

x y width heightを設定した場合

上記画像のソースコードは以下。

<svg width="270" height="250">
<defs>
	<filter id="sample" x="0%" y="0%" width="100%" height="100%">
		<feGaussianBlur stdDeviation="5" />
	</filter>
</defs>
<circle cx="130" cy="120" r="90" fill="#F46860" filter="url(#sample)" />
</svg>

in 属性について

フィルターの in 属性 SourceGraphic 値（デフォルト値）で元画像にフィルターをかけ、SourceAlpha 値で元画像の不透明値（かげ）に対してフィルターをかけることができる。

左がデフォルト値、右がSourceAlpha 値を設定した例。
in 属性を指定した例

ソースコードは以下。

<svg width="500" height="250">
<defs>
	<filter id="sample">
		<feGaussianBlur stdDeviation="5" in="SourceGraphic" />
	</filter>
	<filter id="sample2">
		<feGaussianBlur stdDeviation="5" in="SourceAlpha" />
	</filter>
</defs>
<circle cx="130" cy="120" r="90" fill="#F46860" filter="url(#sample)" />
<circle cx="370" cy="120" r="90" fill="#F46860" filter="url(#sample2)" />
</svg>
SVG

SVG の表示する範囲を指定する – viewBox

コメントをどうぞ

viewBox 属性を指定すると SVG の表示範囲を決めることができます。

viewBox 属性は4つの値を「左上の x 座標」「左上の y 座標」「横幅」「高さ」の順に指定します。
以下の指定では、x 軸が -140、y 軸が -25 を起点として、横幅 500px 縦 250px の範囲を表示します。

<svg width="500" height="250" viewBox="-140 -25 500 250">
    <circle cx="100" cy="100" r="120" fill="#F46860"/>
</svg>

サンプル

上記のコードの実行サンプルです。下の円は同じ SVG 画像ですが viewBox の指定をしていないため描写しきれずはみ出してしまいました。

viewBox を使って SVG 画像を縮小/拡大する

viewBox の表示範囲の指定と SVG のサイズを異なる指定にすると画像の縮小をすることができます。

SVG 画像のサイズよりも大きい viewBox の指定をすると縮小して表示されます。

<svg width="500" height="270" viewBox="-140 -25 600 300">
    <circle cx="100" cy="100" r="120" fill="#F46860"/>
</svg>

逆に viewBox の表示範囲を SVG よりも小さくすると拡大して表示されます。

<svg width="500" height="250" viewBox="-140 -25 250 125">
    <circle cx="100" cy="100" r="120" fill="#F46860"/>
</svg>

サンプル

上記のコードの実行サンプルです。一番上は SVG と viewBox を同じ大きさになっています。