SCALABLE VECTOR GRAPHICS

BS Study

Why SVG?

SVG is a DOM element

Search

Index

Scripting

Etc…

Why not VML?

ECMA-376에규정

M$ office용으로개발

XML 표준개무시

IE9 이후안녕~~

Basic SVG tags

tagName 비고

<svg> 모든 svg element의바탕

<line> 선긋기

<circle> 원

<ellipse> 타원

<rect> 사각형

<text> 텍스트

<g> 도형그룹

<path> 자유곡선

Let’s get started…

<svg width="100" height="100">

<circle cx="50" cy="50" r="40"

fill="yellow" stroke="black"

stroke-width="5" stroke-dasharray="5, 2"

/>

</svg>

http://ligo.kr/vdd

Create a SVG element

document.createElement('svg'); // <- does not work!

document.createElementNS(

'http://www.w3.org/2000/svg', 'svg'

); // <- it works

Styling SVG element

svgElement.setAttribute(key, value);

http://ligo.kr/vdd

시계를 대충 만들어 봅시다 :D

How to build up radial coordinates?

x : sin(Θ) * r

y : -cos(Θ) * r

(※ 360˚ = 2πrad)

x: cx + Math.sin(Θ) * r,

y: cy - Math.cos(Θ) * r

Θ

line cap, line join

linecap 비고

butt

round

square

linejoin 비고

miter

round

bevel

Date object

var date = new Date();

date.getHours();

date.getMinutes();

date.getSeconds();

date.getMilliseconds();

fin.

Thank you!!

overock@synapsoft.co.krhttp://facebook.com/overockaffehttp://twitter.com/overockaffe