SVG의 가장 멋진 점 중 하나는 할 수 있는 모든 강력한 작업에도 불구하고 여전히 읽을 수 있는 코드라는 것입니다.
사각형을 그릴까요? 기괴한 캐릭터의 기괴한 문자열이 아닙니다.
https://css-tricks.com/browser-based-svg-editors/
<rect x="50" y="20" width="300" height="100" />
선언적 언어인 해당 마크 업을 호출합니다. 그라디언트, 애니메이션 및 대화 형 작업과 같은 것을 선언하고 사용할 수 있을 뿐만 아니라 모든 방식으로 모양을 그릴 수 있습니다. 또한 독점 형식이 아닙니다. 사용 권한이 필요하지 않습니다. 개방형 사양입니다!
SVG가 마크업이라는 아이디어는 일부 개발자에게 딱딱합니다.
처음에는 애매 모호한 SVG <path d = ""/> 구문을 문자 그대로 배울 수 있습니다.
그냥 좌표입니다! 좌표에서 좌표로 이동하는 방법을 설명하는 지시 사항이 있습니다. 더하기 부호를 그릴까요? 다음과 같이 줄일 수 있습니다.
<path d="M2 1 h2 v1 h2 v1 h-1 v1 h-1 v-1 h-1 v-1 h2 z" />
https://codepen.io/chrisnager/pen/armzk
또는 루프에서 SVG를 생성하는 프리 프로세서로 재미있게 보내십시오!
그것은 특정 유형의 개발자를 생각에 간지럽힙니다. SVG를 만들고 편집하는 데 도움이 되는 앱을 만들 수 있습니다! 그렇습니다, 당신은 할 수 있습니다. JavaScript에는 필요한 모든 도구가 있습니다. 클릭하는 위치와 그렇지 않은 위치에 대한 정보를 기침 할 수 있어 기쁘다. 이와 같은 아이디어를 결합하면 SVG를 만들고 편집하기 위한 본격적인 브라우저 기반 응용 프로그램을 상상할 수 있습니다.
인터넷의 아름다움은 SVG를 만들고 편집 할 수 있는 시각적 앱을 확실히 구축 할 수 있기 때문에 많은 사람들이 가지고 있다는 것입니다.
아마도 예상 할 수 있는 옵션이 아주 많습니다! 맞습니다. 완전 무료 브라우저 기반 SVG (벡터) 기반 편집 도구입니다.
우리 중 많은 사람들이 Adobe Illustrator와 같은 도구를 벡터 편집을 위한 성의 왕이라고 생각했습니다.
아니면 오픈 소스 형제 Inkscape 일 수도 있습니다. 이러한 도구는 여전히 훌륭한 도구이지만 SVG 편집이 필요한 경우 이러한 옵션을 확인하여 속도를 높이고 비용을 절약 할 수 있습니다.
다음의 대부분은 설명이 거의 필요 없습니다. 도구 모음을 사용하면 그리기 및 조작 도구에 액세스 할 수 있습니다.
색상을 변경하고 주변 환경과 대부분의 작업을 드래그합니다. 물론 일부 기능이 다릅니다. 큰 일을 할 사람을 찾는 것이 진지하다면 모든 것을 시험해 보아야 합니다.
Janvas
이것은 약간의 설명이 필요합니다. Inkscape에 대해 들어봤을 것입니다.
Adobe 소프트웨어, 특히 Adobe Illustrator의 장기 오픈 소스 대안. 일반적으로 Inkscape는 브라우저 기반이 아니기 때문에 이 목록의 위치를 보증하지 않습니다. 그러나 그것은 가능합니다!
RollApp은 기본적으로 팝업 브라우저 창으로 "잉크 스케이프"(및 기타 다양한 앱)를 실행하는 데 도움이 되는 서비스입니다.
위에서 언급 한 바에 대해 큰 일을 하는 것에 대해 진지하게 생각한다면 실험을 해야 한다고 언급했습니다.
사실입니다. 이것들 대부분은 무료이며, 틀림없이, 나는 그들 중 어느 것에서 심각한 힘든 일을 한 적이 없었습니다.
최고의 것을 말해 줄 수 있습니다.
그래도 Figma라는 또 다른 브라우저 기반 디자인 도구 인 내가 확실하게 신뢰하는 것을 말할 수 있습니다.
SVG 편집보다 완전한 디자인 작업에 더 적합하기 때문에 다소 다른 범주에 속하지만 확실히 벡터를 지원하는 앱입니다. 나는 말 그대로 어려운 일을 Figma에서 수행하며 훌륭하게 작동합니다. 고려해야 할 또 다른 것? Invision Studio가 열리면
등록된 댓글이 없습니다.
