SVG 편집기

SVG 편집기는 브라우저에서 직접 벡터 그래픽을 만들고 편집하기 위한 다양한 기능을 제공합니다. 문법 강조와 실시간 검증 기능이 탑재된 전문 코드 편집기를 제공하여 SVG XML 문법을 직접 만들고 수정할 수 있습니다. 사각형, 원, 선, 삼각형, 타원, 다각형, 경로, 텍스트 등의 기본 요소를 만드는 도형 도구를 제공합니다. 또한, 심장 모양, 별 모양, 화살표, 기어 등의 일반 요소를 포함한 SVG 라이브러리도 제공합니다. 여기서는 요소의 위치, 크기, 채우기 색상, 테두리 색상, 테두리 두께 속성을 밀리미터 정밀도로 정의할 수 있습니다. 실시간 미리보기 기능도 포함되어 있어 변경 사항을 적용할 때마다 확인할 수 있습니다. 이러한 기능들은 편집기를 SVG 생성 및 편집을 위한 강력하지만 간단한 도구로 만들어줍니다.

SVG 편집기에서 도형과 요소는 여러 방법으로 추가할 수 있습니다. 도형 도구 패널에서 사각형, 원, 선, 삼각형, 타원, 다각형, 경로, 텍스트 요소와 같은 기본 기하 요소에 접근할 수 있습니다. 요소를 추가하는 방법은 도형 도구를 클릭한 후 미리보기 패널에서 한 번 더 클릭하거나 드래그하는 것입니다. SVG 라이브러리를 통해 심장 모양, 별 모양, 화살표, 체크 마크, 구름, 기어와 같은 사전 제작된 그래픽을 SVG 파일에 삽입할 수도 있습니다. 이러한 사전 제작된 그래픽은 단 한 번의 클릭으로 삽입할 수 있습니다. 더 복잡한 그래픽은 통합된 코드 편집기에서 직접 SVG 코드를 편집하여 XML 구조에 대한 완전한 제어를 얻을 수 있습니다. 요소를 추가한 후에는 편집기 인터페이스에 표시되는 위치와 크기 제어를 사용하여 속성을 조정할 수 있습니다.

SVG 편집기는 'SVG 파일 열기' 기능을 통해 기존 SVG 파일을 편집하기 위해 완전한 지원을 제공합니다. 'SVG 파일 열기' 버튼을 클릭한 후, 기기에서 작업할 SVG 파일을 선택할 수 있습니다. 열리면 SVG는 코드 편집기와 시각적 미리보기에 모두 표시되어 다양한 편집 도구를 통해 수정할 수 있습니다. 코드 편집기에서 XML 코드를 편집하거나, 시각적 인터페이스를 통해 요소 속성을 조정하거나, 도형 도구를 사용하여 새 요소를 추가하거나, 라이브러리 요소를 삽입할 수 있습니다. 편집기는 실시간 검증을 통해 기존 SVG 파일에 있는 문법 오류를 식별할 수 있습니다. 편집이 완료되면 다양한 형식으로 변경된 SVG를 내보낼 수 있어 이 도구는 기존 벡터 그래픽을 조정하고 추가로 개발하기에 적합합니다.

SVG 편집기는 특정 응용 프로그램 및 요구 사항에 따라 다양한 내보내기 옵션을 제공합니다. SVG 형식으로 작업을 내보낼 수 있으며, 모든 벡터 속성과 확장 가능성이 유지됩니다. 작업을 레이스터라이즈하고 싶다면 도구는 PNG 내보내기를 제공하며, 웹 그래픽 및 프레젠테이션에 적합합니다. Base64 내보내기는 SVG를 데이터 URI로 변환하여 HTML 또는 CSS 파일에 직접 삽입하기 편리합니다. CSS 내보내기는 SVG 배경을 이미지로 사용하거나 다른 CSS 기반 구현에 적용할 수 있는 CSS 코드를 생성합니다. 모든 내보내기 프로세스는 브라우저 내에서 발생하므로 콘텐츠가 개인 정보가 유지됩니다. 이러한 광범위한 내보내기 옵션은 SVG 그래픽을 다양한 맥락 및 개발 환경에서 쉽게 통합하는 데 도움을 줍니다.

SVG 최적화는 불필요한 데이터와 중복 정보를 제거하여 파일 크기를 최소화하면서 시각적 품질에 영향을 주지 않는 방식으로 작동합니다. '최적화' 버튼을 클릭하면 도구는 SVG 코드를 분석하여 시각적 표현에 기여하지 않는 많은 공백, 주석, 메타데이터 또는 불필요한 경로 데이터와 같은 모든 것을 제거합니다. 이 프로세스는 복잡한 그래픽에 특히 효과적이어서 설치 및 웹사이트에서 빠른 로딩을 가능하게 하고 대역폭을 절약합니다. 최적화는 모든 기본적인 시각적 요소와 그래픽에 필요한 기능을 보존하므로 처리 후에 완벽한 모습을 되찾습니다. 이 기능은 항상 품질 대 성능을 맞설 수 있어야 하는 웹 개발자에게 매우 유용합니다. 모든 작업은 브라우저 내에서만 수행되므로 파일이 외부 서버로 전송되지 않습니다.