SVG5 [SVG] 원 그리기 SVG 원 그리기 SVG(Scalable Vector Graphics)에서 원을 그리기 위해서는 태그를 사용합니다. 태그는 SVG 이미지 내에서 원을 정의하고, 여러 속성을 통해 원의 크기와 위치, 스타일을 지정할 수 있습니다. 기본 구문 속성 설명 cx와 cy: 원의 중심점의 x좌표와 y좌표를 정의합니다. 이 값들은 SVG 캔버스 내에서의 위치를 결정합니다. r: 원의 반지름을 정의합니다. stroke: 원의 테두리 색상을 정의합니다. stroke-width: 원의 테두리 두께를 정의합니다. fill: 원의 내부 채우기 색상을 정의합니다. 예시 다음 예시는 반지름이 40, 중심점이 (50, 50)인 원을 그리고, 테두리는 검은색, 내부는 빨간색으로 채워진 원을 보여줍니다: SVG를 사용하여 원을 그릴 .. 2024. 1. 28. [SVG] SVG로 사각형 그리기 SVG로 사각형 그리기 SVG를 사용하여 사각형을 그리는 것은 매우 간단합니다. SVG 내에서 사각형을 그리기 위해서는 요소를 사용합니다. 요소는 다음과 같은 주요 속성을 가집니다: x와 y: 사각형의 시작 위치를 지정합니다. 이는 사각형의 왼쪽 상단 모서리의 좌표를 나타냅니다. width와 height: 사각형의 너비와 높이를 지정합니다. fill: 사각형의 채우기 색상을 지정합니다. stroke와 stroke-width: 사각형의 테두리 색상과 두께를 지정합니다. 사례 가로 100px, 세로 50px 크기의 빨간색 사각형을 그리려면 다음과 같은 SVG 코드를 사용할 수 있습니다. 이 코드에서 width="120"와 height="70"는 SVG 캔버스의 크기를 지정합니다. x="10"와 y="10"은.. 2024. 1. 26. [SVG] SVG 태그로 웹페이지에 벡터 이미지 구현하기 웹 페이지에 SVG 태그 사용 웹 페이지에 SVG 태그를 사용하여 벡터 이미지를 구현하는 것은 효율적이고 유연한 방법입니다. SVG (Scalable Vector Graphics)는 XML 기반의 마크업 언어로, 웹에서 고품질의 그래픽을 표현할 때 매우 유용합니다. SVG를 사용하면 이미지가 확대나 축소될 때도 선명도가 유지되며, CSS와 JavaScript로 쉽게 스타일링하고 상호작용할 수 있습니다. 웹 페이지에 SVG 이미지를 추가하는 방법 직접 HTML 내에 SVG 코드 삽입하기 SVG 코드를 HTML 문서의 적절한 위치에 직접 붙여 넣습니다. 이 방법은 SVG 요소에 CSS 스타일을 적용하거나 JavaScript로 조작하기가 쉽다는 장점이 있습니다. 예시: SVG 파일을 외부에서 불러오기 SVG .. 2024. 1. 25. [SVG] SVG 코드에 텍스트를 넣기 SVG 코드에 텍스트를 넣기 SVG 코드에서 텍스트 색상을 변경하려면, 텍스트 요소()를 추가하고 CSS를 이용하여 스타일을 적용하면 됩니다. 앞에서 제공한 원 예제에 빨간색 텍스트 'SVG'를 추가하는 방법은 다음과 같습니다. 태그를 사용하여 텍스트를 추가합니다. fill 속성을 사용하여 텍스트의 색상을 설정합니다. x와 y 속성을 사용하여 텍스트의 위치를 조정합니다. 예제 코드는 다음과 같습니다. SVG 이 코드는 원래의 원 그래픽에 빨간색으로 'SVG'라는 텍스트를 추가합니다. x="30"와 y="55"는 텍스트의 위치를 SVG 캔버스 내에서 정합니다. 이 위치는 텍스트의 시작점을 나타내며, 필요에 따라 조정할 수 있습니다. fill="red"는 텍스트의 색상을 빨간색으로 지정합니다. 텍스트 꾸미기.. 2024. 1. 24. [SVG] SVG 만드는 법 SVG 만드는 법 SVG 파일을 만드는 방법은 몇 가지가 있습니다. 가장 보편적인 방법은 벡터 그래픽 편집 소프트웨어를 사용하는 것입니다. Adobe Illustrator나 Inkscape와 같은 프로그램이 이에 해당합니다. 또 다른 방법은 HTML과 CSS를 사용해 직접 코드를 작성하는 것입니다. 이 방법은 프로그래밍 지식이 필요하지만, 매우 세밀하고 특정한 디자인을 만들 수 있습니다. 벡터 그래픽 편집 소프트웨어 사용하기 (예: Adobe Illustrator, Inkscape) 프로그램을 열고 새로운 문서를 생성합니다. 도구를 사용하여 원하는 그래픽을 디자인합니다. 작업이 끝나면 '파일' 메뉴에서 '다른 이름으로 저장'을 선택합니다. 파일 형식으로 'SVG'를 선택하고 저장합니다. HTML과 CSS.. 2024. 1. 23. 이전 1 다음
