youngik

CSS, SVG Sprite img 본문

CSS

CSS, SVG Sprite img

youngik 2021. 4. 3. 03:18

img파일을 src 속성으로 저장된 파일을 불러왔던 나는

Sprite img를 사용을 왜 해야할까? 생각이 들었고 찾아본 결과

극단적으로 한 웹페이지에 100개의 img를 로드했을 때 서버에 부과되는 트래픽과

1개의 큰 img를 불러와서 부분적으로 100개의 이미지를 잘라내서 쓰는 방법 중 

어느것이 더 효과적일까? 당연히 후자이다. 

 

sprite img를 사용함으로써 http request를 줄임으로써 당연히 웹페이지의 속도 또한 향상이 된다.

당장 혼자서 만들고 접속하는 웹페이지는 문제가 없겠지만 1만명, 10만명,, 100만명이 접속하는 웹사이트라면 당연히 성능문제를 고려할 수 밖에 없다. 예를 들면 노트북이 같은 성능이라면 가벼운 노트북이 더 좋지 않겠는가?

CSS sprite 

*css sprite

- 다양한 이미지를 하나의 sprite 이미지로 만들어서 관리하는 이미지

- 사용하는 이유 : 웹페이지의 많은 img를 server에서 불러오면 로드하는데 많은 시간이 걸리기에

                       하나의 큰 이미지로 통합해서 해당되는 부분을 불러와 로드하는 시간을 단축

- background-img와 background-position property를 사용해서 해당하는 범위를 불러오기

 

background-position x, y axis

*우리가 생각하는 일반적인 x, y축이 아니라 가상 DOM/screen에서는 y축이 바뀌어 있는 것을 알 수가 있다. 

y = 3 이라고 하면 y>0인 값인 1사분면을 생각하지만 --> 실제로 DOM에서 그려지는 것은 3사분면임.

 

 

css sprite 이미지 예시

*위의 내용이 어렵다면 이 그림을 보고 한번에 이해를 하면 더 쉽다!

하지만 CSS Sprite의 단점이 있으니, 바로

 

●단점

1. img의 색상을 변경할 수 없음

2. transition과 animation 효과를 사용할 수 없음

3. 낮은 img 퀄리티

 

하나의 이미지로 많은 이미지를 관리하는 것도 큰 장점을 가지고 있는 반면 위와 같은 단점들이 잇다.

하지만 위의 CSS Sprite의 단점을 해소할 수 있는 부분이 바로 SVG Sprite 방법이다.

 

SVG sprite 

SVG sprite를 이용하는 방법은 참고한 사이트에서 2가지 방법을 제시하고 있다.

 

첫번째 (gulf 사용하기)

1. SVG img 준비해서 SVG code 정리 (=clean up)

- 참고한 사이트 에서는 SVGOMG를 추천했다 => jakearchibald.github.io/svgomg/

 

▶png와 svg 이미지 차이

*png : bitmap 기반으로 한 이미지 확대시 => 이미지가 흐려지는 현상 (=> ctrl + 마우스 휠하면 이미지가 흐려보임)

*svg : vector 기반으로 한 이미지 확대시 => 매끄러운 이미지 유지 

간단하게 생각하면 png는 점으로 찍어서 그린 그림

svg는 선으로 그려서 그린 그림의 차이라고 생각하면 될 것 같다. 

 

 

SVGOMG - SVGO's Missing GUI

 

jakearchibald.github.io

위 참고한 사이트에서는 Option 2개 중

1. preety code option 활성화

2. merge paths option 비활성화 하는게 좋다고 함. 

 

2. SVG file을 폴더에 넣기

 

3. terminal로 svg sprite plugin 설치

* 해당하는 프로젝트 폴더의 경로로 가서 설치해야함.

npm install --save-dev gulp-svg-sprite

 

4. svg sprite plugin에 설치된 프로젝트 폴더 내 build.js 파일 아래의 코드 삽입

var svgSprite = require('gulp-svg-sprite');
var svgConfig = {
svg: {
namespaceClassnames: false
},
mode: {
symbol: {
dest: '.',
sprite: 'sprite.svg'
}
}
};

gulp.src('**/*.svg', {cwd: config.source + '/svg-sprite'})
.pipe(svgSprite(svgConfig))
.pipe(gulp.dest(config.dest + '/styles/mysource_files'));

 

5. svgxuse 설치하기

* svgxuse 파일 설치도 프로젝트 경로와 동일하다. 

npm install --save svgxuse

 

6. html 파일에 svg 상대경로 및 코드 입력하기

<svg>
  <use xlink:href="styles/mysource_files/sprite.svg#icon-name" </use>
</svg>

 

<svg> <use>라는 태그를 사용하며 xlink:href 속성을 사용한다. 

상대경로를 넣어주면 되고 #icon-name <- 이 부분이 중요하다.

위 코드를 <head>태그안에 위에 선언을 해두고 <body>태그 내에서 사용할 때

전체경로를 입력하는 것이 아니라 id 속성을 이용하면 gulf가 알아서 찾아주는 것 같다. 

 

<svg class="c-icon">

  <use xlink:href="#icon-name" >

  </use>

</svg>

 

위와 같은 방식으로 svg 이미지를 사용하고 싶은 공간에 불러오면 된다.

 

7. CSS에서 svg icon 초기화 

- 아래에 CSS 속성은 글쓴이가 추천하는 초기화 속성이다.

- 일반적으로 img 사이즈를 조절할때 width, height 속성을 쓰는데 위 참고 사이트 글쓴이는

  font-size 속성을 이용하면 svg img 사이즈를 조절하기 쉽다고 한다. (*참고)

 

두번째 (Sprite map 사용하기)

1. svg sprite 이미지를 준비하기 (위와 동일)

 

2. svg sprite sheet 만들기

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">   <- brower가 SVG를 식별하기 위해 namspace 선언

<symbol id="icon-name1" viewBox="......">  <- 각 svg 파일마다 svg code 삽입

  <!-- SVG code here -->
</symbol>

 

<symbol id="icon-name2" viewBox="......">

  <!-- SVG code here -->
</symbol>

 

<symbol id="icon-name3" viewBox="......">

  <!-- SVG code here -->
 </symbol>

 

</svg>

 

3. svg img code 삽입하기 

- 간단하게 svgomg 사이트에서 svg 이미지를 넣고 코드를 복사하면 된다. (*사이트는 위에)

- 이후 <!-- SVG code here --> 부분에 코드 넣기

* height, width속성과 <-> viewbox 속성

- height, width로 이미지의 크기를 조절해서 불러옴

- viewbox 속성을 이용해서 viewport에서부터 지정한 경계로 불러옴

 

차이점으로 보자면, 1개의 이미지를 height와 width로 쉽게 가져올 수는 있겠지만

css sprite처럼 여러개의 svg img를 합쳐놓은 큰 sprite 이미지를 가져올 때에

viewbox 속성을 이용해서 내가 사용하고 싶은 이미지만 불러올 수 있다.

*[prefer viewbox to width/height] 속성을 해제하면 viewbox 속성으로 코드를 불러온다. 

결과

단순히 빠르게 결과를 확인하고 싶을때 상대경로 img로 불러오는게 쉽고 빠르지만

나중에 웹사이트 속도향상 측면을 생각해봤을 때 svg sprite 이미지로 불러오는 방법이

훨씬 좋은 것 같기에 시간이 조금 더 드는 부분이지만 그만큼 장점이 있는 것 같다.

 

*출처 : medium.com/design-code-repository/cutup-5-icon-with-css-svg-sprite-ea01eeb8bb41

'CSS' 카테고리의 다른 글

CSS Tip  (0) 2021.04.14
CSS 유사클래스(pseudo-class)  (0) 2021.04.14
'CSS' Related Articles more
Comments