728x90 300x250 Front-end/svg8 svg 직사각형 <rect> 직사각형을 만들기 위해서는 rect를 사용합니다. 위에 예시를 찬찬히 살펴 보면 width, height 속성 : 넓이와 높이 값 지정 style 속성 : css 속성 정의 fill속성 : 채우기 색상 stroke-wiidth : 테두리 너비 strock : 테두리 색상 출처 https://www.w3schools.com/graphics/svg_rect.asp 2022. 2. 1. SVG 타원 <ellipse> SVG로 타원을 그리기 위해서는 요소를 사용한다. 만드는 방법과 유사한데 차이점은 타원은 x y 반경이 서로 다르고 원은 x y반경이 동일 하다는 점이다. cs속성 : 타원 중심의 x좌표 정의 cy속성 : 타원 중심의 y좌표 정의 rx 속성 : 수평 반경 정의 ry 속성 : 수직 반경 정의 타원 겹쳐서 여러개 표현하기 출처 : https://www.w3schools.com/graphics/svg_ellipse.asp 2022. 1. 30. svg 원 그리기 <circle> 는 원을 만들때 사용하는 태그이다. html css .svg-box .svg {width: 160px; height: 160px;} .circle1 { fill: #317773; } 코드 설명 cx : 원을 중심으로 x 좌표값을 설정 cy : 원을 중심 y 좌표값을 설정 cx, cy 값이 생략되면 기본값은 (0,0) r : 원의 반지름 설정 stroke : 선의 색상 stroke-width : 선의굵기 fill : 원의 내부 색상 참고 https://www.w3schools.com/graphics/svg_circle.asp https://developer.mozilla.org/ko/docs/Web/SVG/Element/circle 2022. 1. 28. svg란? SVG(Scalable Vector Graphics) 확장가능한 벡터 그래픽 마크업 언어이다. XML 기반의 2차원 그래픽 으로 검색, 인덱싱, 스크립트 및 압축이 가능하다. 아이콘, 이미지, 그래프, 사용자 인터페이스(UI)등 널리 쓰인다. DOM의 일부로서 각 객체별로 HTML엘리먼트가 추가되며 벡터 기반이기 때문에 모든 사이즈에서 선명함이 유지되며 CSS, 자바스크립트등 으로도 조작이 가능하도록 설계되어있다. 에디터와 일러스트 벡터 방식의 소프트웨어 에서도 작성할 수 있으며 용량도 크지 않다. 2022. 1. 27. 이전 1 2 다음 728x90 반응형