2022-01-19 18:09 작성

웹에 벡터 그래픽 더하기

Table of contents
  1. 벡터 그래픽이란 무엇인가?
  2. SVG란 무엇인가?
  3. 페이지에 SVG 삽입하기
    1. 가장 빠른 방법: img element
    2. 문제해결과 교차 browser 지원
    3. HTML에 SVG code를 포함시키는 방법
    4. iframe에서 SVG를 embed 하는 방법
  4. 저작권

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

웹에서 작업하는데 있어 점 방식(raster) image와 벡터(vector) image 두 가지 종류를 경험하게 된다.

  • 점 방식 image는 화소들로 이루어진 격자무늬(grid of pixels)를 사용하는 것으로 정의한다. 점 방식 image 파일은 각각의 화소가 어디에 위치해야 하는지, 그리고 무슨 색이어야 하는지에 대한 정보를 포함하고 있다. 인기있는 웹 점 방식 포맷의 유형에는 Bitmap(.bmp), PNG(.png), JPEG(.jpg) 그리고 GIF(.gif)가 있다.

  • 벡터 image는 알고리즘을 사용한다. 하나의 벡터 image 파일은 화면 상에 어떤 식으로 구현되어야 하는지에 대한 모양(shape)과 경로(path)를 포함하고 있다. 컴퓨터는 이 모양과 경로를 통해 image를 그려낸다. 그리고 이 방식을 따르는 SVG 포맷은 웹 상에서 강력한 벡터 그래픽을 생성한다.

점 방식 image를 확대하게 되면 화면 상에 복수의 화소를 채우기 위해 각각의 화소 크기가 증가하게 되는데 이 과정에서 image는 고르지 않은 표면을 보여주게 된다. 반면에 벡터 image는 확대 여부와 상관없이 깔끔한 선과 원형태를 보존하는데 그 이유는 알고리즘에 따라 image의 모양을 만들고, 크기가 커지면 그에 따라 값의 크기도 증가하게 되기 때문이다.

게다가 벡터 image 파일은 점 방식 image 파일보다 더 가벼운데, 그 이유는 벡터 image는 알고리즘만 가지고 있으며 점 방식 image는 각각의 화소에 대한 모든 정보를 포함하고 있기 때문이다.


SVG란 무엇인가?

SVG는 벡터 image를 기술하기 위한 XML에 기반한 언어다. 기본적으로 HTML과 같은 markup 언어이나, image에 나타내고자 하는 모양과 효과를 정의 및 적용하는 많은 다른 Elements를 가지고 있다는 점에서 차이가 있다. SVG는 내용물이 아닌 그래픽을 표시하기 위한 언어다. 간편함 영역의 끝이라고 할 수 있을 정도로 간단한 모양을 생성하는 elements를 가지고 있다(e.g. <circle>, <rect>). 좀 더 심화된 SVG features는 <feColorMatrix>(9변화 매트릭스를 사용해 색을 변화시키는데 사용), <animate>(벡터 그래픽의 부분을 애니메이션화 함) 그리고 <mask>(image의 가장 위에 mask를 적용함) 따위가 있다.

<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 image를 생성하는데 있어 좀 더 복잡한 작업을 위해서 벡터 그래픽 에디터(Inkscape 혹은 Illustrator)를 사용한다. 이 패키지들을 통해 다양한 그래픽 도구를 사용해 다양한 삽화를 생성할 수 있고, 실제 사진과도 비슷하게 만들 수 있다.

SVG는 서술한 것들 외에도 추가적인 장점들을 가지고 있다:

  • 벡터 image의 텍스트는 접근 가능한 채로 남겨진다. 이는 즉 SEO에서도 장점을 가진다는 의미다.

  • SVG는 스타일링/스크립팅이 가능하다. image의 각각의 component는 element이기도 하기 때문에 CSS를 통해서 스타일링 될 수 있으며 JavaScript를 통해서 스크립팅 할 수 있다.

그렇다면 어떤 사람들은 왜 SVG 보다 점 방식 그래픽을 더 선호하는 것일까? 그 이유는 다음과 같다:

  • SVG는 파일 사이즈가 커짐에 따라 빠르게 복잡해질 수 있다. 복잡한 SVG들은 browser에서도 중대할 정도로 큰 접근 시간을 소비한다.

  • SVG는 생성하고자 하는 image의 유형에 따라 점 방식 image보다 생성하기가 어려울 수 있다.

  • SVG는 오래된 browser에서는 지원되지 않는다. Interet Explorer과 같은 오래된 버전의 browser를 지원해야 한다면 적합하지 않을 수 있다(IE9 이상에서 지원).

위의 SVG 장단점에 근거할 때, 점 방식 image는 사진과 같은 복잡하고 정교한 image에서 틀림없이 더 낫다고 할 수 있다.


페이지에 SVG 삽입하기

가장 빠른 방법: img element

<img> element를 통해 SVG를 embed 하기 위해 src 속성에 참조한다. height 혹은 width 속성도 필요에 따라 삽입한다.

장점

  • 빠르고, 친숙한 image 문법과 함께 내재된 alt 속성을 이용해 built-in text와 동일한 효과를 낼 수 있다.

  • <a> element 안에 <image> element을 위치시킴으로써 image에 쉽게 하이퍼링크를 걸 수 있다.

  • SVG 파일은 browser에 의해 cached(고속 기억 장치에 저장됨) 되어, 추후 사용되는 경우 빠른 속도로 load할 수 있다.

단점

  • JavaScript로 image를 조작할 수 없다.

  • CSS로 SVG content를 조작하고 싶을 경우, SVG code 안에 CSS styles를 포함해야만 한다.

  • CSS pseudoclasses를 사용해 image를 restyle 할 수 없다.

문제해결과 교차 browser 지원

SVG를 지원하지 않는 browser(IE8 이하, Android 2.3 이하)를 위해 src 속성에서 PNG 혹은 JPG를 참조할 수 있다. 그리고 srcset 속성(최신 browser만 인식)을 사용해 SVG를 참조할 수 있다. 이 경우, SVG를 지원하는 browser만 SVG를 load하게 되고, 오래된 browser에서는 PNG를 load하게 된다.

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

아래와 같이 SVG를 CSS 배경 이미지로도 사용할 수 있다. 오래된 브라우저는 PNG를 사용하는 것으로 이해하고, 최신 브라우저는 SVG를 load 하라는 것으로 이해한다:

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

<img>를 사용하는 방법과 마찬가지로 SVG를 CSS 배경 이미지로 사용한다는 것은 JavaScript로 세세하게 조작될 수 없다는 것을 의미한다.

만약 SVG가 전혀 나타나지 않는다면, 서버 set up이 제대로 되지 않았을 가능성이 있다. 이 문제는 다음의 링크에서 확인해볼 수 있다(웹 서버에서의 올바른 header 적용에 대한 문제).

HTML에 SVG code를 포함시키는 방법

Text editor를 켜서 SVG file의 SVG code를 직접 복사해 HTML Document에 붙여넣을 수도 있다. 이 방법을 SVG inline 또는 Inlining SVG라고 부른다. 이때 SVG code snippet이 <svg> tag로 시작해서 </svg> tag로 끝나야 한다.

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

장점

  • SVG inline 형태로 사용하는 것은 HTTP request를 절약한다. 그렇기에 loading 시간을 감소 시킬 수 있다.

  • SVG elements에 class와 id를 할당할 수 있으므로 CSS로 Styling이 가능해진다. 사실상 SVG로 표현하는 속성들을 CSS property로 사용할 수 있다는 의미다.

  • Inlining SVG는 SVG Image에 대한 CSS 상호작용과 CSS 애니메이션을 가능하게 하는 유일한 접근방법이다.

  • SVG markup을 하이퍼링크 형태로 바꾸려면 <a> Element로 감싸면 된다.

단점

  • SVG를 하나의 지점에서만 사용한다면 적절한 방법이라고 할 수 있다.

  • 기타 SVG code는 HTML file의 용량을 증가시킨다.

  • Browser는 inline SVG을 cache 할 수 없어서 image를 포함하는 첫 페이지가 load 된 이후에도 해당 이미지를 포함하는 다른 page들을 빠르게 Load 하지 못한다.

  • <foreignObject> 내에 fallback(일반적으로 HTML text를 사용)을 포함시킬 수 있으나, 그럼에도 불구하고 SVG를 지원하는 browser들은 다른 fallback image들을 저장한다. 따라서 이 방법을 사용하는데 있어 오래된 브라우저를 지원하는 것이 기타 제반 비용 대비 가치가 있는지 고려해야 한다.

iframe에서 SVG를 embed 하는 방법

Webpage들과 같이 browser에서 SVG image들을 열 수 있다. 그러나 이 방법이 최선이라고 할 수는 없을 것이다.

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

단점

  • 위와 같이 iframe은 fallback mechanism을 가지고 있다. 그러나 만약 browser들이 SVG와 iframe을 동시 지원하지 않는다면 fallback만을 보여줄 것이다.

  • 게다가 SVG와 본인의 현재 webpage가 서로 같은 origin을 가지지 않는다면, main webpage에서 JavaScript를 사용해 SVG를 조작할 수 없다.

저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

크리에이티브 커먼즈 라이선스
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.