무료 SVG 최적화 프로그램 및 변환기: SVG 축소 및 정리(배치), SVG를 PNG, JPG, React JSX 또는 데이터 URI로 변환, 경로 편집, viewBox 자르기, 다시 칠하기, 스프라이트 빌드, 웨이브, 얼룩, 패턴, 메시 그라데이션 및 노이즈 생성기. 업로드가 없습니다.
23개의 도구가 포함된 무료 개인 SVG 작업 공간입니다. SVG SVGO 스타일(일괄 처리, 이전/이후 확인 포함)을 최적화 및 축소하고, Figma 및 Illustrator 내보내기를 정리하고, SVG를 PNG, JPG, WebP, React 구성 요소 또는 데이터 URI로 변환합니다. 또한 브라우저에서 파일 유효성 검사, 경로 편집, viewBox 자르기, 색상 변경, 스프라이트 생성, 웨이브, 얼룩, 패턴, 메쉬 그라디언트, 그레인 텍스처 및 구분선 생성 등의 작업을 모두 브라우저에서 수행할 수 있습니다.
SVG Forge는 일반적으로 5개의 웹사이트에 분산되어 있는 SVG 작업을 하나의 페이지로 가져옵니다. SVG에서 PNG, JPG, WebP, React 구성 요소 및 데이터 URI로의 변환기; 검증인; 시각적 경로 편집기, viewBox 자르기 도구, 색상 대체 도구 및 스프라이트 빌더; 웨이브, 얼룩, 패턴, 메쉬 그라데이션, 그레인 텍스처 및 섹션 구분선을 위한 10개의 생성기가 있습니다. 한 번의 클릭으로 모든 결과를 다음 도구로 전달할 수 있습니다. 탭 간에 복사하여 붙여넣지 않고도 Blob을 생성하고 색상을 변경하고 최적화하고 React 구성 요소로 내보낼 수 있습니다.
특징
23가지 SVG 도구: 최적화, 변환, 편집 및 생성
SVGO 스타일 최적화: 21개 토글, 사전 설정, 일괄 ZIP 및 시각적 차이
16~512px 아이콘 세트를 포함하여 모든 크기의 SVG에서 PNG, JPG 및 WebP로 변환
SVG에서 React/React Native 구성 요소(TSX 또는 JSX)
데이터 URI 인코더 및 디코더, CSS 배경 및 CSS 마스크 출력
검사기: 보안, 접근성, 크기 및 gzip 보고서
앵커 포인트, 절대-상대변환 및 아이콘에 맞춤이 포함된 경로 편집기
ViewBox 콘텐츠에 맞춰 자르기, 색상 교체(색조, 회색조, currentColor) 및 스프라이트 빌더
사이드바(또는 모바일의 선택기)에서 최적화, 변환, 편집 또는 생성 중에서 선택하세요. 각 도구에는 #svg-to-png와 같은 자체 링크도 있습니다.
2
SVG를 추가하세요
마크업을 붙여넣고, 하나 이상의 .svg 파일을 업로드 또는 드래그 앤 드롭하거나, 클립보드에서 읽습니다. 생성기는 무작위로 지정할 수 있는 기성 디자인에서 시작됩니다.
3
조정 및 확인
사전 설정, 슬라이더 및 토글을 조정합니다. 미리보기는 실시간으로 업데이트되며 최적화 프로그램은 바이트 및 gzip 절약과 함께 원본과 결과를 나란히 표시합니다.
4
수출 또는 전달
SVG, React, 데이터 URI, Base64 또는 CSS로 복사하고, .svg를 다운로드하고, PNG/JPG/WebP로 내보내거나, "다음에서 열기..."를 사용하여 결과를 다른 도구로 바로 보낼 수 있습니다.
일반적인 사용 사례
프로덕션으로 배송하기 전에 아이콘과 일러스트레이션을 최적화하고 축소합니다.
Figma, Illustrator, Inkscape 또는 Sketch에서 부풀어 오른 SVG 내보내기를 정리합니다.
전체 아이콘 폴더를 일괄 압축하여 ZIP으로 다운로드합니다.
이메일, 소셜 미디어 또는 파비콘 세트를 위해 SVG 로고를 PNG로 변환
SVG 아이콘을 형식화된 React 또는 React Native 구성 요소로 변환
가능한 가장 작은 데이터 URI로 CSS의 작은 아이콘 인라인
viewBox를 콘텐츠에 맞춰 SVG 주변의 빈 공간을 자릅니다.
SVG를 브랜드 팔레트로 다시 칠하거나 currentColor로 전환하세요.
아이콘을 재사용 가능한 하나의 <symbol> 스프라이트로 묶습니다.
랜딩 페이지를 위한 웨이브, 얼룩, 메쉬 그라데이션 및 그레인 배경 만들기
상세안내
어떤 SVG 도구가 필요합니까?
도구 이름이 아닌 작업부터 시작하십시오. 파일을 더 작게 만들려면 최적화를 사용하세요. 비트맵, 코드 또는 CSS가 필요한 곳에서 SVG를 사용하려면 변환을 사용하세요. 기존 SVG를 수정하거나 스타일을 변경하려면 편집을 사용하세요. 슬라이더에서 새 아트웍을 만들려면 생성을 사용하십시오.
그룹
도구
다음에 가장 적합
최적화 및 정리
최적화 도구, 축소 도구, 클리너, 포맷터, 경로 단순화 도구
배송 전 아이콘과 일러스트레이션 축소
변환 및 검사
SVG → PNG/JPG/WebP, SVG → React(JSX/TSX), 데이터 URI 인코더/디코더, 뷰어 및 유효성 검사기
앱, 이메일 또는 CSS에 필요한 형식으로 SVG 가져오기
편집하다
경로 편집기, ViewBox 및 자르기, 색상 대체기, 스프라이트 생성기
경로 수정, 공백 제거, 아이콘 다시 칠하기 및 묶기
생성하다
파도, 얼룩, 패턴, 메쉬 그라데이션, 노이즈 및 그레인, 모양 구분선, 다각형, 별, 나선형, 물결선
배경, 영웅 섹션, 구분선 및 장식 모양
SVG 최적화 프로그램의 작동 방식 및 안전한 설정
최적화 프로그램은 브라우저에서 파일을 실제 XML 문서로 구문 분석하고 SVGO를 모델로 한 21가지 최적화를 적용합니다. 각각은 켜거나 끌 수 있으며 세 가지 사전 설정(균형, 최대, 클린 전용)이 일반적인 경우에 적용됩니다. 나란히 있는 시각적 검사를 통해 원본 및 최적화된 렌더링이 표시되므로 다운로드하기 전에 변경된 사항이 없는지 확인할 수 있습니다. 수십 개의 파일을 한 번에 저장하고 단일 ZIP으로 다시 가져올 수 있습니다. Illustrator, Inkscape 또는 Figma에서 일반적으로 내보내는 파일은 30~70% 줄어들며, 서버가 실제로 전송하는 것이기 때문에 gzip 크기가 표시됩니다.
최적화
기능
시각적 위험
편집자 데이터 및 메타데이터 제거
Inkscape, Sodipodi, Illustrator, Sketch 및 Figma 네임스페이스, <metadata> 및 주석을 삭제합니다.
없음
어림수/압축 경로
선택한 정밀도로 좌표를 반올림하고 절대 또는 상대 형식 중 더 짧은 형식으로 경로 데이터를 다시 작성합니다.
소수점 이하 2~3자리는 없습니다. 0-1의 작은 아이콘을 확인하세요.
사용하지 않는 정의 및 ID 제거
아무것도 참조하지 않는 그라데이션, 클립 경로 및 ID를 삭제합니다.
없음
그룹 축소/기본값 제거
빈 <g> 래퍼를 풀고 fill-opacity="1"과 같은 값을 제거합니다.
없음
스타일 → 속성, 색상 단축
style="fill:#ffffff"는 fill="#fff"가 됩니다.
없음(<style> 블록이 있는 경우 자동으로 건너뛰기)
반응형(드롭 너비/높이)
CSS가 크기를 제어할 수 있도록 viewBox만 유지합니다.
고정된 크기에 의존하는 경우 레이아웃이 변경될 수 있습니다.
<제목>/<설명> 제거
접근 가능한 이름 제거
시각적으로는 없지만 화면 판독기 사용자에게 해를 끼칩니다.
Figma, Illustrator 또는 Inkscape에서 내보낸 SVG 코드 정리
디자인 도구는 생성기 주석, XML 선언, 편집기 네임스페이스, Layer_1 및 SVGID_1_과 같은 레이어 ID, 빈 그룹, 배경 활성화 스타일 및 소수점 6자리 숫자로 SVG 내보내기를 채웁니다. SVG Cleaner는 불필요한 부분을 제거하지만 마크업을 들여쓰기하고 읽을 수 있도록 유지하므로 파일을 직접 편집하거나 애니메이션을 적용할 때 유용합니다. Optimizer는 생산을 위해 더 나아가고 Validator는 내부 내용(요소 수, 색상, 글꼴, 포함된 비트맵, 스크립트 및 외부 링크)을 정확하게 나열하므로 파일을 사용하기 전에 파일이 무겁거나 안전하지 않은 이유를 확인할 수 있습니다.
SVG에서 PNG로, React 구성 요소 또는 데이터 URI: 사용할 형식
SVG는 웹의 아이콘과 일러스트레이션에 가장 적합한 선택입니다. 하지만 일부 장소에서는 여전히 비트맵이나 코드가 필요합니다. 변환기는 업로드 없이 각 사례를 처리합니다.
내보내다
다음과 같은 경우에 사용하세요.
메모
PNG/웹P
이메일, 소셜 게시물, 앱 스토어, 파비콘 등 SVG가 허용되지 않는 모든 곳
최대 8192px의 모든 크기, 투명한 배경, 일괄 ZIP 및 원클릭 16~512px 아이콘 세트
JPG
작고 불투명한 이미지가 필요한 곳
투명도를 대체하는 배경색을 선택하세요
반응 / 반응 네이티브
React, Next.js 또는 Expo 코드베이스 내부의 아이콘
camelCase 속성, 스타일 객체, {...props}, 선택적 currentColor 및 접근 가능한 제목 소품
데이터 URI(URL 인코딩)
추가 요청 없이 CSS 또는 HTML에 인라인된 작은 아이콘
일반적으로 Base64보다 약 30% 작습니다. CSS 마스크 출력을 사용하면 배경색으로 다시 칠할 수 있습니다.
생성기는 비트맵 내보내기 대신 깨끗하고 손으로 편집 가능한 SVG를 생성합니다. 레이어드 웨이브와 모핑 블롭은 JavaScript 없이 <img> 및 CSS 배경 내에서 작동하는 SMIL을 사용하여 애니메이션화할 수 있습니다. 패턴 생성기는 16개의 매끄러운 모티프를 배경 반복을 위한 단일 타일 또는 전체 캔버스로 내보냅니다. 메시 그래디언트 및 노이즈 생성기는 현대 랜딩 페이지에서 인기 있는 부드러운 그래디언트 및 필름 그레인 모양을 생성하며, 모양 구분선에는 섹션 가장자리에 바로 붙여넣을 수 있는 HTML 및 CSS 스니펫이 함께 제공됩니다. 모든 출력은 SVG, React, 데이터 URI 또는 CSS로 복사하거나 PNG로 내보낼 수 있습니다.
구문 분석, 최적화, 래스터화 및 압축은 모두 표준 웹 API(DOMParser, Canvas 및 CompressionStream)를 사용하여 브라우저에서 수행됩니다. 귀하의 작품은 서버에 도달하지 않으므로 도구는 NDA에 따른 클라이언트 작업에도 작동합니다. 미리보기는 격리된 <img>를 통해 렌더링되므로 붙여넣은 SVG의 스크립트는 실행할 수 없으며 사이트에 파일을 삽입하기 전에 최적화 프로그램이 <script> 태그와 이벤트 핸들러를 제거할 수 있습니다.
자주 묻는 질문
어떤 SVG 도구가 포함되어 있나요?
23개, 4개 영역으로 분류됩니다. 최적화: 최적화 프로그램, 축소 프로그램, 클리너, 포맷터 및 경로 단순화 프로그램입니다. 변환: SVG를 PNG/JPG/WebP로, SVG를 React로, 데이터 URI 및 뷰어 및 유효성 검사기. 편집: 경로 편집기, ViewBox 및 자르기, 색상 대체기 및 스프라이트 생성기. 생성: 웨이브, 얼룩, 패턴, 메쉬 그라데이션, 노이즈, 모양 구분선, 다각형, 별, 나선형 및 물결선.
무료로 SVG 파일을 최적화하려면 어떻게 해야 합니까?
최적화 프로그램을 열고 SVG를 붙여넣거나 하나 이상의 .svg 파일을 넣은 다음 사전 설정(균형, 최대 또는 정리만)을 선택하거나 21개 최적화 중 하나를 전환하세요. 이 도구는 원본 크기, 최적화된 크기, gzip으로 압축된 크기와 함께 시각적 검사를 나란히 표시합니다. 그런 다음 결과를 복사하거나 다운로드하거나 모든 파일을 ZIP으로 다운로드하세요.
SVG 웨이브나 블롭을 어떻게 만드나요?
Wave 또는 Blob 생성기를 사용하여 슬라이더(레이어, 진폭, 복잡성, 무작위성) 및 색상을 조정하면 벡터가 실시간으로 업데이트됩니다. Random을 눌러 다양한 변형을 살펴보고, 모핑 효과를 위한 애니메이션을 켠 다음, SVG를 복사하거나 내보냅니다.
SVG를 CSS 배경이나 데이터 URI로 얻을 수 있나요?
예. 모든 결과에는 원시 SVG, React, 압축 URL 인코딩 데이터 URI, Base64 및 바로 붙여넣을 수 있는 CSS 규칙에 대한 내보내기 탭과 .svg 및 PNG/JPG/WebP 다운로드가 있습니다. 데이터 URI 도구는 CSS 마스크 조각도 생성하고 데이터 URI를 다시 SVG로 디코딩할 수 있습니다.
SVG 클리너는 무엇을 제거합니까?
Inkscape, Sodipodi, Illustrator, Sketch, Serif 및 Figma의 XML 선언, DOCTYPE, 주석, <metadata> 및 편집기 네임스페이스와 속성. 마크업을 들여쓰기하고 읽기 쉽게 유지하므로 파일을 직접 편집하려는 경우 올바른 선택입니다.
내 SVG가 서버에 업로드되나요?
아니요. 최적화, PNG 렌더링, ZIP 생성을 포함한 모든 것이 브라우저에서 로컬로 실행됩니다. 파일은 기기 외부로 절대 유출되지 않으므로 비공개적이고 즉각적입니다.
SVG 파일을 어떻게 축소하거나 최적화합니까?
SVG를 붙여넣거나 업로드하면 최적화 프로그램이 편집기 메타데이터, 주석, 사용되지 않는 정의 및 중복 코드를 제거하고 숫자를 반올림하고 경로 데이터(예: SVGO)를 압축합니다. 이는 파일의 모양을 변경하지 않고 파일을 30~70% 축소하는 경우가 많으며 모두 브라우저에서 실행됩니다.
Figma 또는 Illustrator에서 지저분한 SVG 코드를 어떻게 정리합니까?
디자인 도구는 생성기 주석, 레이어 ID, 빈 그룹 및 6자리 숫자와 같은 부풀림을 추가합니다. 내보낸 파일을 Cleaner(읽을 수 있도록 유지) 또는 Optimizer(가장 작은 출력)에 붙여넣어 가벼운 웹용 마크업을 얻으세요.
SVG를 데이터 URI로 변환할 수 있나요?
예. 결과에 대해 데이터 URI 도구나 데이터 URI 탭을 사용하세요. 이는 일반적으로 Base64보다 약 30% 작은 URL 인코딩을 사용하며 Base64, CSS 배경 규칙 및 <img> 태그도 제공합니다.
투명한 배경을 사용하여 SVG를 PNG로 어떻게 변환합니까?
SVG를 PNG/JPG로 열고, 파일을 추가하고, PNG와 배율(예: 4×) 또는 정확한 너비나 높이를 선택하고 투명 배경을 켭니다. 많은 SVG를 ZIP으로 일괄 변환하거나, 대신 JPG 또는 WebP를 선택하거나, 파비콘 및 앱 아이콘에 대해 16~512px PNG를 내보내도록 설정된 아이콘을 선택할 수 있습니다.
SVG를 React 구성 요소로 어떻게 변환합니까?
SVG를 SVG to React(JSX)에 붙여넣고 구성 요소 이름을 지정한 다음 TypeScript 또는 JavaScript, React 또는 React Native를 선택합니다. 속성은 camelCase로 변환되고 인라인 스타일은 객체가 되며 {...props}는 루트에 확산됩니다. 색상을 currentColor로 전환하고 접근 가능한 제목 소품을 추가할 수도 있습니다.
최적화하면 SVG의 모양이 바뀌나요?
기본 균형 사전 설정이 아닙니다. 모든 최적화는 보이지 않는 데이터만 제거하거나 값을 동일하게 다시 작성합니다. 매우 낮은 정밀도(소수점 0-1)는 작은 아이콘의 점을 약간 이동할 수 있으므로 최적화 프로그램은 다운로드하기 전에 원본과 결과를 나란히 표시합니다.
SVG 주위의 빈 공간을 어떻게 제거합니까?
ViewBox 및 자르기를 열고 SVG를 붙여넣은 다음 콘텐츠에 맞게 자르기를 클릭합니다. 이 도구는 도면의 실제 경계를 측정하고, 선택한 패딩으로 꽉 조이는 viewBox를 설정하며, 너비 및 높이 속성을 업데이트하거나 제거할 수 있습니다.
SVG의 색상을 어떻게 변경할 수 있나요?
색상 대체기는 모든 채우기, 획 및 그라데이션 색상(hex, rgb(), hsl() 및 명명된 색상)을 감지하고 각 색상이 나타나는 빈도를 나열합니다. 하나씩 다시 매핑하거나, 전체 파일의 색조, 채도 및 밝기를 변경하거나, 회색조로 변환하거나 반전하거나, 아이콘이 CSS 텍스트 색상을 따르도록 모든 것을 currentColor로 바꿀 수 있습니다.
SVG 스프라이트란 무엇이며 어떻게 사용합니까?
스프라이트는 <symbol> 요소로 많은 아이콘을 포함하는 하나의 SVG 파일입니다. 스프라이트 생성기에 아이콘을 추가한 다음 <svg><use href="#icon-id"/></svg>로 각 아이콘을 참조하세요. 이 도구는 그라데이션 충돌을 방지하고 색상을 currentColor로 변환하기 위해 내부 ID를 접두사로 지정할 수 있으며 사용 코드를 생성합니다.
출처를 알 수 없는 SVG를 붙여넣어도 안전합니까?
예. 미리보기는 스크립트를 실행할 수 없는 격리된 <img> 내부에서 렌더링됩니다. 유효성 검사기는 <script> 태그, 이벤트 핸들러 및 외부 링크에 플래그를 지정하고, 최적화 프로그램은 파일을 사이트에 포함하기 전에 기본적으로 스크립트와 핸들러를 제거합니다.
생성된 파도와 얼룩에 애니메이션을 적용할 수 있나요?
예. Wave 및 Blob 생성기에는 자체 포함된 SMIL 모프를 추가하는 애니메이션 토글이 있습니다. JavaScript나 CSS가 필요 없이 <img> 내부의 브라우저, CSS 배경 및 인라인 SVG에서 재생됩니다.
