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

> Clean Markdown view of GeekNews topic #14533. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14533](https://news.hada.io/topic?id=14533)
- GeekNews Markdown: [https://news.hada.io/topic/14533.md](https://news.hada.io/topic/14533.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-04-28T09:58:41+09:00
- Updated: 2024-04-28T09:58:41+09:00
- Original source: [svgviewer.dev](https://www.svgviewer.dev)
- Points: 4
- Comments: 1

## Topic Body

### 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% 감소

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

## Comments



### Comment 24743

- Author: neo
- Created: 2024-04-28T09:58:41+09:00
- Points: 1

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