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>`
사각형인 <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 태그 안에는 여러 개의 속성이 있습니다.
filter ID
를 기반으로 이미지에서 원하는 filter 효과를 지정합니다.feTurbulence 필터는 요소가 맵핑 된 것에 대해 흐린 효과를냅니다.
foiegnobject
태그 내에 래핑됩니다.FedisPlacementMap
는 두 개의 입력 (이는 filter
와 이미지
가되는)을 취하고 두 개의 입력을 출력합니다.filter
는 in2
속성 내에서 참조되고 이미지는
은 in 출력에서 참조됩니다.<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>