다양한 SVG 도형을 색상·크기·테두리 옵션과 함께 만들어 SVG/PNG로 저장합니다.

SVG 코드


        

    


    

        
SVG 도형 생성기 사용법

        
    
            
  1. 도형 종류를 선택합니다.
    2. 
            
  2. 채우기·테두리 색상과 두께를 조정합니다.
    3. 
            
  3. SVG 코드를 복사하거나 SVG/PNG 파일로 다운로드합니다.
    4. 
            
  4. 웹·앱·인쇄물 어디든 사용하세요.
    5. 
        


        
주요 기능

        
    
            
  • 10가지 도형 (원·별·하트·다각형·말풍선 등)
    • 
            
  • 채우기 + 테두리 옵션
    • 
            
  • SVG 다운로드 (벡터, 무손실)
    • 
            
  • PNG 다운로드 (이미지 편집기 호환)
    • 
            
  • SVG raw 코드 복사 가능
    • 
        


        
활용 예시

        
    
            
  • 아이콘·로고 디자인
    • 
            
  • 강조 표시(별·화살표)
    • 
            
  • 채팅·말풍선 UI
    • 
            
  • 이벤트 배지·뱃지
    • 
            
  • 일러스트의 기본 도형 요소
    • 
        


        
SVG의 장점

        
SVG는 벡터 그래픽으로 어떤 크기로 확대해도 깨지지 않습니다. 파일 크기가 작고 코드로 색·크기·애니메이션을 자유롭게 조작할 수 있어 웹 디자인에 가장 적합한 형식입니다.


        
자주 묻는 질문

        

            

                다운받은 SVG를 일러스트레이터에서 열 수 있나요?
                
네, Adobe Illustrator·Figma·Inkscape 등 모든 벡터 편집 도구에서 열고 편집할 수 있습니다.

            

            

                PNG와 SVG, 어느 것을 써야 하나요?
                
웹·UI는 SVG가 압도적으로 좋습니다(가벼움·선명함). 디자인 도구에서 비트맵 편집이 필요하면 PNG가 편합니다.

            

            

                색상을 그라데이션으로 만들 수 있나요?
                
현재 단색만 지원합니다. 그라데이션은 SVG에 <linearGradient>를 추가하면 가능하지만, 단순 도구를 위해 제외했습니다.

            

            

                도형을 회전·기울일 수 있나요?
                
다운로드 후 CSS의 transform: rotate()로 회전하거나 SVG 안의 transform 속성을 직접 추가하세요.