필터 효과

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 SVG(Scalable Vector Graphics) 필터 효과를 새롭게 지원합니다. SVG 필터를 사용하면 Adobe Photoshop 등의 응용 프로그램과 비슷하게 브라우저에서 직접 그래픽을 조작할 수 있습니다. 다음 SVG 그래픽을 고려해 보세요.

SVG 로고

SVG 필터 요소를 사용하면 이러한 간단한 그래픽을 좀 더 눈에 잘 띄는 형태로 쉽게 변형할 수 있습니다.

필터 요소가 적용된 SVG 로고

이러한 두 이미지는 W3C SVG 사양필터 예제에서 직접 가져온 것입니다. 이 정식 예제를 자세히 살펴보겠습니다. 첫 번째 그래픽은 두 개의 SVG 경로와 text"SVG"이며 다음 태그로 렌더링됩니다.


<g>
  <path fill="none" stroke="#D90000" stroke-width="10" 
        d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> 
        <!-- Outer hollow area. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> 
        <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> 
    <!-- The text "SVG". -->
  </g>
</g>


<g> 그룹에 SVG 필터 효과를 적용하려면 필터를 정의하고 MyFilter 등의 이름을 지정한 후 다음과 같이 그룹에 적용합니다.


<g filter="url(#MyFilter)">
  <path fill="none" stroke="#D90000" stroke-width="10" 
        d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> <!-- Outer hollow arena. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> <!-- The "SVG" text. -->
  </g>
</g>


두 번째 이미지에서 효과를 만드는 데 사용된 필터를 이해하기 위해 전체 예제를 살펴보겠습니다. 이 예제는 SVG 문서와 반대로 HTML5 문서 내에서 작동하도록 원본에서 약간 수정되었습니다.


<!DOCTYPE html>
<html><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example filters01.svg - introducing filter effects</title>
</head><body>
  <svg width="7.5cm" height="5cm" viewBox="0 0 200 120">
    <desc>An example that combines multiple filter primitives
          to produce a 3D lighting effect on a graphic. The graphic contains the
          string "SVG" sitting on top of an oval filled in red
          and surrounded by an oval outlined in red.</desc>
    <defs>
      <filter id="MyFilter" filterUnits="userSpaceOnUse">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
        <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
        <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                            specularExponent="20" lighting-color="#bbbbbb"  
                            result="specOut">
          <fePointLight x="-5000" y="-10000" z="20000"/>
        </feSpecularLighting>
        <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
        <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                     k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
        <feMerge>
          <feMergeNode in="offsetBlur"/>
          <feMergeNode in="litPaint"/>
        </feMerge>
      </filter>
    </defs>
    <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />   
    <g filter="url(#MyFilter)" >
      <g>
        <path fill="none" stroke="#D90000" stroke-width="10" 
              d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
        <path fill="#D90000" 
              d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
        <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
          <text x="52" y="76">SVG</text>
        </g>
      </g>
    </g>
  </svg>
</body></html>


먼저 적절한 사용자 단위와 크기를 가진 SVG  뷰포트를 만듭니다.


<svg width="7.5cm" height="5cm" viewBox="0 0 200 120">

id 특성을 사용하여 필터에 이름을 지정합니다.


<filter id="MyFilter" filterUnits="userSpaceOnUse">

이 필터는 번호가 매겨진 다음 6개 필터 primitive(5개는 고유함)로 구성됩니다.

1. feGaussianBlur
2. feOffset
3. feSpecularLighting
4. feComposite
5. feComposite
6. feMerge

필터 primitive를 함께 연결하면 primitive 출력이 다른 primitive의 입력이 될 수 있으므로 복잡한 효과를 만들 수 있습니다. 예를 들어 feGaussianBlur의 출력(result="blur")이 feOffset의 입력(in="blur")이 됩니다.

SourceGraphic 키워드는 필터가 적용된 원본 이미지를 나타냅니다. 이 경우 원본 이미지는 <g> 요소 내의 모든 항목입니다.


<g filter="url(#MyFilter)" >
  <g>
    <path fill="none" stroke="#D90000" stroke-width="10" 
          d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
    <path fill="#D90000" 
          d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
    <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
      <text x="52" y="76">SVG</text>
    </g>
  </g>
</g>


또한 SourceAlpha 키워드는 원본 그래픽의 알파 채널을 나타냅니다. 일반적으로 알파 채널은 그래픽과 관련된 투명도 정보를 나타냅니다. 원본 그래픽의 이 구성 요소는 다음 순서도와 같이 첫 번째 필터 primitive인 feGaussianBlur에 제공됩니다.

SVG 순서도

필터에 대한 6가지 주요 단계는 이전 순서도에 번호가 매겨진 단계이며 다음과 같이 설명됩니다.

  1. 필터 primitive feGaussianBlur는 원본 그래픽의 알파 채널인 입력 SourceAlpha를 사용합니다. 이 결과는 "blur"라는 임시 버퍼에 저장됩니다. blur는 필터 primitive #2와 #3의 입력으로 사용됩니다.
  2. 필터 primitive feOffset은 blur 버퍼를 사용하고 그 결과를 양수 xy 방향으로 4픽셀만큼 이동한 다음 "offsetBlur"라는 새 버퍼를 만듭니다. 이 버퍼는 나중에 그림자 효과를 만드는 데 사용됩니다.
  3. 필터 primitive feSpecularLighting은 "blur" 버퍼를 화면 상승 모델로 사용하고 단일 지점 원본에서 조명 효과를 생성합니다. 이 결과는 "specOut" 버퍼에 저장됩니다.
  4. 필터 primitive feComposite는 중간 결과가 원본 그래픽보다 크지 않도록 필터 primitive #3의 결과를 원본 그래픽의 알파 채널로 마스킹합니다. 버퍼 이름 "specOut"이 결과를 저장하는 데 다시 사용됩니다.
  5. 필터 primitive feComposite는 반사 조명의 결과를 원본 그래픽과 결합합니다. 이 결과는 "litPaint" 버퍼에 배치됩니다.
  6. 필터 primitive feMerge는 두 개의 계층을 결합합니다. 하위 계층은 필터 primitive #2의 그림자 결과로 구성됩니다. 상위 계층은 필터 primitive #5의 반사 조명 결과로 구성됩니다. 뒤로 진행되는 것 같지만 마지막 SVG 요소가 이전에 렌더링된 모든 SVG 요소 "위"에 렌더링된다는 것에 유의하세요.

이전 예제와 마찬가지로 SVG 필터를 사용하여 브라우저에서 복잡한 그래픽을 쉽게 만들 수 있습니다. JavaScript를 통해 SVG 필터를 제어할 수 있기 때문에 SVG 필터는 매끄럽고 유연하며 JavaScript를 통해 애니메이션 효과를 준 환경을 최종 사용자에게 제공하는 다양한 그래픽 지향 응용 프로그램 및 사용자 인터페이스를 웹 개발자가 만들 수 있도록 합니다.

API 참조

SVG Element Reference(필터 효과가 "fe"로 시작됨)

샘플 및 자습서

SVG 필터 효과 샘플
SVG 필터를 사용하여 두 개의 래스터 이미지를 블렌딩하는 방법

Internet Explorer 테스트 드라이브 데모

실습: SVG 필터 효과

IEBlog 게시물

IE10의 SVG 필터 효과

사양

SVG(Scalable Vector Graphics) 1.1(버전 2): 섹션 15

 

 

표시:
© 2014 Microsoft