[우아한테크코스] 7월 20일 TIL

[Java] svg에 대해서

svg는 2차원 벡터 그래픽을 표현하기 위한 xml 파일 형식

jpg, png, gif 등등은 레스터 방식을 이용한다.
레스터 방식은 이미지 모양과 색을 색상 정보가 담긴 픽셀로 표현하는 방식이다.

svg는 벡터 방식으로 도형이나 선을 그려서 표시하는 방식이다.

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

1. 루트요소부터 시작
2. 이미지 영역 <rect /> 지정
3. 그 안에 요소 <circle /> 지정
   이러면 네모 안에 동그라미가 그려지는 것
   위에서부터 아래로 렌더링된다.

<svg width="200" height="200" viewBox="0 0 100 100">로 캔버스 전체 크기와 viewBox 화면을 출력
rectangle, circle, ellipse, line, polyline, polygon과 같은 타입 지정 가능
path요소를 사용해 모양을 제어해 다각형을 그릴 수 있다. path는 d 속성을 이용해 여러 개의 명령어와 파라미터들로 이뤄져 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있다. 알파벳으로 시작하는 명령어를 통해 위치, 크기 등을 지정할 수 있다.

이 svg 코드를 png 파일로 변환하려면 Apache Batik 라이브러리를 사용할 수 있다.

1. svg 코드를 파일로 변환한다.

   byte[] svgByte = svg.getBytes();
   String svgFileName = "/Users/yeonwoocho/Desktop/pr.svg";
   OutputStream svgOutput = new FileOutputStream(svgFileName);
   svgOutput.write(svgByte);
   svgOutput.close();
   

2. svg 이미지를 TranscoderInput으로 변환한다.

   TranscoderInput inputSvg = new TranscoderInput("file:" + svgFileName);
   

3. png 파일을 세팅한다.

   OutputStream pngOutputStream = new FileOutputStream("/Users/yeonwoocho/Desktop/practice.png");
   TranscoderOutput pngOutputImage = new TranscoderOutput(pngOutputStream);
   

4. png Transcoder를 생성한다.

   PNGTranscoder my_converter = new PNGTranscoder();        
   

5. svg를 png로 변환한다.

   converter.transcode(inputSvg, pngOutputImage);
   

6. flush ouput stream

   pngOutputStream.flush();
   pngOutputStream.close();