Vector graphics vs Raster graphics

도입

평상시에 이미지를 추가한다고 .png, .jpg, .gif, .svg 등 여러 확장자를 본 적이 있을 텐데 정작 어떻게 이루어진 이미지인지 모를 경우가 있다.

지금부터 Vector graphics와 Raster graphics에 대해서 알아보도록 하자.

Raster graphics

Raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. Popular web raster formats include Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)

Raster 이미지는 픽셀 격자를 이용해 정의가 된다. 즉, 각각의 픽셀이 보여질 정보들(정확하게 위치할 장소와 색상)을 포함하고 있다.
대표적으로 bmp, png, jpg, gif 가 있다.

Vector graphics

Vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The SVG format allows us to create powerful vector graphics for use on the Web.

Vector 이미지는 알고리즘을 사용하는데, 컴퓨터가 화면에 어떻게 랜더링 할지 모양과 경로에 대한 정의를 이미지 파일에 포함되어있다. SVG 형식을 사용하면 웹에서 사용할 강력한 벡터 그래픽을 만들 수 있다.

두개의 차이

mdn github repo에 가보면 svg와 png를 확대해서 볼 때, 차이가 두드러진다.

왼쪽이 png이고 오른쪽이 svg다.
확대를 했을 때, png쪽이 깨진 것처럼 보이지만 svg는 선명하다.

차이가 생기는 이유는 위에서 말했다시피 Raster와 Vector의 차이다.

• Raster: 이미지 자체가 각각의 픽셀이 보여질 정보들(정확하게 위치할 장소와 색상)을 포함하고 있다.
• Vector: 이미지는 알고리즘을 사용하는데, 컴퓨터가 화면에 어떻게 랜더링 할지 모양과 경로에 대한 정의를 이미지 파일에 포함되어있다.

이 때문에 확대/축소를 하면 Raster는 각 픽셀이 여러 화면을 채우도록 크기가 증가함으로 이미지가 뭉툭해지는 것이다.

Vector graphics 요소인 svg를 알아보자

장점

Text in vector images remains accessible (which also benefits your SEO).
SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.

1. 벡터 이미지에 포함된 텍스트는 접근이 가능하다. (SEO 측면에서 도움이 됨)
2. css를 통해 스타일을 지정하거나 javascript를 통해 조작이 가능하다.

단점

SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.
SVG can be harder to create than raster images, depending on what kind of image you are trying to create.
SVG is not supported in older browsers, so may not be suitable if you need to support older versions of Internet Explorer with your web site (SVG started being supported as of IE9.)

1.svg는 빠르게 복잡해질 수 있어, 파일 크기가 커진다. 복잡한 svg는 브라우저에 영향을 끼칠 수 있다.
2. svg는 생성하는 이미지 종류에 따라 raster보다 생성하기 어려울 수 있다.
3. svg는 이전 브라우저에서 지원하지 않을 수 있다.(이젠 IE가 종료예정이므로 상관없겠다.)

Troubleshooting and cross-browser support

SVG를 지원하지 않는 브라우저(IE 8 이하, Android 2.3 이하)의 경우, src 속성에서 PNG 또는 JPG를 참조하고 srcset 속성(최신 브라우저에서만 인식)을 사용하여 SVG를 참조하도록 하자.

1. html 내에서

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

2. css 내에서

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

참고

Adding vector graphics to the Web