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

 (svgviewer.dev)
4P by GN⁺ | ★ favorite | 댓글 1개
  • SVG Viewer는 SVG를 업로드한 뒤 미리보기와 코드 편집을 한 화면에서 처리하게 해 주는 웹 도구임
  • 회전, 좌우·상하 반전, 크기 변경, 코드 정리 같은 기본 편집 작업을 브라우저에서 바로 수행할 수 있음
  • 최적화 예시는 SVG 크기를 578 bytes에서 493 bytes로 줄여 -15% 감소한 결과를 보여줌
  • SVG 다운로드뿐 아니라 React, React Native, PNG, Data URI 변환 경로도 함께 제공함
  • 아이콘 목록과 업로드·복사·다운로드·공유 동작이 같은 화면에 있어 SVG 확인부터 재사용까지 빠르게 이어짐

SVG 편집과 최적화

  • SVG Viewer는 SVG 파일을 조회, 편집, 최적화할 수 있는 웹 도구임
  • 편집 화면은 SVG 코드와 미리보기를 함께 보여줘 코드 수정 결과를 바로 확인할 수 있음

  • 제공되는 조작

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • 예시 SVG는 400px x 400px 크기로 표시되며, 코드 편집 영역에 <svg> 코드가 노출됨
    • 최적화 상태는 578 bytes → 493 bytes, -15% 로 표시됨

가져오기와 내보내기

  • 파일 작업은 Upload, Copy, Download, Share 동작을 제공함
  • 내보내기 또는 변환 대상:
  • 화면에는 eye-close, gps, minus, lock-line, email, battery, document, comment, home, search, wifi 등 여러 SVG 아이콘 항목과 Load More SVGs가 표시됨
  • 피드백, 이용약관, 개인정보처리방침 링크도 제공됨

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 자주 쓰는 웹 기반 SVG 도구로 https://jakearchibald.github.io/svgomg/가 있음. 설정을 아주 세밀하게 바꿀 수 있는 SVG 최적화 도구임

  • 주말에 Hacker News에서 이렇게 화제가 될 줄은 몰랐음. 우리는 Vancouver, BC에 있는 작은 회사이고 소프트웨어 도구를 만듦: https://www.checkersoftware.ca/
    질문이 있으면 알려 달라

    • 이 웹앱을 계속 광고 기반으로 유지할 계획인지, 아니면 가까운 미래에 추가 기능이 있는 유료 pro 버전이 나올 예정인지 궁금함
    • 대부분의 예제에는 긴 숫자열이 들어간 path가 많아서, 어떤 path가 이미지의 어떤 도형에 해당하는지 바로 알기 어려움.
      편집기에서 코드 위에 커서를 올리면 해당 경로의 색상이나 윤곽선을 임시로 바꾸고, 텍스트 선택에도 비슷하게 동작하게 만들 수 있을지 궁금함
    • React 개발자가 아니라 잘 몰라서 묻는데, SVG를 React로 내보내는 기능의 용도가 무엇인지 궁금함.
      React 개발자가 SVG를 인라인으로 넣는 대신 React 내보내기 기능을 쓰는 이유가 있을까?
    • 아이콘 작업할 때 이 도구를 늘 사용함

  • 조금 만져 봤는데, 내가 쓰는 SVG에서 마주치는 자잘한 문제들을 언젠가 해결하려 할 때 매우 유용해 보임. UI가 이해하기 쉽고 변경 사항에 대한 피드백도 명확해서 바로 북마크했음.
    일부 SVG는 로딩 중 순간적으로 페이지를 넓게 늘렸다가, 아주 잠깐 뒤 의도한 크기로 자리 잡는 문제가 있었음. viewBox, width, height를 만져 봤지만 해결하지 못했는데, 이 초기 늘어남 현상을 줄이려면 어떻게 해야 할까?

    • 스타일이 적용되기 전 SVG가 번쩍이는 현상은 명시적인 뷰박스(viewBox)와 뷰포트(width, height)를 지정하면 고칠 수 있음: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • 브라우저보다 더 빠르게 SVG를 다른 형식으로 즉석 변환할 수 있는지 궁금함. 비전문가 관점에서는 비트맵을 최대 크기로 초기화한 뒤 SVG를 그 안에 파싱하는 동작처럼 들림

  • 정말 좋은 도구임. 한곳에 기능이 많이 모여 있음. 평소에는 phpStorm을 쓰는데, SVGOMG식 최적화 기능은 없지만 코드 정리는 잘 됨.
    편집을 시작할 수 있는 예제가 더 좋으면 좋겠고, path만이 아니라 다른 기본 도형도 쓰면 좋겠음. 격자도 있으면 유용하겠음.
    예를 들어 검색 아이콘은 viewBox를 잘 잡은 circle과 line으로 만들 수 있음. 원점을 원의 중심에 두면 x, y 값 없이 반지름만 있으면 되고, 이런 식으로 말도 안 될 정도의 최적화가 가능함.
    일반적인 검색 아이콘은 소수점 여섯 자리짜리 NASA 숫자가 수백 개 들어간 path로 뭉개져 있음. 실제로는 정수로 정의한 원 하나면 충분하지, Adobe Illustrator가 내보낸 잡동사니가 필요하지 않음.
    SVG는 예술적 매체이고 정말 좋아함. 하지만 예술가도 개발자도 그렇게 보지 않는 듯함. 그래서 대부분의 SVG는 가능한 것의 정신을 제대로 살리지 못하고, 단순한 파일 형식 이상이라는 점이 잘 드러나지 않음

  • SVG는 정말 강력함. 지난주에 필터 drop-shadow가 들어간 패럴랙스 투명 이미지가 Mac Safari와 iOS에서 엉망으로 보이는 문제가 있었는데, 해결책은 이미지 외곽선을 SVG로 만들고 feGaussianBlur가 들어간 SVG 필터로 그림자를 주는 것이었음.
    아직 SVG로 가능한 것의 표면만 긁고 있는 느낌임. 최적화에는 svgomg를 써 왔지만, 이 도구는 유용한 기능이 꽤 더 많아 보임

    • Qt/QML 데스크톱 프런트엔드로 시작했다가, 얼마나 많은 부분을 SVG 이미지맵 같은 구성만으로 만들 수 있을지 고민하게 됐음.
      Jupyter를 데이터 연결과 SVG 도구와 함께 띄워 보니 꽤 눈이 트이는 경험이었음
    • 현실적으로나 정치적으로 가능하진 않겠지만, DWG, DXF, DGN이 SVG로 대체되면 정말 좋겠음. AEC 업계의 2D 도면이 대부분의 프로그램에서 제대로 쓸 수 없다는 건 말이 안 됨

  • Inkscape를 쓰고, 부족한 게 있으면 Xara Xtreme이나 예전 Linux용 무료 버전을 씀.
    그런데 SVG를 최적화한다는 게 무슨 뜻인가?

    • 불필요한 정보를 제거하는 것임. Inkscape는 이것저것 많이 추가함. 예를 들어 Figma에서 단순한 SVG를 내보낸 뒤 Inkscape에서 열고 저장한 다음 비교해 보면 차이가 보임

  • 이 사이트를 정말 좋아하고 셀 수 없이 많이 써 왔음. 이상한 SVG 요소를 이해하고 결과를 빠르게 확인하는 데 아주 유용함

  • 몇 년 전에 Mac에서 BoxySVG를 10달러에 샀는데, 작고 믿을 만한 도구였음.
    https://boxy-svg.com/

    • 이제 구독 모델로 간 것 같음. 1년에 몇 번만 필요하니 10달러라면 사서 계속 보관하고 싶었음. Monodraw는 그렇게 한 번 사서 보관해 두고, 가끔 쓰지만 여전히 만족스러운 도구라 좋음
    • Boxy는 빠르고 대충 손보는 SVG 가벼운 편집기로 추천할 만함

  • SVG를 만질 때 가장 좋아하는 리소스이자 도구임. 많이 찾아봤지만 이보다 나은 걸 못 찾았음

답변달기