[HTML] <object> 및 svg

 

 

svg

• 벡터 이미지를 표현하기 위해 만들어진 XML 파일 형식의 마크업 언어
• CSS/JS나 코드로 수정이 가능해서 다른 이미지 형식보다 강력한 기능을 가짐.
• <svg></svg>

 

 

<object>

• 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 객체를 정의함
• 오디오, 비디오, svg 등
• data=”객체에 해당하는 파일”
• type=”data 속성에서 명시된 데이터의 미디어 타입”
  • svg 사용시 type=”image/svg+xml”

 

 

클립 패스 설정법

• <defs> 에서 <clipPath> 정의
  • <defs> : 모든 SVG 필터가 안에 존재하는 태그
  • <clipPath> :클리핑 마스크의 클립 영역 패스 정의
    • <rect> : 좌표, 좌우길이
    • viewBox=”x좌표 y좌표 가로길이 세로길이”
    • fill=”색채우기”
• <g> 등에서 clip-path=”url(#clipPath id명)” 속성으로 참조

 

 

<path>

• 선과 면을 이용한 태그
• d 라는 속성을 이용해 패스 데이터를 사용할 수 있습니다.