SVG

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 2차 베지에 곡선으로 다양한 경로를 그릴 수 있다. 곡선에 끝 점을 설정하는 것 뿐만 아니라 제어점도 설정해야 한다. 제어점은 선이 구부러지기는 하지만, 닿지 않는 보이지 않는 좌표이다. 표정 여기서 제어점은 이미지 하단 중앙(0, 100)에 위치한다. 제어점이 반드시 두 끝점의 동일..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 그라데이션으로 채우기와 3D 효과를 줄 수 있다. 크리스마스 장식 업그레이드 크리스마스 장식품을 업그레이드 하자. 기본 원을 그라데이션으로 채우민 미묘한 3D 효과를 추가할 수 있다. defs섹션에서 radialGradient를 정의한다. CSS와는 다른 구문이지만 비슷한 기능을 한다..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 별은 단순한 모양이다. 별의 한 꼭짓점을 다각형 묶음으로 정의하고 각 점을 개별적으로 설정할 수 있다. 별의 각 꼭짓점의 좌표를 알면, 한 방향을 정의한 다음 회전을 5번 수행해 별 모양을 얻을 수 있다. 회전은 transform 속성을 이용해서 설정한다. transform 속성을 사..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 나무 모양 하나를 정의한 다음 다양한 위치에 다양한 크기로 배치하여 숲을 그릴 수 있다. 배경 만들기 직사각형과 원을 이용해 배경을 만든다. 나무 만들기 간단한 다각형과 선으로 나무 모양을 정의한다. 눈송이 예제에서 했던 것과 유사한 방식으로 이를 재사용할 수 있다. 이 모양을 def..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com SVG로 눈송이 그리기 동일한 코드를 반복하는 대신 모양에 대한 정의를 만들어 재사용할 수 있다. 우선 눈송이의 가지를 정의한 다음, 이를 다른 회전으로 6번 사용한다. path와 move to(M), line to(L) 명령을 사용해 간단히 선(주 분기)을 그릴 수 있다. 그 다음 ..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com path path는 SVG 요소 중 하나로, path를 사용해 거의 모든 것을 만들 수 있다. 경로의 모양은 d 속성에 의해 정의된다. 이 속성은 여러 그리기 명령을 정의한다. 명령은 항상 명령 유형을 정의하는 문자로 시작해서 좌표로 끝난다. 가장 기본적인 명령은 move-to, li..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 이전에 그린 장식을 선을 이용해 꾸며보자. 2024.01.15 - [Study/SVG] - 1. SVG를 사용하여 기본 도형 그리기 1. SVG를 사용하여 기본 도형 그리기 📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to ..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 이전에 학습한 본 원, 직사각형, 선, 다각형을 이용해 집을 만들어 보자 1. 벽 그리기 HTML 삽입 미리보기할 수 없는 소스 .house { stroke: black; stroke-width: 2px; fill: white; } 2. 지붕 그리기 polyline을 사용해 지붕을 그..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 스타일 속성을 CSS로 이동 SVG가 HTML 파일 내에 있으므로 각 요소에 CSS 클래스를 할당하고 일부 속성을 CSS로 이동할 수 있다. 단, 프레젠테이션 속성만 이동할 수 있으며 모양과 위치 속성은 HTML에 유지되어야 한다. 또한 색상, 획 및 글꼴 속성 등은 CSS로 이동할 ..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com polygon 요소 사용 이미지를 조합하기 위해 항상 기본 모양을 사용할 수 없다. polygon은 자유형 모양을 그리는 방법이다. points 속성은 직선으로 연결된 좌표의 목록을 설정한다. 3개의 삼각형으로 이루어진 트리를 만들 수 있다. 아래에 위치한 것 부터 레이어를 쌓아 올려..