[번역] SVGO 및 Images

 

회사에서 프로젝트를 진행할 때, 모든 아이콘을 svg로 처리하고 있다.

최근에 svg를 최적화할 수 있는 SVGO라는 라이브러리가 있다고 하여 도입하게 되면서, svg에 대해, 그리고 SVGO에 대해 알아볼까 한다. SVGO와 관련된 내용은 공식문서와 관련 에세이를 번역했다.

 

먼저, 자주 사용하는 이미지 형태에 대해 알아보자. 

 

Image formats

SVG (Scalable Vector Graphics):

   - 벡터 기반의 이미지 형식으로, 확대/축소해도 이미지의 선명도와 질이 유지됩니다.
   - XML 기반의 형식이며, 코드로 작성되어 편집이 용이하고 검색 엔진 최적화에 유리합니다.
   - 아이콘, 로고, 차트 등 복잡한 그래픽을 표현하는 데 적합하며, 반응형 디자인에도 용이합니다.

 

JPG/JPEG (Joint Photographic Experts Group):

   - 손실 압축 방식을 사용하여 파일 크기를 줄입니다. 이미지 품질은 압축률에 따라 달라집니다.
   - 사진이나 복잡한 이미지에 주로 사용되며, 색상 변화가 많은 이미지에서는 압축으로 인한 손실이 발생할 수 있습니다.

* 손실 압축 방식: 이미지 파일의 크기를 줄이기 위해 데이터를 압축하는 방식. 이미지의 세부 정보를 일부 손실시키고 데이터를 삭제해 파일의 크기를 줄이므로 압축된 이미지는 원본 이미지보다 더 적은 파일 크기를 가지지만 압축으로 인해 약간의 품질 손상이 발생할 수 있음

 

PNG (Portable Network Graphics):

   - 손실 없는 압축 방식을 사용합니다. 이미지 품질은 압축 없이 원본 그대로 유지됩니다.
   - 배경이 투명한 이미지를 지원하며, 로고, 아이콘, 그래픽 등에 주로 사용됩니다.
   - 파일 크기가 JPG보다 크지만, 품질과 선명도를 유지할 수 있습니다.

 

GIF (Graphics Interchange Format):

   - 손실 압축 방식을 사용하며, 여러 이미지를 애니메이션으로 표현할 수 있습니다.
   - 적은 색상을 사용하는 그래픽이나 애니메이션에 주로 사용됩니다.
   - 압축률이 높아 파일 크기가 작고, 투명한 배경을 지원합니다.

 

 

다음은 SVGO 공식문서의 내용과 에세이를 번역한 내용이다.

 

SVGO Introduction

SVGO (short for SVG Optimizer) is a Node.js library and command-line application for optimizing SVG files.

SVGO(SVG Optimizer의 약자)는 SVG 파일을 최적화하기 위한 Node.js 라이브러리이자 CLI 응용프로그램입니다. 

 

SVG files, especially those exported from vector editors, usually contain a lot of redundant information. This includes editor metadata, comments, hidden elements, default or suboptimal values, and other stuff that can be safely removed or converted without affecting the rendering result.

SVG 파일, 특히 벡터 편집기에서 나온 svg 파일들은 보통 많은 중복 정보를 포함합니다.  이에는 편집기 메타데이터, 주석, 숨겨진 요소, 기본값 도는 최적화 되지 않은 값 등이 포함됩니다. 이러한 정보들은 렌더링 결과에 영향을 미치지 않고 안전하게 제거하거나 변환할 수 있는 것들입니다.

 

 

[번역] SVGO — Optimizing SVG’s

author: Gerard

Recently I discovered the optimization of SVG files. An SVG is just a modified XML file for representing scalable vector graphics, we can optimize and minimize the markup inside the file, like a css or js files.

최근  SVG 파일의 최적화를 발견했습니다. SVG는 크기 조정이 가능한 벡터 그래픽을 나타내기 위한 수정된 XML 파일로, css나 js 파일처럼 파일 내부의 마크업을 최적화하고 최소화할 수 있습니다.

 

For accomplishing this purpose, we have a lot of tools, but I suggest you to use this 2:

이러한 목적을 달성하는데 우리는 많은 툴을 가지고 있지만 이 2가지를 사용하길 권장합니다.

 

• SVGO: a Node based tool for optimizing SVGs, from a single file to a folder, with a lot of options and configurations. For example, this is a simple folder optimization.
• SVGO는 단일 파일부터 폴더까지 다양한 옵션과 구성을 지닌 SVG를 최적화하기 위한 Node 기반의 도구입니다. 다음은 간단한 폴더 최적화 예시입니다.

 

svgo -f /svg/dir

Simple as that. If you need more information, or you want to see the multiple options it offer, just check SVGO CLI docs.

이렇게 단순합니다.  더 많은 정보가 필요하거나 제공되는 다양한 옵션을 확인하고 싶다면 SVGO CLI docs를 클릭하세요.

 

• SVGO Online: is a web based tool who runs the above project. But it provides a simple interfice for simplifying this task. You just need to drop an SVG file and it generates a new one, with all the optimizations applied.
• SVGO Online은 위 프로젝트를 실행하는 웹 기반의 도구입니다. 하지만 이 도구는 작업을 간단하게 만들기 위한 간단한 interface를 제공합니다. SVG 파일을 끌어다 놓으면 모든 최적화가 적용된 새로운 파일이 생성됩니다. 

 

Automatization

This process can be included inside our CICD pipeline, and everytime we push some new code, executes and check if svg inside project is needed to be optimitzed. This is just an example of use, but it’s a good start point. Another one, could be when we run the build command, one of the step, is optimize all svg files.

This is just a recommendation that helps to minimize weight and impact of loading external resources, and make faster our web pages.

 

reference)

Introduction | SVGO

 

SVGO — Optimizing SVG’s