KOEN

SVG 최적화 · CSS 변환

SVG · OPTIMIZE · DATA URI

SVG의 주석·메타데이터·에디터 흔적을 지우고 숫자를 줄인 뒤, CSS background·mask용 data URI로 바꿔요.

0 B
0 B
SAVED 0%

0 B → 0 B

SVG를 넣으면 무엇을 지웠는지 알려드려요.

미리보기

원본 SVG 미리보기
원본
최적화한 SVG 미리보기
최적화

CSS로 쓰기

인코딩
실제 CSS 적용 모습

0 B

        

      

    

    
SVG 코드는 서버로 전송되지 않아요. 브라우저의 DOMParser로 이 기기 안에서만 처리해요.

  









  

    

      HOW TO
      
사용 방법

      
    
      
  1. SVG 코드를 붙여넣거나 'SVG 파일 열기', 또는 파일을 끌어다 놓아요.
    2. 
      
  2. 주석·메타데이터·에디터 흔적 제거, 소수점 자리 등 옵션을 켜고 끄면 결과가 바로 바뀌어요.
    3. 
      
  3. 줄어든 용량과 렌더링 비교 결과(원본과 모양이 같은지)를 확인하고, 결과를 복사하거나 .svg로 받아요.
    4. 
      
  4. 'CSS로 쓰기'에서 background-image나 mask-image, URL 인코딩이나 Base64를 골라 CSS를 복사해요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
최적화하면 SVG 모양이 바뀌지 않나요?
모양에 영향이 없는 정리만 해요. HTML에 인라인으로 넣을 때 바깥 CSS를 물려받을 수 있는 fill·stroke 값이나 <use>로 재사용되는 요소의 속성은 일부러 남겨요. 결과는 256px로 그려 원본과 픽셀 비교해서 알려 주니, 차이가 보이면 소수점 자리를 늘려 보세요.

    
background-image와 mask-image는 뭐가 달라요?
background-image는 SVG를 색까지 그대로 배경으로 깔아요. mask-image는 SVG의 모양만 쓰고 색은 background-color로 칠해서, currentColor로 글자색을 따르게 하거나 hover 때 아이콘 색을 바꾸기 좋아요.

    
URL 인코딩과 Base64 중 뭘 써야 해요?
SVG는 텍스트라서 URL 인코딩이 대체로 더 짧고 코드도 읽을 수 있어요. Base64는 약 33% 길어지지만 따옴표·특수문자 걱정이 없어요. 둘 다 최신 브라우저에서 동작해요.

    
SVGO 같은 도구와 같은 결과가 나오나요?
같지는 않아요. 이 도구는 브라우저의 DOMParser로 이 기기 안에서만 처리하고, path 합치기나 도형 변환처럼 모양이 바뀔 위험이 있는 공격적인 최적화는 하지 않아요. 대신 안전한 정리와 CSS 변환에 집중해요.