Structuring a Basic SVG

SVGは本質的にXMLベースの寸法言語であり,2次元図形を記述するために用いられる.
MDNの定義は「SVGはHTMLでテキストのグラフィックに必要」
他のHTMLタグと同様に、widthやheightなどのプロパティを<svg>タグに追加できます.

<svg xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 100 100">
	<rect x=”10" y=”10" width=”80" height=”80" fill=”green” />
</svg>`

xmlms:SVGはXMLベースなので、SVG要素で要素を識別するために名前空間を宣言する必要があります.

SVGがHTMLにある場合、属性は必要ありません.ネーミングスペースはHTML解析で提供されています

rect:SVG内のレンダリング外観.

viewBox:viewboxプロパティは、SVGのサイズと位置を定義します.

min-xおよびmin-y:SVGの範囲内でViewBoxを移動または挿入します.

width and height:ViewBoxでの画像の拡大/縮小

Filter

SVGは、矩形<RECT>要素と同様に多くの他の要素を有する.要素の1つは<filter>です.
FilterはFilter Primitive ElementsグループをカバーするSVG要素である.Filter Primitiveは、画像に混ぜ合わせることができる色です.

<svg width="600" height="450" viewBox="0 0 600 450">
  <filter id="myFilter">
  <feGaussianBlur stDeviation="5"></feGaussianBlur>
  </filter>
  <image xlink:href="…" width="100%" height="100%" x="0" y="0" filter="url(#myFilter)"></image>
</svg>

画像を含むデフォルトのSVG要素とfilter要素が含まれます.フィルタ要素は、'fegaussianblur'というFilter Primitivをサブ要素として持つ.fegaussianblurSVG要素内にマッピングされた要素にgaussian blurを作成します.
上のsvgでは、画像タグに複数のプロパティがあります.

xlink:href:指定画像ファイルパス(ex./myImage.png)

x and y:画像を原点からx水平およびy垂直位置に配置します.

Filter:filter ID画像に基づいて必要なフィルタ効果を指定します.

feTurbulence filter mapped to an image

feTurbulence

FeTurbluenceフィルタは、要素マッピングにブラー効果をもたらします.

• filterおよび画像要素を含むSVG要素.
• 画像要素は、SVGネーミングスペースに配置されていない要素foiegnobjectを表示するためにタグ内にパッケージされる.
• FedisPlacementMapは、2つの入力(それぞれfilterおよび이미지)を受け入れ、2つの入力を出力する.
  filterはin2属性内で参照され、이미지는はin出力で参照される.
• feTurbulance要素にアニメーション要素が追加されています.フィルタにノイズを追加するプロパティは「BaseFrequency」

---

My Demo

<svg viewbOX="0 0 100 100">
  <filter id="filter1">
    <feTurbulence type="turbulence" baseFrequency="0.07 0.05" numOctaves="5" stitchTiles="stich" x="0%" y="0%" width="100%" height="100%" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" />
  </filter>
  <image xlink:href="https://picsum.photos/300/300" x="0%" y="0%" width="50%" height="100%" filter="url(#filter1)"></image>
</svg>

---

REFERENCE

• https://medium.com/swlh/using-the-svg-feturbulence-filter-for-wave-effects-2b8cb2546ee6