[HTML] Adding vector graphics to the web

벡터 그래픽은 파일 크기가 작고 확장성이 뛰어나서 확대하더라도 픽셀화되지 않는다.

벡터 그래픽이란 무엇인가?

웹에서는 raster image, vector image 로 2가지 유형의 이미지로 작업할 수 있다.

Raster image

• 픽셀 그리드로 정의
• raster image 파일에는 각 픽셀이 배치될 위치와 정확히 어떤 색이어야 하는지 보여주는 정보가 포함되어 있다.
• 예시 - .bmp, .png, .jpg, .gif

Vector image

• 알고리즘을 사용하여 정의된다.
• vector image 파일에는 컴퓨터가 화면에 렌더링할 때 이미지가 어떻게 보여야 하는지 계산하기 위해 사용할 수 있는 모양과 경로에 대한 정의가 포함되어 있다.
• SVG 형식은 웹에서 사용할 수 있는 강력한 벡터 그래픽을 만들게 해준다.

SVG란 무엇인가?

• 벡터 이미지를 설명하기 위한 XML 기반 언어이다.
• 이미지에 나타낼 도형을 정의하기 위한 여러 가지 요소와 도형에 적용하고자 하는 효과들이 있다.
• <circle> 과 <rect> 와 같은 간단한 모양을 만들기 위한 요소가 있다.
• 고급 SVG 기능으로는 <feColorMatrix>, <animate>, <mask> 등이 있다.
• 원과 직사각형을 만드는 SVG 코드

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

SVG 이미지를 만들기 위해 대부분 lnkscape 혹은 illustrator와 같은 벡터 그래픽 편집기를 사용한다.

장점

• 벡터 이미지의 텍스트에 접근 가능(SEO)
• SVG는 styling/scription에 잘 작동

단점

• 복잡한 SVG는 파일 크기가 커지고 브라우저에서 상당한 처리 시간이 소요 → raster image는 복잡한 정밀 이미지에서 더 낫다

페이지에 SVG 추가하기

1. 요소

• src 속성에 참조
• 높이, 너비 속성이 필요

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

• 장점
  • 브라우저에 의해 캐싱이 되어 최초 로드 이후 로드 시간이 빨라짐
  • <a> 요소 안에 <img>를 중첩하여 이미지를 하이퍼링크로 만들 수 있음
  • alt 속성에 텍스트 사용 가능
• 단점
  • JavaScript로 이미지를 조작할 수 없음
  • CSS로 SVG 콘텐츠를 제어하려면 SVG 코드에 인라인 CSS 를 포함해야 함
  • CSS 유사 클래스(:focus ) 를 사용하여 이미지 스타일 변경이 불가능

SVG를 지원하지 않는 브라우저의 경우 src 속성에 png를 로드하고 srcset 속성에 svg를 로드한다.

<img
    src="equilateral.png"
        srcset="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

SVG를 CSS 배경 이미지로 사용할 수 있다.

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

2. HTML 문서에 SVG 코드 추가(인라인 SVG)

SVG 코드를 HTML 문서에 붙여넣을 수 있으며 SVG 코드는 <svg> 태그로 시작하여 </svg> 태그로 끝난다.

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

• 장점
  • HTTP 요청이 캐싱되어 로드 시간 줄일 수 있음
  • class나 id 부여하여 CSS로 스타일을 지정할 수 있음
  • CSS 상호작용과 CSS 애니메이션 사용할 수 있음
  • SVG를 <a>로 감싸서 하이퍼링크로 만들 수 있음
• 단점
  • SVG 코드는 HTML 파일의 크기를 증가시킴
  • 브라우저는 일반 이미지를 캐시하므로 인라인 SVG는 캐시할 수 없음
  • <foreignObject> 요소에 fallback을 포하할 수 있지만 SVG 를 지원하는 브라우저는 어쨌든 fallback 이미지를 다운로드한다.

3. iframe을 사용하여 SVG 임베딩

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

이 방식은 좋은 방식이 아님!

• 단점
  • iframe은 fallback이 있지만 브라우저는 iframe에 대한 지원이 전혀 없는 경우에만 이를 표시
  • SVG와 현재 웹페이지의 origin이 동일하지 않으면 웹페이지에서 JavaScript를 활용하여 SVG를 조작할 수 없다.