강의노트

아래 github에 업로드된 예제코드를 다운받아 실습 할 수 있습니다(D_SVG 참조).

https://github.com/iseohyun/html-tutorial.git

SVG는 그림파일의 작성 형식 중 하나입니다. 특징 및 장점은 다음과 같습니다.

확대시 품질 저하X (벡터기반)
일반적으로 작은 용량 (코드기반, 재사용/수정 용이)
문서 내 직접 구현이 가능 (포함된 글을 선택 가능)
애니메이션 효과 지원
그림 삽입 가능

코딩 위치

단독 구성하거나_{stand alone} html파일 속에 svg테그로 첨부_include 할 수 있습니다.

stand alone include svg code

heart.svg

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <!-- TODO : add your code -->
  <path style="fill:black;stroke-width:1px"
    d="M433,67c-24-24-57-38...(중략)" />
</svg>

stand_alone.html

<body>
  <img src="heart.svg" width="500" height="500">
</body>

include_svg.html

<html>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <!-- TODO : add your code -->
    <path style="fill:black;stroke-width:1px" d="M433,67c-24-24-57-38...(중략)" />
  </svg>
</body>
</html>

include_ver은 글자를 선택 할 수 있습니다.

A_Start > a_helloworld.html

좌표계

좌상단이 (0,0)입니다. 오른쪽으로 갈수록 X가 증가, 아래로 갈수록 Y가 증가합니다. (X좌표, y좌표)로 나타냅니다.
※ 아래 테스트 코드는 SVG로 작성되었습니다.

마우스 위치(브라우저 기준) : e.clientX, e.clientY
svg 위치(브라우저 기준) : svg.getClientRects()[0].x
var svg = document.getElementById("svg");
text 위치(svg 기준) : text.x.baseVal[0].value = ?
var text = svg.getElementById("text");
rect 위치(svg 기준) : rect.x.baseVal.value = ?
var rect = svg.getElementById("rect");
mouse 숨기기 : style="cursor:none;"

* 파일에 Javascirpt가 포함되어 있습니다. 브라우저로 열어주세요.@iseohyun.com CC-BY-SA

        <script>
  var svg = document.getElementById("svg");
  var text = svg.getElementById("text");
  var rect = svg.getElementById("rect");

  svg.addEventListener("mousemove", (e) => {
    x = Math.round(e.clientX - svg.getClientRects()[0].x);
    y = Math.round(e.clientY - svg.getClientRects()[0].y);
    text.textContent = "(" + x + "," + y + ")";

    rect.x.baseVal.value = x;
    rect.y.baseVal.value = y;
    text.x.baseVal[0].value = x + 5;
    text.y.baseVal[0].value = y + 5;
  });
</script>

구조

'svg 메타정보 + 참조 + 도형'로 구성됩니다.

<svg 메타정보>
  <defs>
    그림에 사용될 속성1(id1)
    그림에 사용될 속성2(id2)
  </defs>
  <도형1 />
  <도형2 xlink:href="id1"/>  <!-- 도형1을 가릴수도 있다. -->
  <g style="그룹 공통 속성">
    <도형3 />
    <도형4 />
  </g>
</svg>

svg 파일 구조
분류	항목	설명	Attr & <하위 항목>
svg	메타 정보	제목, 상세설명, 언어, ID, class, 분류	<title(제목)>, <desc(상세설명)>, <def(참조객체)>, <{object}(그림)>, <g(그룹된 객체)>
def (참조용)	linearGradient	채색 규칙(칠하기)	id <stop style="stop-color:{color} offset=[0..1]>
	pattern	채색 규칙(무늬 삽입)	viewBox, patternUnits preserveAspectRatio, width, height
	marker	선의 시작, 중간, 끝점 삽입이미지	id, viewBox, overflow, orlent, refX, refY <{objects}>
	symbol	재사용 될 이미지	id, viewBox <{objects}>
	clip-path	마스크	id, <{objects}>
	filter	적용할 특수효과	id, viewBox <{objects}>
	view	sub창, ~.svg#view로 선택	id, viewBox
{object} (직접 삽입)	path	자유 선 그리기	d(경로)
	rect	사각형 그리기	x, y(좌상 좌표), width(넓이), hight(높이), rx, ry(round XY둥근 모서리)
	circle	원 그리기	cx, cy(중심위치), r(반지름)
	ellipse	타원 그리기	cx, cy(중심위치), rx, ry(축 반지름)
	line	직선	x1, x2(시작점), x2, y2(도착점)
	polyline	도형(열림)	points({점 나열})
	polygon	도형(닫힘)	points({점 나열})
	text	글자 출력	x, y(좌상 좌표), <span x, y, dx, dy>
	use	심볼 출력	width(가로), height(세로), xlink:href="#{symbol.id}"
global	g	그룹	{object}, g
global	AnimateMotion	애니메이션 효과	path(경로) calcMode(동작방법) dur(재생시간), repeatCount(반복)...

공통속성
속성명	세부 항목명	설명	입력 값
style	fill	채우기	{color} \| url(#{gradient.id \| pattern.id}) \| "none"
	fill-opacity	투명도	[0 .. 1]
	fill-rule	채우기 규칙	"nonezero" \| "evenodd"
	stroke	태두리 색	{color}
	stroke-width	테두리 두께	{size}
	vector-effect		"non-scaling-stroke"
	stroke-linecap	테두리(선) 끝처리	"butt" \| "round" \| "square"
	stroke-linejoin	테두리(선) 이음부	"miter" \| "round" \| "bevel"
	stroke-dasharray	선 스타일(점선 규칙)	{size array}
	marker-start	선 시작 모양	url(#{marker.id})
	marker-mid	선 중간 모양
	marker-end	선 끝 모양
	filter	특수효과	url(#{filter.id})
	miter linit
style^* (font)	font-family	서체	{font}
	font-size	글자 크기	{size}
	font-style	기울임 등 스타일	"italic" \|
	font-weight	글자 두께	[0 .. 1000] \| "normal" \| "bold" \| ...
	letter-spacing	자간	{size}
	word-spacing	사이띄기 간격	{size}
	text-transform	대소문자 규칙	["capitalize" \| "uppercase" \| "lowercase"]
	white-space-collapse	빈칸 유지 규칙	"preserve"
	text-anchor	단어시작 위치(좌상단 기준)	[start \| "middle" \| "end"]
	dominant-baseline	단어의 세로 정렬 기준	middle
	text-wrap	줄바꿈 규칙	"nowrap"
	text-decoration-line	밑줄, 취소선, 윗줄	"underline", "overline", "line-through"
	text-decoration-thickness	밑줄 등 두께	"initial" ...
	text-decoration-style	밑줄 등 스타일(실선, 점선 ...)	["solid" \| ... ]
text-decoration-color	밑줄 등 색	{color}
transform	translate	이동	translate(x, y)
	rotate	회전	rotate(deg)
	matrix	변형	matrix(a, b, c, d, e, f)^**