Structuring a Basic SVG

SVG는 본질적으로 2D 그래픽을 설명하기위한 XML 기반 마크업 언어입니다.
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 and min-y : SVG의 범위 내에서 ViewBox를 이동하거나 삽입합니다.
  • width and height : ViewBox에서 이미지를 확대 / 축소합니다

Filter

사각형인 <RECT> 요소와 마찬가지로 SVG는 다른 많은 요소를 가지고 있습니다. 그 요소 중 하나는 <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 요소가 포함되어 있습니다. filter 요소는 'fegaussianblur'라는 Filter Primitiv를 자식 요소로 가지고 있습니다. fegaussianblur는 SVG 요소 내에 맵핑 된 요소에 gaussian blur을 생성합니다.

위의 svg안의 image 태그 안에는 여러 개의 속성이 있습니다.

• xlink:href : 이미지 파일 경로 지정 (ex. /myImage.png)
• x and y : 이미지를 원점에서 x-가로 및 y-수직으로 위치시킵니다.
• Filter : filter ID를 기반으로 이미지에서 원하는 filter 효과를 지정합니다.

feTurbulence filter mapped to an image

feTurbulence

feTurbulence 필터는 요소가 맵핑 된 것에 대해 흐린 효과를냅니다.