◇ SVG란?
SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어로 CSS, DOM, JavaScript 등 다른 웹 표준과도 잘 동작하도록 설계되었다.
JEPG, PNG 등 고전적인 비트맵 이미지 형식과 비교했을 때 SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 그래픽 편집툴 없이도 파일 내의 텍스트를 수정해서 쉽게 수정할 수 있다.
참고.
SVG 요소 referencce - https://developer.mozilla.org/ko/docs/Web/SVG/Element
SVG Attribute reference - https://developer.mozilla.org/ko/docs/Web/SVG/Attribute
SVG DOM interface - https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model#svg_interfaces
예제.
D3(JavaScript를 사용해서 데이터를 HTML, SVG, CSS로 시각화하는 라이브러리)
◇ 기본 속성
가장 주목해야 하는 것은 요소의 렌더링 순서로 위에서부터 아래로 렌더링 되며 요소는 아래에 위치할 수록 더 잘보이게 된다.
기본 도형 태그
| <rect>, <circle>, <line>, <polygon>, <path> 등.. |
SVG에는 모든 기본 모양에 대한 다양한 태그가 있다. 이 태그는 SVG 내에서 대부분의 요소를 만드는 데 사용된다.
텍스트 태그
| <text> |
텍스트 태그는 SVG 내부에 텍스트를 만드는데 사용되면 HTML의 텍스트와 마찬가지로 선택할 수 있고 액세스 할 수 있다.
접근성 태그
| <title>, <desc> |
제목, 설명 태그는 특히 필요한 옵션 컨텐츠를 제공하기 위한 것이며 화면에 표시되지 않는다.
그룹 태그
| <g> |
그룹태그는 SVG에서 매우 유용합니다. 이 태그는 요소를 그룹화하여 클래스 이름을 추가하고 애니메이션, 필터, 패턴 및 효과를 요소 그룹에 적용할 수 있게 한다.
Defs Tag
| <defs> |
defs 태그는 나중에 재사용할 수 있도록 만드는 요소를 정의하는데 사용한다. 여기서 패턴, 필터 및 마스크를 만들어 나중에 재사용할 수 있다. 아이콘 시스템을 만드는데 사용된다.
SVG 파일 형식
| 확장자 | .svg | .svgz |
| 설명 | SVG 마크업이 포함된 간단한 텍스트 파일이다. | 매우 큰 크기의 SVG 파일을 gzip로 압축하여 사용한다. 웹서버에 게시할 때를 제외하고 이 방식으로 사용을 피하는 것이 좋다. |
웹서버 업로드
SVG 파일을 서버에 업로드 하는 경우 다음과 같이 HTTP 헤더를 보내야 한다.
Content-Type: image/svg+xml
Vary: Accept-Encodinggzip로 압축된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야 한다.
Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding네트워크 모니터 패널이나 web-sniffer.net과 같은 사이트를 활용하면 서버가 SVG 파일과 함께 올바른 HTTP헤더를 보내고 있는 지 확인할 수 있다. SVG파일 중 하나의 URL을 전송하고 HTTP 응답헤더를 확인해보자 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야 한다.
서버 구성 페이지 참고- https://www.w3.org/services/svg-server/
SVG를 사용하는데 있어 서버구성오류가 SVG 로드에 실패하는 가장 일반적인 이유이므로 꼭 확인해보길 바란다. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않았다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할할 가능성이 크다.
◇ 네임스페이스란?
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tag here -->
</svg>XML 요소 간의 이름에 대한 충돌을 방지해주기 위해 네임스페이스가 지정되며 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(name space)를 올바르게 바인딩해야 한다. 네임스페이스 선언은 xmlns에 매개변수에 의해 제공되며 URI로 식별된다. 네임 스페이스 선언은 루트 요소에 한번만 제공하면 된다. 선언은 기본 네임 스페이스를 정의하므로 사용자의 모든 SVG 요소의 하위 항목도 동일한 네임스페이스에 속한다는 것을 의미한다.
네임스페이스 이름은 문자열일 뿐이므로 SVG 네임스페이스가 URI처럼 보인다는 사실은 중요하지 않다. URI는 고유하기 때문에 일반적으로 사용되며 의도는 어딘가에 "링크"하지 않는 것이다(URI가 너무 자주 사용되어 "네임스페이스 이름" 대신 "네임스페이스 URI"라는 용어가 일반적으로 사용됨)
루트 요소의 하위 항목에서 다른 네임스페이스의 콘텐츠를 혼합할 경우, 그냥 네임스페이스를 재정의하기만 하면된다.
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- some XHTML tags here -->
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<!-- some SVG tags here -->
</svg>
<!-- some XHTML tags here -->
</body>
</html>위의 예에서 xmlns 루트 <html> 요소의 매개변수는 기본 네임스페이스를 XHTML로 선언했다. 그리고 <svg>는 새로운 네임스페이스를 재정의했다. 결과적으로 <svg> 를 제외한 나머지 html 요소와 모든 자식 요소는 XHTML에 속하는 것으로 사용자 에이전트(브라우저)에 의해 해석된다. <svg>는 자체가 가지고 있는 xmlns의 매개변수로 해석된다.
◇ 렌더링 과정
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>1. SVG 루트 요소(element)부터 시작
- DTD 기반의 SVG 유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기함으로 (X)HTML로 알려진 Doctype 선언을 사용하지 않는다.
- 다른 유형의 유효성 검사를 위해 SVG 버전을 식별하려면 항상 version과 baseProfile속성(Attribute)을 사용해야 한다.
- XML 특수언어(dialect)로서 SVG는 (xmlsn속성에서) 항상 네임스페이스(namespace)를 올바르게 바인딩해야 한다.
2. 전체 이미지 영역을 포함하는 사각형 <rect />을 그려 배경을 빨간색으로 설정한다.
3. 빨간색 직사각형의 중앙에 반경 80px의 녹색원 <circle />이 그려진다.
4. 텍스트 "SVG"가 그려진다. 각 문자의 내부는 흰색으로 채워지고 텍스트는 중심점이 되고자 하는 지점에서 앵커를 설정하여 배치된다. 이 경우 중심점은 녹색 원의 중심에 일치해야 한다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있다.
'HTML' 카테고리의 다른 글
| <detail> - js없이 아코디언 메뉴 (0) | 2022.02.07 |
|---|