GN⁺: SVG 뷰어 - SVG 파일 조회, 편집 및 최적화 도구

(svgviewer.dev)

SVG 이미지 파일 분석

가로 400px, 세로 400px 크기의 SVG 이미지 파일
기본 구조:
- 가장 바깥쪽에 width="124", height="124" 의 사각형이 있음
- rx="24" 속성으로 둥근 모서리 처리
- fill="#F97316" 속성으로 주황색 배경으로 칠해짐
주요 도형들:
- <path> 태그로 흰색의 다각형 모양이 그려짐
  - d 속성에 패스 좌표 정보가 들어있음
  - fill="white" 로 흰색으로 채워짐
- <circle> 태그로 검은색 원이 그려짐
  - cx="63.2109" cy="37.5391" r="18.1641" 로 위치와 크기 지정
  - fill="black" 으로 검은색으로 채워짐
- <rect> 태그로 반투명한 직사각형이 45도 회전되어 그려짐
  - opacity="0.4" 로 투명도 설정
  - fill="#FDBA74" 로 옅은 주황색으로 채워짐
  - transform="rotate(-45 81.1328 80.7198)" 로 회전 변환
파일 크기 최적화:
- 원본 578 bytes에서 493 bytes로 15% 감소

SVG는 벡터 그래픽 포맷이라 확대/축소에도 깨짐 없이 선명한 장점이 있음. 반면 JPEG, PNG 등의 비트맵 이미지에 비해 복잡도가 높으면 파일 크기가 커지는 단점.
파일 사이즈가 작아 웹에서 로딩 속도가 빠를 것 같음. 그러나 복잡한 그림이라면 오히려 PNG가 유리할 수 있음.
rx, circle, rotate 등 다양한 기능을 활용해 단순함 속에서도 입체감을 표현한 것이 인상적.
주황색 배경에 흰색, 검정색을 사용해 색상 대비를 주어 가독성 높임.
아이콘, 로고 등의 용도로 제작된 듯. 옅은 주황색 도형의 의미나 용도가 궁금함.

SVG 최적화 도구인 SVGOMG가 또 다른 유용한 웹 기반 SVG 도구로 소개됨
Checker Software라는 밴쿠버 소재의 작은 회사에서 이 도구를 포함한 여러 소프트웨어 도구를 개발함
UI가 이해하기 쉽고, 변경사항에 대한 명확한 피드백을 제공하여 SVG 사용 시 발생하는 작은 문제들을 해결하는데 유용할 것으로 보임
- 예를 들어, 로딩 시 SVG가 의도한 크기보다 순간적으로 늘어났다 줄어드는 문제 등
캔버스의 줌 기능이 무한대로 가는 재미있는 버그(?)가 있음
SVG는 매우 강력한 도구로, 최근 Safari와 iOS에서 filter: drop-shadow를 사용한 parallax 투명 이미지 렌더링 문제를 SVG 필터와 feGaussianBlur를 활용해 해결한 사례도 있음
SVG를 위한 더 많고 더 나은 도구가 필요한 상황에서, 이 도구의 등장을 반기는 분위기임
텍스트에서 SVG를 생성할 때 이 에디터가 생성된 콘텐츠를 파싱하지 못했지만, CodeBeautify의 SVG 뷰어는 잘 작동했다는 의견도 있음
이런 작은 도구들이 해커 뉴스(HN)의 정신에 잘 부합한다는 평가를 받음