Vector rendering in html

Typography vs. Image
I m a ge
l 정보집적도
l 데이터의 시각화
l 화려함 & 미려함

CS S & Ty po g r a ph y
l 가벼움
l 깔끔함
l 일관성있음

기기, 네트워크, 브라우저 성능/유형에 따라
달라지는 트렌드...

그러나...

대체 불가능한 상황은
존재하는 법!!

SVG(Scalable Vector Graphics)
1.
2.
3.
4.
5.

W3C 주도하에 고안된 오픈 "표준" 벡터 그래픽 형식
XML 기반
2D geometric transform 지원
filter 지원
animation 지원

SVG(Scalable Vector Graphics)
<!DOC TYPE svg PUBLIC "-//W3C //DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
< s v g xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          xmlns:ev="http://www.w3.org/2001/xml-events"
                          version="1.1" baseProfile="full" version="1.1" baseProfile="full"
                      width="800mm" height="600mm">
        
</ s v g >

VML(Vector Markup Language)
1.
2.
3.
4.
5.

OOXML 표준 및 ECMA-376
"역시나" XML 기반
legacy등을 이유로 웹표준 채택 안됨
M$ Office 문서 및 Internet Explorer 8 이하 버전에서 사용
formula 지원

VML(Vector Markup Language)
<html x m l n s :v = " u r n :s c h e m a s - m i c r o s o f t - c o m :v m l " >
x
<head>
    <style> v :* { b e h a v i o r : u r l ( # d e f a u l t # V M L ) ; } </style>
v
</head>
<body>
    <v:line from="10pt,10pt" to="100pt,10pt" strokecolor="red"
        strokeweight="3pt" href="http://red"/>
    <v:line from="100pt,10pt" to="10pt,100pt" strokecolor="black"
        strokeweight="2pt">
            <v:stroke dashstyle="dash"/>
    </v:line>
</body>
</html></html>

.vs <canvas> (HTML5)
1. 각 도형 요소가 DOM element로 기억됨
2. canvas는 raster 기반
3. HTML5를 지원 안하는 브라우저

Quick Diff....
t yp e
직선
원
타원
사각형
모서리가 둥근 사각형
다각형
꺾은선
원호
곡선

텍스트
자유도형

SV G

VML

<line>

<v:line>

<circle>
<ellipse>

<v:oval>

<rect>

<v:rect>

-

<v:roundrect>

<polygon>

-

<polyline>

<v:polyline>

-

<v:arc>

-

<v:curve>

<text>

-

<path>

<v:path>

지금부터 살펴볼 내용
1.
2.
3.
4.
5.

'path' only!
viewport vs coordinate
anti-aliasing
event-handling
and more issues...

path로 대동단결
1. VML/SVG간 지원/미지원 도형 엘리먼트가 조금씩 있음
2. <path> 또는 <v:path>를 이용하면 거의 모든 도형 공통 대응 가능
§ svg
<svg><path d="...."/></svg>
§ vml
<v:shape path="....."/>
<v:path m="....."/>

path commands
co m m a n d
move to
line to
curve to (cubic bezier)
curve to (quadratic bezier)
arc to
close path
separator(args)

SV G
M/m

VML
m

L/l

l

C/c

c

Q/q

qb

A/a

at/wa

Z

x/xe

whitespace

comma

문제는 arc!
1. SVG는 인자를 통해 회전 방향을 결정
2. VML은 command 자체가 분리!

viewport vs. coordinate
SVG
<svg viewbox="0 0 100000 100000">
§ VML
<v:path coordsize="100000 100000"/>
§

SVG
<svg viewbox="0 0 100000 100000">
element bound에 대응하는 가상의 좌표값
§ VML
<v:path coordsize="100000 100000"/>
§

element size가 총 몇등분되는지


VML

SVG


좌
path
각
산
재계

표

anti-aliasing
§
§

대개의 브라우저는 기본 지원
특수한 상황에서는 꺼 주어야 보기에 더 좋음
§ 막대 차트
§ 수직/수평선

anti-aliasing
SVG
<path shape-rendering = "crispEdges"/>
elem.style.shapeRendering = "crispEdges";
path { shape-rendering : crispEdges; }
§ VML
<v:shape style="antialias : false"/>
v:* { antialias : false; }
elem.style.antialias = "false";
§

anti-aliasing
SVG
<path shape-rendering = "crispEdges"/>
elem.style.shapeRendering = "crispEdges";
path { shape-rendering : crispEdges; }
§ VML
림
<v:shape style="antialias : false"/>
면 더 느
g을 끄
liasin
i-a
v:* { antialias : false; }
는 ant
서
7 이하에
IE
elem.style.antialias = "false";
)
§

(응 ? ?

event-handling
<SVG> or <VML>,
whatever it is...

cli ck!

B OOO~!

se l e c t e d ?

event-handling(SVG)

cli ck!

pointer-events : { auto / none /
    visiblePainted / visibleFill /
    visibleStroke / painted /
    fill / stroke / all / inherit }

event-handling(VML)
* a.k.a 밑장빼기!

cli ck!

if(el.className!="WRRRYYY") {
    el.style.display = "none";
    var elNext =
      document.elementFromPoint(x, y);
    elNext.fireEvent("onclick", evt);
}

more issues

SVG

VML

fill-rule

기본 nonzero, 변경 가능

even-odd

radial gradient

도형의 외각에 따라 다르게 표현

말 그대로 원형

별도의 marker def. 필요

기본 속성으로 지원

stroke-weight

viewbox size와 관련있음

coordsize와 무관

css attributes

elem.style.attr로 지정가능

대부분 read-only

animation

지원함

눈물부터 닦고 ㅠ

start/end arrow

bonus : raphaelJS
§

http://raphaeljs.com/
§
§

VML/SVG 크로스 브라우징 지원
try yourself!

짜!
엔 진
이번

overock@synapsoft.co.kr
twitter.com/overockaffe
facebook.com/overockaffe

Vector rendering in html

Recommended

Recommended

More Related Content

Similar to Vector rendering in html

Similar to Vector rendering in html (20)

Vector rendering in html